EverWeb Logo

EVERWEB VIDEO TRAINING LIBRARY

Animation Effects (Part 1)

Video Transcript:

Welcome to Part II of Creating Animation Effects in EverWeb. In the first video we looked at many ways in which you can use EverWeb to create some great animation effects for your web pages…


In this video, we’re going to show you more effects and give you some tips on using animation with EverWeb.


Lets start with the Small Business Company page…


As you can see there’s a lot going on here, probably too much. It’s difficult to know where to look and what to focus on…


I’ve included this example to show you how easy it is to get carried away and overload the page so it becomes just a jumble of effects…


In the next example, there’s still a lot going on but it’s more coherent as the animation first focuses you at the top of the page then works it way down in a controlled way… At the end the text scrolls up to encourage you to read it


The arrow that comes is for the visitor to click on to go to the next page in the John and Sarah’s story…


As you can see, the animation has been storyboarded in order to create a flow of events


In our next example, we have a web page that is promoting a band’s tour.


Images of the band come in in a dramatic fashion, then the next tour date flashes followed by a fade in to show you where to focus to buy tickets…


The main image comes in with the following settings


Flip

Vertical

Duration: 1.0 seconds

Delay: 1.0 seconds

Repeat: 1 time



The images of the other band members follow using the these settings


Right Image


Bounce

From Left

Duration: 1.5 seconds

Delay: 2.5 seconds

Repeat: 1 time



Center Image


Bounce

From Left

Duration: 1.5 seconds

Delay: 4.0 seconds

Repeat: 1 time



Left Image


Bounce

From Left

Duration: 1.5 seconds

Delay: 5.5 seconds

Repeat: 1 time



The flashing date uses these settings


Other

Flash

Duration: 2.0 seconds

Delay: 7.0 seconds

Repeat: 2 times



The next example shows you how to create a clouds passing by effect. Using the Day Care theme template.


Select one cloud image and add the following animations settings:


Slide

From Left

Duration: 13.1 seconds

Delay: 0 seconds

Repeat: 1 time


Next, copy and paste the cloud in a few times across the whole width of the page. Remember that where you place the clouds is where they will be

at the end of the animation.



Our last example is from a photographer’s website. Here, I wanted to showcase the work first before bringing in the other elements of the page.I’ve used a flip vertical effect for all of the images.before bringing the other elements in using the Fade in place effect.


The important thing about this page is that it uses different timings to give a subtle sweeping effects.


The timings in the examples I have shown you are often to one tenth of a second as you can change the whole effect just by nudging the timing a tenth of a second more, or a tenth of a second less.