In this article, you will read about some fairly simple animations and effects and see the finished animated examples. Every other complex animation is created using some combinations of the simpler ones.
The first animation effect I’d like to describe is a simple slide. I can guarantee most of your daily visited websites use this animation, without you even noticing it. Most of Gridgum’s templates sure do. This rather simple effect, appeals to visitor’s eyes, thus making webpages visitor-friendly. To see what slide looks like choose it from the drop-down menu above and click "run effect".
Another simple animation is Drop. Elements appear and slide slightly when using this animation and on some webpages, you can easily notice how different elements enter your visual scope from different directions. That is a perfect example of drop animation by jQuery.
The next simple animation is Fade. This animation is used to show, hide or replace one element or image with another by slowly increasing or decreasing the image’s opacity. Using this effect is a lot more appealing to the eye, than just having certain elements "pop" in a heartbeat, this way webpage elements slowly absorb silhouettes and colors and appear beautifully.
Before describing just one animation from the “not so simple” category, let’s say a little bit about Bounce effect. So, when using this animation an element appears, slides quickly and shakes for a second until stopping, much like a bouncing ball. In the white window with the example element, choose and execute "bounce" to see how it looks like. With this you can better visualize not only the animations discussed in the article, but also any other one that you would like.
Now the “not so simple” - JS carousel animation, which is one of my favorites. Here at Gridgum we use this animation a lot. With the help of this animation you get a moving display of desired elements or images. JS carousel has different designs. It usually looks like a horizontal ribbon of same sized images or elements, that is "wrapped" around the webpage.
To sum up, animations are THE tools to make a website visitor-friendly and to liven up dull and boring webpages. This article included the simplest of JS animations, in the next article, we will be talking about more complex and sophisticated ones, in the meantime, to better visualize the animations listed above, you can visit https://jqueryui.com and read more about JS animations.