Parallax Response animation slide picture Toggle Effect

This is a very powerful content switch plug-in, it is based on jquery, it is fully responsive to support mobile devices, support mobile phone touch, keyboard paging; it has a slideshow, video playback timer, it has a variety of modes: custom, auto-response, full screen, it has a variety of animation effects, 3d effects ... In short you think of the effect it has done, its name is called Slider Revolution.

Html

Slider Revolution is a jquery-based plugin that needs to load the jquery library file and the CSS and JS files that the slider revolution relies on before using it.

<scriptSrc="Js/jquery.js"></script>
<link rel= " Stylesheet "  href=" css/style.css "  media= "screen"   />&NBSP; 
 <script  src= "rs-plugin/js/ Jquery.themepunch.plugins.min.js "></script>   
 <script src=  "Rs-plugin/js/jquery.themepunch.revolution.min.js" ></SCRIPT>&NBSP; 
     

The main HTML structure for content switching is as follows, with div.tp-banner containing multiple <li> tag,<li>, including the main picture, text, and button information. This information is provided with the respective data-attribute to allow the slider revolution to be recognized.

<divclass="Tp-banner-container">
<divclass="Tp-banner">
<ul>
<!--SLIDE--
<lidata-transition="Fade"Data-slotamount="7"Data-masterspeed="1500">
<!--MAIN IMAGE-
Src="Images/bg1.jpg"alt="Slidebg1"data-bgfit="Cover"data-bgposition="Left Top"data-bgrepeat="No-repeat">
<!--LAYERS--
 <!--LAYER NR. 1--
<divclass="Tp-caption Lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
Data-speed="500"
data-start="1200"
data-easing="Power4.easeout">my Caption
</div>
...

</li>
 <lidata-transition="Zoomout"Data-slotamount="7"Data-masterspeed="1000">
<!--MAIN IMAGE-
Src="Images/bg2.jpg"alt="DARKBLURBG"data-bgfit="Cover"data-bgposition="Left Top"data-bgrepeat="No-repeat">
 <!--LAYERS--
<!--LAYER NR. 1--
<divclass="Tp-caption Lightgrey_divider skewfromrightshort fadeout"
data-x="85"
data-y="224"
Data-speed="500"
data-start="1200"
 data-easing="Power4.easeout">my Caption
</div>
...
</li>
....
</ul>
</div>
</div>

jquery calls

After the HTML structure is well-arranged, you can call the slider Revolution plug-in, after pasting the above code, open the browser can see the switch effect.

$(function() { 
    $(‘.tp-banner‘).revolution({ 
        delay:9000, 
        startwidth:1170, 
        startheight:500, 
        hideThumbs:10 
    }); 
}); 

Option settings and descriptions

Slider Revolution provides a number of parameter option settings:

delay: sliding content dwell time. Default 9000 milliseconds

startheight: slide content height, default 490 pixels.

startwidth: slide content width, default 890 pixels.

navigationtype: Show page turn icon, default "bullet" (dot), if set to "None" is not displayed.

navigationarrows: Displays the page turn arrow, the default Nexttobullets, that is, when the mouse slides to show the left and right page arrow, if set to none is not displayed.

touchenabled: whether to allow touch swipe, default on is allowed, if set to off is not allowed.

onhoverstop: Pause when the mouse is turned on: off: Off.

Fullwidth: whether to open the full screen display picture content, on: Open, off: off.

For each <li> tag you can set various effects:

data-transition: content Slide effect, you can set the following values: Boxslide,boxfade,slotzoom-horizontal,slotslide-horizontal, Slotfade-horizontal,slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1,curtain-2,curtain-3, Slideleft,slideright,slideup,slidedown,fade

Data-slotamount: The number of square blocks that are divided when switching.

data-link: image Link

Data-delay: Sets the dwell time for the current slider content

For each Li element, you can set the following options to achieve a variety of effects.

animation style, Class Property: Class Property values represent different animation styles: Sft-short from Top sfb-short from Bottom,sfr-short to Right,sfl-short F Rom Left,lft-long from Top,lfb-long from Bottom,lfr-long to Right,lfl-long from left,fade-fading

data-x: lateral displacement of current element relative to Li

data-y: The vertical displacement of the current element relative to Li

data-speed: animation time, milliseconds

Data-start After: The current element waits a few seconds before it is displayed

data-easing: buffer animation, with Easeoutback ... A variety of animation effects, can be extended by reference to the jquery easing animation effect

In addition, if you want to add a timeline as a timer, you can add the following code at the end of the sliding content:

<div class="tp-bannertimer"></div> 

Parallax Response animation slide picture Toggle Effect