JavaScript Animations & Their Examples
Many of you might not know what JavaScript(JS) is, let alone know its certain animations. So, let’s just start with a little bit about this programing language. JS is a dynamic programing language, which means, this “tool” makes website content dynamic, adding certain effects and animations to it. It gives websites rather a character, which is exactly what is needed to make certain webpages stand out and make an impression. jQuery is somewhat the same, as they both accomplish the same thing, but jQuery is a sort of a toolkit of JavaScript, which, sure, does the same thing as the latter, but gets there faster and easier, since it was designed to simplify certain tasks by writing a lot less code, hence their motto – Write less, do more.
Now that you’ve become somewhat familiar with JavaScript, you should understand it’s animations easily. So, I bet you’ve entered a webpage and noticed, that when you press a “wrong” button, the button itself shakes for just a second, then goes to being perfectly still, allowing you to make a different choice. Maybe, you have also noticed, when viewing an image, for example, that it just doesn’t appear in milliseconds, but “gains” colors and lines slowly, or slides out from one side of your screen, or drops. All of these visual effects are done using animations, which are not always “random”, each coding language has its own collection.
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.
Comments
No comments yet.