Motion

Adding motion effects can add depth, attractive transition and animation when the visitor scrolls up/down a page or moves a mouse.  This can include images, text, headers moving up and down, left or right as the visitor moves around the page.  Or rotate, re-scale or even blur or make transparent.  Done well these motion options can add value to existing images to further help retain attention. as it makes the page a more interactive experience which is always more engaging.

It is good to remember that some motions work better on desktop than on devices and for moues-over effects then they will not work on devices at all.  It is also worth considering that any additional features can impact on a page efficiency but as long as they are added sensibly the positive visual impact will be far greater than any effect on loading.  At Dynamiser such additions would be tested to make sure no negative impact is seen and if a good Host Provider is used (such as SiteGround) then Lazy Loading can be used which does not load images (should they have a motion effect applied) until the visitor reaches that point in a page ensuring the page is loaded initially as quick as possible.

Vertical Scroll

Adding a vertical scroll to any image, text, header (and in fact any element of a web page) results in that element moving up and down the visible page as the visitor scrolls down and up.  As soon as that visible page ends the image will stop moving so it will not be seen permanently as the visitor scrolls down the whole actual page.

Below we can see an interior designer has her logo at the top of her home page.  As the visitor scrolls down the logo will travel down with the scroll while the background image stays static.  Where the image starts/stops within the visible page can be set to your requirement.

Go ahead and give it a try, you will see it comes to a stop as the visible page changes over to the next part of Jennifer’s home page.

vase

Jennifer Wilde

Interior Decorator

Hi, I am Jennifer, welcome to my website

Hi, I am Jennifer, welcome to my website

The next example shows two icons moving over two smaller hero sections which have been made sticky so double the impact. (note, sticky sections are not available on Mobile and Tablet devices, the full effect of this example would be seen on a desktop)

startStreetLogo2
stARTstreet

StARTstreet is a collective of artists dedicated to bringing art to the masses and making something beautiful in our concrete jungles.

stARTstreet

Artist looking for an arena to show off your talent on a large scale, work in a team and feel part of the community?  Then contact us

Own a building that needs to be externally enhanced or internal space, such as a studio or industrial office setting then call on our group to make that place something special.  Our teams will help with the inspiration or simply leave it to them, you will not be disappointed.

Horizontal Scroll

Adding a horizontal scroll to any image, text, header (and in fact any element of a web page) results in that element moving right or left in the visible page as the visitor scrolls down and up.  As soon as that visible page ends the image will stop moving.

In the following example, a holiday company has added horizontal motion to two statement headers, one coming in form the left and the other from the right, this encourages their visitor’s eyes to those statements while scrolling down the page.

Go ahead and give it a try, you will see it comes to a stop as the visible page changes over to the next part of Winter Brake’s home page.

Winter Brakes

Halt the Winter Blues

Start your journey here

Accommodation

1st Class Accommodation at great prices

Flights

Flights to all our holiday destinations

Travel

Great discounts on Car hire

Instead of moving the text left or right, how about images instead.  This time the moving images direct the visitor to the text to make sure the options are not missed.

See all of our personal fitness plans

Download your plan

Transparency Transitions

Add great effects to headings and text, as well as images, as the user scrolls to make that extra impact.   The transparency can be set to fade in or out or fade in then out or visa versa.

To enhance a great landing page for Lush Fauna, the “Lush” transparency has been set to fade out while the “Fauna” has been set to fade in.  So we can see different transparency as the visitor scrolls down

Go ahead and give it a try, you will see it comes to a stop as the visible page changes over.

Lush

Fauna

Lush

Fauna

The next example shows a dance school landing page but this time the transparency has been set on the background image instead, leaving the heading.  So when the visitor lands on the page the image is almost invisible but fades in to be revealed as the visitor scrolls down.

Exquisite School of Dance

Any section in a page can be set to fade in or out the transparency.  Below we can see two Price tables over an image but as the visitor scrolls down the transparency fades out to reveal just the image.

Trial Lesson

Thursday Evenings
£20
£ 10 Session
  • One to One lesson
  • Advice on equipment
  • Meet fellow students

Block Bookings

10 Sessions
£200
£ 150 10 Sessions
  • Standard Group Sessions
  • Pay by Direct Debit or PayPal
  • You choose which sessions

The final example shows how the heading transparency doesn’t just fade in but then out again as the visitor scrolls down.

Welcome to birmingham's canals

Blur Transitions

Instead of transparency, another option is to blur the text as the visitor scrolls down.  Actually the Blue can fade in or out as well as fade in and then out or visa versa.

To enhance a great landing page for a travel company, the heading statement fades out as the visitor scrolls down to reveal more of the image.  But as scrolling takes the visitor to a different visible page below the next sections are opposite and fade in with scroll down.

Go ahead and give it a try, you will see it comes to a stop as the visible page changes over.

The World is in your hands

Start your journey here!

Accommodation

1st Class Accommodation at great prices

Flights

Flights to all our holiday destinations

Travel

Discounts on Car hire

Rotate

Catch your visitor’s eye with a rotating element.  The obvious is an image but in theory, other types of elements can be rotated.  Below we can see an Engineering company are using the effect on their logo and a large cog in the centre to draw the eye to an important message.  The rotation does not start until the visitor scrolls and will cease once scrolling is stopped or the end of the visible page is reached.

See how the rotating speeds are different between the logo and the cog as well as in different directions.

wrenchCog

Coggy Engineering

Let us engineer something for you

Rotating images do not have to be circular, see below where an image on the right directs the visitor to the section.  Also note the growing cog under the message (discussed in next topic) to further draw the eye.

Contact us for your bespoke engineering solution

silverCog

Scale

By re-scaling any element again an impact is made.  Normally growing an Image would come to mind but other types of elements can be grown or shrunk.

Below we see a nice image advertising Lush Fauna’s Mothers Day offers where that message grows as the visitor scrolls down.

Treat the special lady this March at

Lush Fauna

Changing scale is not limited to text or images, any element can be set to grow or shrink.  Below we see a single testimonial that grows as the visitor scrolls down really drawing the eye to a good positive review.

My mom loved her bouquet, thanks to all the team for the advice and prompt delivery.
Nikki Mcgee

Shrinking elements can also be useful.  As the visitor scrolls down onto the visible page the Call to Action section starts large and grabs attention.  Then as the visitor scrolls down past then the CTAs shrink to allow the page to display further information quickly.

Lunch Menu

We offer a good healthy menu of lunchtime treats from meaty burgers to vegetarian options.

Evening Menu

Select from our extensive menu of fresh dishes all produced in-house using local produce.

Lunch Menu

We offer a good healthy menu of lunchtime treats from meaty burgers to vegetarian options.

Mouse Effects

Two great effective animation features available on desktop based web pages: 3-D and Mouse Track.  Both respond to the visitors mouse to take effect.

3D Tilt: Give a new perspective to images by tilting left and right as the mouse moves.  The tilt can be set to follow the direction of the mouse movement or the opposite. And at different speeds.

Mouse Track: Tracking moves the element around the screen depending on the movement of the mouse.  This is a great idea to attract attention to a message or add depth to sections. 

These features are not available on Mobile or Tablet devices so it is recommended you view this page on a desktop to see the examples of the effects in use.

Mouse Effects

Two great effective animation features available on desktop based web pages: 3-D and Mouse Track.  Both respond to the visitors mouse to take effect.

3D Tilt

Give a new perspective to images by tilting left and right as the mouse moves.  The tilt can be set to follow the direction of the mouse movement or the opposite. And at different speeds.

In the following example Lottie has dropped 3 example family portraits onto a background.  The pictures are a mix of direct and opposite tracking.

Lottie's Gallery

familyportrait3
familyportrait2

Mouse Track

Tracking moves the element around the screen depending on the movement of the mouse.  This is a great idea to attract attention to a message or add depth to sections. 

Below you will see the gym instructor move around with the movement of your mouse making sure the fitness plan button is not missed.

See all of our personal fitness plans

Multiple images can be combined to give depth when one of the images moves alongside the mouse movement.

Pete the Pilot - Drone Services

Entrance Animation

As well as motion effects with scroll and mouse movement, motion can be added to all elements as they appear on the page (entrance).  Choose from a many effects from Fade, Bounce, Zoom and others.  The animation can be in/out, left or right.

Used effectively, the effects draw the eye and engage with the visitor ensuring important messages are seen and encourage attention to the page as a whole.

In the first example we see a landing page where cars and info bubbles (flip boxes) fade in left and right.  Rotation is added to the bubbles as the visitor scrolls down.

YellowCar

25% April
Discount

MOT +
Service Offers

Performance
Services

Re-sprays
& Wraps

Yellow Peril Autos

YellowCar2

This time a CTA (Call To Action) is provided to the vistor, with a transparent background over a video.  The CTA Zooms in down with an added delay so the video makes the initial impact before the CTA is seen encouraging the visitor to read more about race tuning.

Full Race Tuning @

Yellow Peril Autos

Any element of a page can have an entrance animation added.  This time a “Tada” animation is added to the heading with a 2 second delay again allowing the wrapped car to catch the eye before the message is provided.

Wrap your car in love!!

Yellow Peril Autos

Animation Gradient

The background colour of any section or column can have animated gradients, 2 or more colours that change.  Great for bringing the eye to a heading. In the example below we can see a simple banner with two headings. There are subtle colour changes to make it more interesting than just a simple single colour.

Hanover Bay Spa

Find the perfect Hot Tub for you

Also great for buttons; below two columns have had 3 different greens added to the animated gradient.  Buttons with transparent backgrounds have then been added to the columns.

Dutch Barn

Sizes Available:
2400mm x 2400mm (8′ x 8′)
3000mm x 2400mm (10′ x 8′)
3530mm x 2400mm (12′ x 8′)

Ridge Height: 2667mm (approx 8′ 9′)

Door: Ledged and Braced

Window: 3 Pane Joinery Opening

Loft: Internally Braced

Additional Options:
19mm Loglap cladding
Tanalised wood treatment
22mm Heavy duty flooring
Stable Door
Heavy duty galvanised door hinges
Security padbolt protector
Safety Glass
Ramp
Heavy duty roof felt
Window boxes (large or small)
Georgian style windows

Dilly's Daycare

Contact Us