comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
CSS3 animations and their jQuery equivalents |
As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too. At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents. This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.
IMPORTANT NOTE: With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery. Video Here's a small example video showing both the CSS3 and jQuery animations inside the latest version of Safari. Of course, if you're running Safari or Chrome, you can view all examples yourself. Fade For our first effect, we'll do a simple fade. When hovering an element, it fades to a given opacity. Let's see how you can create this effect using both CSS3 and jQuery. HTML<img src="images/fadeimg.png" alt="Fade Image" class="css3_fadeimg" /> As you can see, I'm simply using an image which has class applied. As you can imagine, you can apply this class to other elements. CSS3@-webkit-keyframes fade { 0% { opacity: 1.0; } 100% { opacity: 0.5; } } .css3_fadeimg:hover { -webkit-animation-name: fade; -webkit-animation-duration: 1s; } With the jQuery$(".jquery_fadeimg").hover(function() { $(this).stop().animate({ opacity: 0.5 }, 1000, function() { $(this).stop().animate({ opacity: 1.0 }, 0); }); }, function() { $(this).stop().animate({ opacity: 1.0 }, 0); }); The jQuery example is just as elegant as the CSS3 one. Simply apply an hover event to the element and animate it over a given timespan. Bounce Now that we know how to create a simple fade, we'll create an example which is a little bit harder: A bounce effect. We'll apply the effect to an image that'll bounce to the right (and back). HTML<div class="css3_bounce bounce"> <img src="images/bounceimg.png" class="bounceimg" /> </div> As you can see, there is a surrounding container that holds one image. We'll need the container to capture the hover effect, and the image will bounce inside the container. CSS3@-webkit-keyframes bounce { from { margin-left: 0px; } to { margin-left: 250px; } } .css3_bounce:hover img { -webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } Just like with the previous effect, the jQuery$(".jquery_bounce").mouseenter(function(){ $("img", this).animate({ marginLeft : '250px' } , { duration: 1000, easing: 'easeOutCubic', complete:function() { $(this).animate({ marginLeft : '0px' } , { duration: 1000, easing: 'easeInCubic'}); } }); }).mouseleave(function() { $("img", this).stop().css({ marginLeft : '0px' }); }); With the help of the jQuery Easing Plugin we can recreate this beautiful effect in the exact same way as with CSS3. We'll simply change the Pulsate and Colorize On to the next step, an even more advanced animation. We'll pulsate and colorize a given HTML<div class="css3_pulsate pulsate"></div> As you can see, just a simply CSS3@-webkit-keyframes pulsate { 0% { width:100px; } 5% { width:150px; left:-25px; } 10% { width:100px; left:0px; } 15% { width:150px; left:-25px; } 20% { width:100px; left:0px; } 40% { width:100px; background-color:#38374A; } 45% { width:150px; left:-25px; background-color:#38374A; } 50% { width:100px; left:0px; background-color:#38374A; } 55% { width:150px; left:-25px; background-color:#38374A; } 60% { width:100px; left:0px; background-color:#38374A; } 80% { width:100px; background-color:#45002D; } 100% { width:100px; background-color:#45002D; } } .css3_pulsate:hover { -webkit-animation-name: pulsate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; } I was pretty happy to see that the CSS3 implementation looks very good! By setting a value for each percentage of the animation, we can make it look like a pulsating box. We'll also change the colour of the box. jQuery$(".jquery_pulsate").hover(function() { $(this).stop().animate({ width: '150px', left:'-25px' }, 150, function(){ $(this).animate({ width: '100px', left:'0px' }, 150, function() { $(this).animate({ width: '150px', left:'-25px' }, 150, function() { $(this).animate({ width: '100px', left:'0px' }, 150, function() { $(this).animate({ backgroundColor: '#38374A' }, 600, function() { $(this).animate({ width: '150px', left:'-25px' }, 150, function(){ $(this).animate({ width: '100px', left:'0px' }, 150, function() { $(this).animate({ width: '150px', left:'-25px' }, 150, function() { $(this).animate({ width: '100px', left:'0px' }, 150, function() { $(this).animate({ backgroundColor: '#45002D' }, 600, function() { $(this).animate({ backgroundColor: '#45002D' }, 600, function() { $(this).animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1); }); }); }); }); }); }); }); }); }); }); }); }, function() { $(this).stop().animate({ width: '100px', backgroundColor: '#6CAB6C' }, 1); }); The jQuery equilavent of this effect, isn't as pretty. We'll use the Link nudge Let's move on to a more practical example - link nudging. I'm doing it at Marcofolio too - simply hover over the elements in the main menu and you'll see the effect. Let's see how you can create this effect with CSS3 animations too! HTML<div class="css3_nudge nudge"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Blog">Blog</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Register">Register</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </div> Just a simple unordered list with list items that contains anchor tags (links). How simple can it get? On to the nudge effect. CSS3.css3_nudge ul li a { -webkit-transition-property: color, background-color, padding-left; -webkit-transition-duration: 500ms, 500ms, 500ms; } .css3_nudge ul li a:hover { background-color: #efefef; color: #333; padding-left: 50px; } We're going to animate the anchor tags inside the list. By using the jQuery$(".jquery_nudge ul li a").hover(function(){ $(this).stop().animate({ paddingLeft: '50px', backgroundColor: '#efefef', color : '#333' }, 500); }, function() { $(this).stop().animate({ paddingLeft: '25px', backgroundColor: '#ffffff', color : '#afafaf' }, 500); }); The jQuery equivalent is just as elegant. By using the jQuery Color Plugin again, we can also colorize the Accordion I have to admit - this is a little cheat by using a different HTML code for this effect. This is also the reason why, by default, the accorion (also on the example page) are different. The CSS3 version hasn't expanded, while the jQuery version does. Let's see why. HTML - CSS3<div class="css3_accordion accordion"> <a href="#firstacc" title="Expand">First accordion</a> <div id="firstacc"><p>First content</p></div> <a href="#secondacc" title="Expand">Second accordion</a> <div id="secondacc"><p>Second content</p></div> <a href="#thirdacc" title="Expand">Third accordion</a> <div id="thirdacc"><p>Third content</p></div> </div> As you can see, the anchor links, have the same text as the ID from the hidden divisions. This means, the links will append a CSS3.css3_accordion div { height: 0; overflow: hidden; -webkit-transition: height 500ms ease; } .css3_accordion div:target { height: 105px; } As you can see, once a HTML - jQuery<div class="jquery_accordion accordion"> <a href="#" title="Expand">First accordion</a> <div><p>First content</p></div> <a href="#" title="Expand">Second accordion</a> <div><p>Second content</p></div> <a href="#" title="Expand">Third accordion</a> <div><p>Third content</p></div> </div> The HTML for the jQuery version is slightly different. I needed to remove the jQuery$(".jquery_accordion").accordion({ header: 'a' }); The jQuery is, as you can see, really really short. But that only is the case, since I'm using the jQuery UI plugin. But this plugin doesn't allow to close the first tab, which is the reason why it's opened by default. Conclusion and Download There we go: 5 different CSS3 animations with their jQuery equivalents. CSS3 animation does have it elegancy in it's own way, but jQuery will have to do for now since that one is only cross-browser usable. The downside from the jQuery versions is that it generates loads of data, since you'll need to download jQuery and the needed plugins. What do you think of these examples? Do you hope that animations will be added to the CSS standard soon? On do you prefer the jQuery way? Feel free to share your opinion. Tags: CSS3 animations jquery webdevelopment CSS Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |