a jQuery plug-in that adds animation to contentsliders/banners/etc
Compatible with all major browsers: ie8+,Chrome,Safari,Firefox,Opera
Parameter | Type | Description | Default Value |
height | INT | Height of the slider ex: height:300 | 300 |
width | INT | Width of the slider ex: width:900 | 600 |
slide_interval | INT | Slider Time in milliseconds ex: slide_interval:3000 | 3000 |
loader | Boolean | Shows the loader bar if set to true | true |
pages | Boolean | Shows the slider pagination if set to true | true |
pause | Boolean | enables and displays slide play and pause if set to true | true |
controls | Boolean | enables and displays slide previous and next button if set to true | true |
slide_animation_data | Array | the heart of your animation goes here(refer to Slide Animation Options below) | none |
code structure only(please use this pattern): slide_animation_data: [[[]],[[]],[[]]]code structure with definitions slide_animation_data: [ //first slide [ [target element,animation frame,animation type], // animation 1 of your element [target element,animation frame,animation type] // animation 2 of your element ], //second slide [ [target element,animation frame,animation type], // animation 1 of your element [target element,animation frame,animation type] // animation 2 of your element ], //third slide [ [target element,animation frame,animation type], // animation 1 of your element [target element,animation frame,animation type] // animation 2 of your element ],
]
my other example
Element Type Description first element (target element) String the target element's tagname, classname,or ID second element (animation frame) Float/Double what part of the "time sequence" will the animation take place, in seconds third element (animation type) String What type of animation to execute, please refer at the last part at the bottom for the list of animations or go to this link http://cdpn.io/nFdAs jQuery('#slider').animatedSlider({ 'loader':true, 'width':900, 'height':300, 'slide_animation_data' : [//slides //slide1 BEGIN [ ['.txt1',0,'bounceInDown'], ['.txt2',0.8,'flip'], ], //slide2 BEGIN [ ['p',0,'bounceInDown'], ], //slide2 BEGIN [ ['h1',0,'fadeIn'], ] ] });you can use any name for your slider container but you have to specify a class of "slide[slide#]" for ever slide
<div id="slider"> <div class="slide1"> <h2 class="txt1">Bring Life Back </h2> <h2 class="txt2">to Your Banners </h2> </div> <div class="slide2"> <p>asdasd</p> </div> <div class="slide3"> <h1>Slide3</h1> <p>content 3</p> </div> </div><script> String.prototype.escapeHTML = function () { return( this.replace(/>/g,'>'). replace(/jQuery
"https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"GSAP
"http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js" http://cdpn.io/nFdAsrotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight rotateInUpRight rotateInUpLeft rotateInDownRight rotateInDownLeft flipOutX flipOutY flipInY flipInX fadeIn fadeInUp fadeInLeft fadeInRight fadeInDown fadeOut fadeOutUp fadeOutLeft fadeOutRight fadeOutDown bounce bounceInFront bounceIn bounceInUp bounceInDown bounceInLeft bounceInRight bounceOut bounceOutUp bounceOutDown bounceOutLeft bounceOutRight rotateIn flip swing wobble shake flash tada pulse scaleIn scaleOut