Text Animation for your Website Header. 

build a websiteThe new Website Template Designer from Reason8 can help anyone to build a website, whether you’re a computer whizz or a complete technophobe. The tools and options in this simple to use system are so flexible that you can build a website and design the perfect look for you business. The animation options then allow you bring your website to life to grab the attention of internet users, bringing them into your website to encourage maximum response for your business.

Let’s look at the text animation options. 

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. 

Text Animation. 

When you add the text to your website, you can add the information in separate lines, which you can then animate individually to create a host of movement to draw peoples’ attention to the information. 

build a websiteLet’s start by either double clicking any existing text on your header or clicking the Text tab at the top. You can edit the existing text or Add more text by using the top “Enter Text Here” box. Once you’ve created your line, you can choose from 78 different Fonts using the menu on the right. You can also set the; size; font colour; rotation; transparency; shadow, reflection or bevel options; outline colour, thickness and fade. When you are happy with your text settings, simply drag your finished line of text from the “Drag Box” underneath the “Enter Box” and drop it into place on your header.

Now click the EFFECT tab on the left. 

build a website

You have 14 different effects to choose from here: Flap Down, Close the Gate, Fall down, Swing, Roundabout, Windmill, Move Left, Move Right, Drop Down, Move Up, Wipe Right, Wipe Left, Eye Opening and Fade In.
Why not try them all!! Select one at a time from the drop down box and click play to view the animation to see if you like it. Each effect is affected by the behaviour styles on the right, which include: Normal, Smooth, Bounce or Elastic. Normal and Smooth are quite similar but Smooth is slightly quicker and smoother. Bounce adds a build a websitelittle double bounce at the end of the effect. Elastic is the quickest effect and adds a little wobble at the end. Why not try them all and click play to view and find your favourite. 

You can apply different effects onto different lines of text to make them behave in different ways and stand out individually. For instance, your main Company Name could flap down straight away and a couple of seconds later your slogan can slide into view. 

Be careful though – too much animation can increase upload times!! 

Duration and Delay 

The Duration and Delay settings for your animation will literally determine how long the effects will last (the longer the duration, the slower the effect) and how long the effect waits before starting. But be frugal with these settings as the longer the duration and delay you set the bigger the download time, i.e. the longer your potential customers will have to wait to see your animated masterpiece! The last thing you want is for people to get impatient and give up waiting. Unfortunately people aren’t very patient these days, so try to keep the duration and delay to a minimum. All the effects still look great even with a duration and delay of just 1.00. 

There are so many combinations and it’s so simple to play and review until you’re happy.  

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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');