![]() ![]() There can be a lot of math involved with allowing for a variable number of images, so to ease the burden of those calculations, I've placed "max" options within the class to manage those calculations for the developer. Add the mouseenter and leave events to the album wrapper Image.retrieve("photostack").start(to, from) Wrapper.addEvent("mouseenter", lazyF圎vent) Wrapper.removeEvent("focus", lazyF圎vent) Wrapper.removeEvent("mouseenter", lazyF圎vent) Create an event to lazyload photodeck fx creation Var images = this.images, wrapper = this.wrapper Var style = "rotate(" + (targetRotation * value) + "deg) translate(" + (targetTranslation * value) + "px, " + (targetTranslationPx * value) + "px) scale(" + (1 + (value * ( - 1))) + ")" Create the style string for this spot in the animation TargetTranslation = (anslationStart + (index * anslationIncrement)), // px TargetRotation = (this.rotationStart + (index * this.rotationIncrement)), // deg Var index = image.retrieve("photostack-index"), Calculate image settings specific to this instance The following CSS assumes there will be 3 photos and user Google's animation values:Ġ% ) The first step is getting our properties set up so that we can use the animations later. The scale will be kept relatively small so that the magnification isn't abrupt. The transforms we'll be using are rotate, translate, and scale. The CSS Versionīoth the CSS-only and MooTools versions will rely on browser-provided CSS3 animations via transforms. These styles act as a base to the CSS and MooTools methods of animation. With the images in place, we need to style the A and images themselves: I've used an A elements so that we can also play the animation with focus via tab.
0 Comments
Leave a Reply. |