Roundabout for jQuery by Fred LeBlanc It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results. Roundabout requires jQuery (at least version 1.2, successfully tested through version 1.7.2). It works in all major modern browsers and even some of the older, not-so-modern ones. It’s open source and released under the BSD license, meaning that it’s free to use in your personal or commercial projects. See Roundabout In Action Add-Ons Roundabout is equipped to play nicely with a couple of other plugins if they’re made available. Roundabout Shapes by Fred LeBlanc Roundabout can move in more ways than just a turntable. But That’s Not All! The list above is only a list of the plugins that have support baked in, but Roundabout will play nicely with many other plugins. Learn Support New in V2 The code is also a lot cleaner and better commented, which will hopefully allow you to get in there and tweak if you want to. to this: Usage
SpritePad - Create and edit css sprites Javascript Need reasons to love Bootstrap? Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!) 3d animation using pure CSS3 Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. Iron Man 2With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...More info The Last AirbenderThe story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...More info Tron LegacySam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...More info
10 jQuery snippets for efficient developers Load jQuery from Google Google has a fresh version of jQuery, which is made available for developers. Instead of getting a jQuery copy, you should definitely take advantage of Google’s “generosity” and directly load their copy: » Source Validate a date of birth using jQuery Validating dates of birth are a common task on websites that have content available only for users 18+ years old. $("#lda-form").submit(function(){ var day = $("#day").val(); var month = $("#month").val(); var year = $("#year").val(); var age = 18; var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); if ((currdate - mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; }); » Source Make sure an image has loaded properly How do you know if an image has been properly loaded? $('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); }); » Source
How To Create 15 Different CSS3 Transition Effects In this tutorial we are going to look at 15 different effects you can create using CSS transitions. CSS3 allows you to add transitions to different CSS properties on any HTML element. Using CSS transition effects allows you to add different types of animation to your web pages. If you look at the social media icons on Paulund.co.uk (my site) you will see how it uses CSS transitions to change the opacity on the images to fade in the social media icons. CSS Transition Property Currently transitions are supported on all modern browsers and will come into place for Internet Explorer in IE 10. To use transition you need to add the browser prefix to the start of the property. With transitions you can change a certain CSS property or all the properties on an element. In the below examples of transitions we are setting it to all so we can make multiple changes to the element. View the demo to see these in action. The Box Move Down Move the box down. Move Up Move the box up. Move Left Move Right Smaller Larger
Using jQuery's SlideUp() and SlideDown() Methods With Bottom-Positioned Elements jQuery makes the creation of dynamic user interfaces easier than ever before. A few of the convenience methods that I use every single in my web application development are slideDown() and slideUp(). These are perfect for showing and hiding content in a non-jarring manner. I fell victim to this narrow-sightedness just last week. After I got this approach to work, including the offset calculation and re-positioning that I needed to perform prior to slide-up, I had a "well d'uh" moment! Once I had this realization, it made so much sense that I was, in fact, more than a little embarrassed that it didn't occur to me sooner.
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou