![]() ![]() To customize how a theme looks and how its step's transition, refer to the theme's stylesheet: photo-stack/css/. To customize how a theme behaves, its Sequence.js options can be changed in photo-stack/scripts/. Refer to your theme's README file for any additional instructions. Save your page and view in the browser.This should include a reference to the Sequence.js library, its third-party dependencies, and the theme's options, for example: From photo-stack/index.html, copy any elements found toward the bottom of the page and paste just before the closing tag.From photo-stack/index.html, copy everything inside the tags, then paste into the page you'd like the theme to appear on.Add the theme's stylesheet within the tags on your page, below existing stylesheets.Move the photo-stack folder to the same folder as the page you'd like the Sequence.js theme to appear on.The keyframes Rule When you specify CSS styles inside the keyframes rule, the animation will gradually change from the current style to the new style at certain times. Keyframes hold what styles the element will have at certain times. 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.To add a Sequence.js theme to a web page, complete the following: To use CSS animation, you must first specify some keyframes for the animation. 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 I have studied this effect, and can use pure CSS and some MooTools JavaScript. ![]() ![]() The following CSS assumes there will be 3 photos and user Google's animation values:Ġ% ) mootools Use pure CSS animation or MooTools to create photo stack effects. 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. These styles act as a base to the CSS and MooTools methods of animation.īoth the CSS-only and MooTools versions will rely on browser-provided CSS3 animations via transforms. ![]() css URL Extension) and we'll pull the CSS from that Pen and include it. You can also link to another Pen here (use the. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. With the images in place, we need to style the A and images themselves: You can apply CSS to your Pen from any stylesheet on the web. I've used an A elements so that we can also play the animation with focus via tab. Outstanding! I've researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript. You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them. PHOTOSTACK CSS PLUSMy favorite technological piece of Google Plus is its image upload and display handling. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |