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: 2019-12-09 01:57:55
Language: css
Highlight Mode: css
|
Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor: Paste the source code, make changes and instantly see it in live preview. Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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 https://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>
|