Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> Animating CSS3 Transforms with MooTools Fx


Code Snippet </> Info


Snippet Name: Animating CSS3 Transforms with MooTools Fx

Description: Create cool looking picture animations using CSS3 transforms with MooTools FX.
Example: View Code Demo

Note: Change the images to yours.

Author: David Walsh

Last Modified: 2015-08-26 22:48:33

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Animating CSS3 Transforms with MooTools Fx</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Begin Animating CSS3 Transforms with MooTools Fx */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: David Walsh : http://davidwalsh.name/css-transforms : Creative Commons License == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 65px; padding:15px 15px 15px 15px;} .album, .album2 { position: relative; z-index: 5; width: 250px; vertical-align: top; display:inline-block; } .photo1 {z-index: 4; position:relative;} .photo2 {z-index: 3; position:relative;} .photo3 {z-index: 2; position:relative;} .album img, .album2 img { /* image widths are 250 */ position:absolute; top:0; left:0; border:5px solid #f3f3f3; box-shadow:1px 1px 2px #666; -webkit-box-shadow:1px 1px 2px #666; -moz-box-shadow:1px 1px 2px #666; width:250px; height:250px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js"></script> <script> var PhotoStack = new Class({ Implements:[Options], options:{ images:"img", // Which images inside the wrapper should we grab? rotationMax:6, // Rotation max (both positive and negative) translationChange:100, // Positive and negative, translationPxChange:3, // Only positive scaleMax:1.1, // Only positive, obviously, duration:100 // Animation duration }, initialize:function(wrapper, options) { this.setOptions(options); // Sort out elements this.wrapper = wrapper; this.images = []; // Add images wrapper.getElements(this.options.images).each(this.addImage, this); this.initialAdded = true; this.calculateSteps(); // Add events this.addEvents(); // This string will hold the proper calculation this.calculatedStyle = ""; }, calculateSteps:function() { // Get the images and calculation transformation values based on those images var images = this.images, numImages = images.length, halfImages = (numImages / 2), options = this.options; this.rotationIncrement = (options.rotationMax * 2 / (numImages - 1)); this.rotationStart = options.rotationMax * -1; this.translationIncrement = options.translationChange / (numImages - 1); this.translationStart = options.translationChange * -1; this.translationPx = options.translationPxChange * -1; }, addImage:function(image) { this.images.push(image); if(this.initialAdded) this.calculateSteps(); }, createFx:function(image) { if(image.retrieve("photostack")) return; // Create an instance of select var fx = new Fx({ duration:this.options.duration }); fx.set = function(value) { // Calculate image settings specific to this instance var index = image.retrieve("photostack-index"), targetRotation = (this.rotationStart + (index * this.rotationIncrement)), // deg targetTranslation = (this.translationStart + (index * this.translationIncrement)), // px targetTranslationPx = this.translationPx; //px // Create the style string for this spot in the animation var style = "rotate(" + (targetRotation * value) + "deg) translate(" + (targetTranslation * value) + "px, " + (targetTranslationPx * value) + "px) scale(" + (1 + (value * (this.options.scaleMax - 1))) + ")"; // Console out information console.warn("Current value:", value, " / Calculated style:", style, " / Image", image); // Update those styles accordingly image.setStyles({ "-webkit-transform":style, "-moz-transform":style, "-o-transform":style, "-ms-transform":style, transform:style }); }.bind(this); // Store the fx object image.store("photostack", fx); }, addEvents:function() { var images = this.images, wrapper = this.wrapper; // Create an event to lazyload photodeck fx creation var lazyFxEvent = function() { images.each(this.createFx, this); wrapper.removeEvent("mouseenter", lazyFxEvent); wrapper.removeEvent("focus", lazyFxEvent); }.bind(this); wrapper.addEvent("mouseenter", lazyFxEvent); wrapper.addEvent("focus", lazyFxEvent); // Create basic mouseenter/leave events var todo = function(images, to, from) { return function() { images.each(function(image, index) { image.store("photostack-index", index); image.retrieve("photostack").start(to, from); }); }; }; // Add the mouseenter and leave events to the album wrapper wrapper.addEvents({ mouseenter:todo(images, 0, 1), focus:todo(images, 0, 1), mouseleave:todo(images, 1, 0), blur:todo(images, 1, 0) }); } }); window.addEvent("domready", function() { $$(".album2").each(function(album) { new PhotoStack(album); }); }); </script> </head> <body> <div id="content"> <h1>Animating CSS3 Transforms with MooTools Fx</h1> <div class="p">Read <a href="http://davidwalsh.name/css-transforms" target="_top">Animating CSS3 Transforms with MooTools Fx</a></div> <div id="promoNode"></div> <p>Mouse over the elements below to see the custom Fx animation using the set method with value argument. Check out the console to see the different steps and calculations within the set method</p> <h2>MooTools JavaScript</h2> <div style="height:350px;"> <a href="#" class="album2" style="margin:0 30px 30px 0;display:block;"> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:5;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo1.png" style="z-index:4;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:3;" /> </a> </div> <div style="height:350px;"> <a href="" class="album2" style="margin:0 30px 30px 0;display:block;"> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:5;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo1.png" style="z-index:4;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:3;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:2;" /> </a> </div> <div style="height:350px;"> <a href="#" class="album2" style="margin:0 30px 30px 0;display:block;"> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:10;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo1.png" style="z-index:9;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:8;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:7;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:6;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo1.png" style="z-index:5;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:4;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo2.png" style="z-index:3;" /> </a> </div> <div style="height:350px;"> <a href="#" class="album2" style="margin:0 30px 30px 0;display:block;"> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:5;" /> <img src="http://davidwalsh.name/dw-content/gplus/photo1.png" style="z-index:4;" /> </a> </div> <div style="height:350px;"> <a href="#" class="album2" style="margin:0 30px 30px 0;display:block;"> <img src="http://davidwalsh.name/dw-content/gplus/photo4.png" style="z-index:5;" /> </a> </div> <br /><br /> <div id="code"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_173.html">Animating CSS3 Transforms with MooTools Fx Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library