Animate your new header. 

build a websiteReason8’s new Website Template designer not only enables you to build a website and design your own header and background but can even help you to add impact with some clever animation options. There are endless options for colour, style text and images to help you create the perfect look for you business. Bringing it to all life with animation will help grab the attention of internet users and bring them into your website. Let’s look at the animation options for images.

Should you need help with any step of creating your new header and website design, click here to check out a series of tutorials created to help you get the very best out of Template Designer.
If you’re starting from scratch with a new trial, simply choose your preferred starter template from all the categories and choices available and click personalise. If you’ve already started designing your website and header background, login to your website, click step 2 and click the header to access the template builder facility.

Image Animation

The template builder allows you to create a slide show of images within your header. It is recommended to use only 2 to 3 images within a slide show as too many can make your header slow to load up and you don’t want viewers to have to wait too long to see your stunning design!
Click the images tab at the top of your template designer and select 2 to 3 images of roughly the same size.  You can choose them from our library or upload them from your own.

Drag and drop your first image into position on your header and set the size, 3D, Colour and Edges options as required.

Drag and drop the second image on top of the first, making sure it completely covers the first image. Images of the same size will help you to do this but you can of course alter the size to fit. You can also set 3D, colour and edge options if required. For the second image set the “FADE IN“ time to 1.50 using the slider. This will delay the appearance of the second image allowing the first to appear for a short time before being covered by the appearance of the second.

build a website

Drag and drop the 3rd image, again directly over the top of the second image and set its delay time to 3.00. 

build a websiteClick the Play button to see the effect you have created.

You can go back and tweak the sizes, settings and delay times as much as you like to get the best effect. To access the first and second images to alter settings, simply drag and drop the top images out of the way and then put them back once you have finished tweaking.

You can click the play button as many times as you like to see the altered effect.

build a website

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');