See all of our personal fitness plans
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.
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)
StARTstreet is a collective of artists dedicated to bringing art to the masses and making something beautiful in our concrete jungles.
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.
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.
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
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
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.
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.
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.