Javascript Animations / 3 November 2017 - 05:38:20

More Amazing JS Animations

As you might already know, websites you visit daily all use a significant amount of animations. Sure, sometimes visitors don't even notice them, but with their help websites have a more sophisticated and visitor- friendly look, they don't seem boring and most importantly they appeal to the eyes. In the last article we talked about Javascript in general and some fairly simple animations, so if you are here to find out more or just a little bit about JS and it's animations, we suggest you take a look at our last article.

To read our last post about simple JS animations click here: Simple JS animations & Their Examples

Roughly, all websites serve one purpose. They all hold information and are trying to spread it. This info can be in 3 formats: video, just audio and text. I think everyone will agree that text is the most boring of the three so, it needs to be expressed with colorful and beautiful fonts. The first animation of this article does this exact job. Letters appear like their handwritten so you can see each stroke perfectly. They have multiple strokes over each other in multiple shapes or colors. To see this animation in action click "start" below the words. I can guarantee you'll want to click it more than once, I know I did.

The second animation is for dramatic reveal of information. It is a curtain opening effect by jQuery. Similar to theaters' curtains, this one opens from the middle and goes to the sides and closes back from the sides to the center. Below you can click "Open Curtain" and "Close Curtain" to see exactly how this animation looks.

http://talkerscode.com/webtricks/demo/demo_curtain-opening-effect-using-jquery-and-css.php

The next animation is probably something you have seen before, maybe not exactly in this form, but similar. It is a mirror effect with a single un-mirrored text over the background. In Demo # 3, when moving your mouse closer to and away from the vertical center line the elements move further and closer to it, respectively. The 3rd  preview below has 4 versions, you can choose from, but they are all the same style. To see more of the mirror effect examples 

pick demos from the upper right corner.

As most people do, we saved the best for the last. This is probably my favorite animation by far. jQuery's Time Lapse Painter Plus animation is the perfect way to demonstrate paintings and photos. This genius animation can be applied to any desired image and look flawless. All images first look like a blank paper, this paper gets splashes of color and lines, which are not perfectly straight of smooth, but rather like a stain that is left behind by an invisible brush. Each stroke looks like watercolor spreading on the paper and assembles a painting slow enough to actually see the animation work it's magic, but at the same time fast enough so you don't get bored while watching. To better perceive this beautiful view choose a desired image from the dropdown menu and watch the picture get painted right before your eyes.

Animations, in general, and their creators don't necessarily need an average blogger's praise. It's very clear that they make anyone's experience on the web better. If You would like to read more about each animation presented here visit the links given below :




Share:


Tags:

web programming

COMMENTS

Comments

No comments yet.

Leave A Reply

Subscribe to our newsletters! Be the first who receive all our news, ideas and offers!