Exploding Image/logo for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

<style> a#homeLogo { width:300px; height:233px; text-indent:-3000px; background:url(http://www.blogspotvision.info/css/exploding-logo/bsvlogo.jpg) 0 0 no-repeat; display:block; z-index:2; } a#homeLogo span { float:left; display:block; background-image:url(http://www.blogspotvision.info/css/exploding-logo/bsvlogo.jpg); background-repeat:no-repeat; } .clear { clear:both; </style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<a href="http://www.blogspotvision.com" id="homeLogo">Blogspot Vision</a>

JavaScript Code Snippet
This section code should be inserted before the closing head tag.

<script src='http://www.blogspotvision.info/css/exploding-logo/mootools-1.3.js'/> <script src='http://www.blogspotvision.info/css/exploding-logo/CSSAnimation.js'/> <script src='http://www.blogspotvision.info/css/exploding-logo/CSSAnimation.MooTools.js'/> <script> // reset transforms to this var zeros = {x:0, y:0, z:0}; // Implement animation methods on the element prototype Element.implement({ // Scatter elements all over the place 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) }); }, // Return them to their original state unscatter: function(){ return this.translate(zeros).rotate(zeros); }, // Frighten the image! AHHHHHHHH! frighten: function(d){ this.setTransition('timing-function', 'ease-out').scatter(); setTimeout(function(){ this.setTransition('timing-function', 'ease-in-out').unscatter(); }.bind(this), 500); return this; }, // Zoooooom into me 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); }, // Create a slider makeSlider: function(){ var open = false, next = this.getNext(), height = next.getScrollSize().y, transition = { property: 'height', duration: '500ms', transition: 'ease-out' }; next.setTransition(transition); this.addEvent('click', function(){ next.setStyle('height', open ? 0 : height); open = !open; }); }, // Scatter, come back fromChaos: (function(x){ var delay = 0; return function(){ var element = this; //element.scatter(); setTimeout(function(){ element.setTransition({ property: 'transform', duration: '500ms', 'timing-function': 'ease-out' }); setTimeout(function(){ element.unscatter(); element.addEvents({ mouseenter: element.frighten.bind(element), touchstart: element.frighten.bind(element) }); }, delay += x); }, x); } }()) }); // When the DOM is ready window.addEvent("domready", function() { // Get the proper CSS prefix from the page var cssPrefix = false; switch(Browser.name) { // Implement only for Chrome, Firefox, and Safari case "safari": case "chrome": cssPrefix = "webkit"; break; case "firefox": cssPrefix = "moz"; break; } // 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 var shards = []; // Array of SPANs // Remove the text and background image from the logo var logo = document.id("homeLogo").set("html","").setStyles({ backgroundImage: "none" }); // For every desired row rows.times(function(rowIndex) { // For every desired column cols.times(function(colIndex) { // Create a SPAN element with the proper CSS settings // Width, height, browser-specific CSS var element = new Element("span",{ style: "width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * colIndex) + "px -" + (singleWidth * rowIndex) + "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);" }).inject(logo); // Save it shards.push(element); }); // Create a DIV clear for next row new Element("div",{ clear: "clear" }).inject(logo); }); // Chaos! $$(shards).fromChaos(1000); } }); </script>

CSS Play - Image Manipulation for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

<style type='text/css'> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/image-manipulation.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. BLOGGERIZED BY BLOGSPOTVISION.COM =================================================================== */ .gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery li {width:160px; height:140px; float:left;} .gallery li a {display:block; width:160px; height:140px; position:absolute; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery li a.p1 {background:url(http://www.blogspotvision.info/css/cssplay1/pic1.jpg); opacity:0.5; left:0; top:0;} .gallery li a.p2 {background:url(http://www.blogspotvision.info/css/cssplay1/pic2.jpg); opacity:0.5; left:160px; top:0;} .gallery li a.p3 {background:url(http://www.blogspotvision.info/css/cssplay1/pic3.jpg); opacity:0.5; right:0; top:0;} .gallery li a.p4 {background:url(http://www.blogspotvision.info/css/cssplay1/pic4.jpg); opacity:0.5; left:0; bottom:0;} .gallery li a.p5 {background:url(http://www.blogspotvision.info/css/cssplay1/pic5.jpg); opacity:0.5; left:160px; bottom:0;} .gallery li a.p6 {background:url(http://www.blogspotvision.info/css/cssplay1/pic6.jpg); opacity:0.5; right:0; bottom:0;} .gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;} .gallery li a.p1:hover {left:0; top:0;} .gallery li a.p2:hover {left:0; top:0;} .gallery li a.p3:hover {right:0; top:0;} .gallery li a.p4:hover {left:0; bottom:0;} .gallery li a.p5:hover {left:0; bottom:0;} .gallery li a.p6:hover {right:0; bottom:0;} .gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery2 li {width:240px; height:140px; float:left;} .gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;} .gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;} </style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<h2>Stretch to fit</h2> <ul class="gallery"> <li><a class="p1" href="#url"></a></li> <li><a class="p2" href="#url"></a></li> <li><a class="p3" href="#url"></a></li> <li><a class="p4" href="#url"></a></li> <li><a class="p5" href="#url"></a></li> <li><a class="p6" href="#url"></a></li> </ul> <br /><br /> <h2>Shrink to fit</h2> <ul class="gallery2"> <li><a class="p1" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic1.jpg" alt="" /></a></li> <li><a class="p2" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic2.jpg" alt="" /></a></li> <li><a class="p3" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic5.jpg" alt="" /></a></li> <li><a class="p4" href="#url"><img src="http://www.blogspotvision.info/css/cssplay1/pic4.jpg" alt="" /></a></li> </ul>