|
Processing... Hover the images to zoom and click to spin.
Description & Source Code
Integrating 3rd party effect libraries like a breeze. In this simple image gallery demo, we use the GSAP animation library. image_zoomer.zul
<zk xmlns:x="xhtml" xmlns:w="client" xmlns:ca="client/attribute"> <!-- Client Programming : JQuery Zoomer Gallery --> <style src="/widgets/effects/image_zoomer/styles.css"/> <script src="/widgets/effects/image_zoomer/ext/TweenLite.min.js"/> <script src="/widgets/effects/image_zoomer/ext/TimelineLite.min.js"/> <script src="/widgets/effects/image_zoomer/ext/CSSPlugin.min.js"/> <script src="/widgets/effects/image_zoomer/ext/EasePack.min.js"/> <script src="/widgets/effects/image_zoomer/animations.js"/> <!-- uses defined animations flyInChildren, zoomIn, zoomOut, spinOnce from animations.js --> <div width="700px" height="350px" sclass="gallery" w:onAfterSize="flyInChildren.call(this.$n());"> <forEach begin="1" end="12"> <div sclass="imageDiv" w:onBind="jq(this).hover(zoomIn, zoomOut).click(spinOnce);"> <image src="/widgets/effects/image_zoomer/img/${each}.png" width="100%" height="100%"/> </div> </forEach> </div> </zk> image_zoomer_ctrl.zul
<hlayout xmlns:w="client"> <label value="Animation Speed : " /> <radiogroup> <radio label="Slow" value="0.5" w:onCheck="setAnimationSpeed(this.getValue());"/> <radio label="Normal" value="1.0" w:onCheck="setAnimationSpeed(this.getValue());" checked="true"/> <radio label="Fast" value="2.0" w:onCheck="setAnimationSpeed(this.getValue());"/> </radiogroup> </hlayout> animations.js
var animationSpeed = 1.0; function setAnimationSpeed(factor) { animationSpeed = factor; } /* simple animation functions implemented using the GSAP animation library */ function flyInChildren() { new TimelineLite().staggerFrom(this.children, 1.0, { opacity: 0.0, y: '+=150', scale: 0.3, rotation: 180, rotationY: 200, delay: 0.1}, 0.1); } function zoomIn() { TweenLite.to(this, 0.2 / animationSpeed, {ease: Back.easeOut.config(3.0), scale:1.7, zIndex: 100}); } function zoomOut() { TweenLite.to(this, 0.3 / animationSpeed, {scale:1, zIndex: 0}); } function spinOnce() { TweenLite.to(this, 1.0 / animationSpeed, {ease: Back.easeOut.config(3.0), rotation: '+=360'}); } styles.css
.gallery { margin: 30px 80px; } .imageDiv { display: inline-block; position: relative; width: 125px; height: 75px; margin: 30px 30px 0 0; border: 3px solid #DDDDDD; }
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |