Ryan's CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact.
The HTML
The exploding element can be of any type, but for the purposes of this example, we'll use an A element with a background image:
Remember to set the text-indent setting so that the link text will not display. The explosion shards will be JavaScript-generated SPAN elements which are displayed as in block format. Note that the SPAN has the same background image as the A element -- we'll simply modify the background position of the element to act as the piece of the logo that each SPAN represents.
The jQuery JavaScript
Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>
<script>
Number.random = function(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
var zeros = {x:0, y:0, z:0};
jQuery.extend(jQuery.fn, {
scatter: function(){
return this.translate({
x: Number.random(-1000, 1000),
y: Number.random(-1000, 1000),
z: Number.random(-500, 500)
}).rotate({
x: Number.random(-720, 720),
y: Number.random(-720, 720),
z: Number.random(-720, 720)
});
},
unscatter: function(){
return this.translate(zeros).rotate(zeros);
},
frighten: function(d){
var self = this;
this.setTransition('timing-function', 'ease-out').scatter();
setTimeout(function(){
self.setTransition('timing-function', 'ease-in-out').unscatter();
}, 500);
return this;
},
zoom: function(delay){
var self = this;
this.scale(0.01);
setTimeout(function(){
self.setTransition({
property: 'transform',
duration: '250ms',
'timing-function': 'ease-out'
}).scale(1.2);
setTimeout(function(){
self.setTransition('duration', '100ms').scale(1);
}, 250)
}, delay);
return this;
},
makeSlider: function(){
return this.each(function(){
var $this = $(this),
open = false,
next = $this.next(),
height = next.attr('scrollHeight'),
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
$this.bind('click', function(){
next.css('height', open ? 0 : height);
open = !open;
});
})
},
fromChaos: (function(){
var delay = 0;
return function(){
return this.each(function(){
var element = $(this);
//element.scatter();
setTimeout(function(){
element.setTransition({
property: 'transform',
duration: '500ms',
'timing-function': 'ease-out'
});
setTimeout(function(){
element.unscatter();
element.bind({
mouseenter: jQuery.proxy(element.frighten, element),
touchstart: jQuery.proxy(element.frighten, element)
});
}, delay += 100);
}, 1000);
})
}
}())
});
// When the DOM is ready...
$(document).ready(function() {
// Get the proper CSS prefix
var cssPrefix = false;
if(jQuery.browser.webkit) {
cssPrefix = "webkit";
}
else if(jQuery.browser.mozilla) {
cssPrefix = "moz";
}
// If we support this browser
if(cssPrefix) {
// 300 x 233
var cols = 10; // Desired columns
var rows = 8; // Desired rows
var totalWidth = 300; // Logo width
var totalHeight = 233; // Logo height
var singleWidth = Math.ceil(totalWidth / cols); // Shard width
var singleHeight = Math.ceil(totalHeight / rows); // Shard height
// Remove the text and background image from the logo
var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");
// For every desired row
for(x = 0; x < rows; x++) {
var last;
//For every desired column
for(y = 0; y < cols; y++) {
// Create a SPAN element with the proper CSS settings
// Width, height, browser-specific CSS
last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
// Insert into DOM
logo.append(last);
}
// Create a DIV clear for row
last.append(jQuery("<div />").addClass("clear"));
}
// Chaos!
jQuery("#homeLogo span").fromChaos();
}
});
</script>
In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images.
When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this - your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.
In this tutorial we will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.
It's the age old (well, in webby terms) issue of how to populate one select box based on another's selection. It's actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax.
In this tutorial, we'll take a look at how jQuery's beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We?ll also take a quick look at jQuery 1.5's completely revamped AJAX module.
As English speakers, our minds are geared toward interpreting data and text from left-to-right. However, as it turns out, many of the modern JavaScript selector engines (jQuery, YUI 3, NWMatcher), and the native querySelectorAll, parse selector strings from right to left.
Sometimes we need to include a feedback form but without making it too obtrusive to the user so we only want to add options when he is actually using it. In this tutorial we're going to learn how to reveal hidden fields in a form when an option in a select combo box is selected using jQuery, the JavaScript library.
The excerpt is great for magazine sites where only a small bunch of words can be displayed on the home page. However, the lack of a character counting functionality for the field makes it hard to know how many you already typed in. In this tutorial we will learn how to easily add a character counter for the excerpt.
In this post we will learn how to create a featured posts section, using WordPress sticky posts and how to integrate them in a slider, using jQuery Cycle.
Even though WordPress might not the friendliest CMS for user management, provides a good amount of customization for users meta information and profiles. However, one thing that is a bit rough right now is the Personal Options block in the User Pofile: you can't hide it by removing an action hook or even filter it. In this tutorial we?re going to learn how to removing it using jQuery.
This is a free service and it is provided by http://www.onlineleaf.com/ Their standby engine is deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.
When your visitors are inactive, this engine launch a standby screen, with the text "Energy saving mode".
Login to your Blogger dashboard --> Design --> Edit HTML.
Don't click on "Expand Widget Templates". Scroll down to where you see the </head> tag of your template. Now copy below code and paste it just before the </head> tag.
Also you can easily define how long time your visitors have to be inactive, for the engine to launch the standby screen, by adding ?time=X where X should be replaced with the number of seconds you would like to define the time interval. An example could be:
How to add great featured jQuery content slider to your blogger blog or other website ? Read the instruction given below to add this featured content slider to your blog with in few minutes. Remember to use 307px width and 254px height images for this slider. I recommend to DOWNLOAD java script files and host it yourself.
1. Login to your blogger dashboard--> Design - -> Edit HTML.
2. Scroll down to where you see </head> tag .
3. Copy below code and paste it just before the </head> tag .
Navigation menus are very important part of a website. It help your visitors to navigate through your website easily. There are various type of beautiful navigational menu in the web. Some of are work only using CSS. But some advanced navigation menus use scripts like jQuery. Using jQuery you can create navigation menus which include advanced features.
Here listed 17 very attractive jQuery horizontal menus collection for web designers. Select your menu and use it to add a professionallook for your website.
1. Login to your blogger dashboard--> layout- -> Edit HTML
2. Scroll down to where you see ]]></b:skin> tag.
3. Copy below code and paste it just after the ]]></b:skin> tag.
