اسلایدر پارالاکس

با استفاده از این پلاگین می توانید در سایت خود اسلایدری به صورت پارالاکس و ریسپانسیو داشته باشید.

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/fractionslider.css" type="text/css" />
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fractionslider.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

2-  کد html جهت استفاده پلاگین

<div class="slider-wrapper">
	<div class="responisve-container">
		<div class="slider">
			<div class="fs_loader"></div>
			<div class="slide">
				<img src="images/01_box_top.png" width="361" height="354" data-position="-152,142" data-in="left" data-delay="200" data-out="right" />
				<img src="images/01_box_bottom.png" width="422" height="454" data-position="138,-152" data-in="bottomRight" data-delay="200" />
				<img src="images/01_waves.png" width="1449" height="115" data-position="240,17" data-in="left" data-delay="" data-out="left" />
				<p class="claim light-green" data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">دنیای جی کوئری</p>
				<p class="teaser orange" data-position="90,30" data-in="left" data-step="2" data-delay="500">دنیایی پر از پلاگین</p>		
				<p class="teaser green" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">دنیایی پر از پلاگین</p>		
				<p class="teaser turky" data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500" data-out="none">دنیایی پر از پلاگین</p>
				<img src="images/01_outofthebox.png" data-position="20,330" data-in="bottomLeft" data-delay="500" data-out="fade" style="width:auto; height:auto" />
			</div>
			<div class="slide" data-in="slideLeft">
				<img src="images/02_big_boxes.png" data-fixed data-position="25,445" data-in="fade" data-delay="0" data-out="right" />
				<img src="images/02_small_boxes.png" data-position="80,220" data-in="fade" data-delay="500" data-out="bottomRight" />
				<img src="images/01_box_bottom.png"	data-position="138,-152" data-in="bottomRight" data-delay="200" data-out="bottomRight" />
				<p class="claim light-green small" data-position="30,30" data-in="top" data-step="1" data-out="top">دنیای جی کوئری</p>
				<p class="teaser turky small" data-position="90,30" data-in="bottom" data-step="2" data-delay="500">ijquery</p>		
				<p class="teaser turky small" data-position="120,30" data-in="bottom" data-step="2" data-delay="1500">دنیای جی کوئری</p>
				<p class="teaser turky small" data-position="150,30" data-in="bottom" data-step="2" data-delay="2500">ijquery</p>	
				<p class="teaser turky small" data-position="180,30" data-in="bottom" data-step="2" data-delay="3500">دنیای جی کوئری</p>
				<p class="teaser turky small" data-position="210,30" data-in="bottom" data-step="2" data-delay="4500">ijquery</p>
				<img src="images/01_waves.png" width="1449" height="115" data-position="240,200" data-in="right" data-step="2" data-ease-in="easeOutCirc" />
				<img src="images/02_main.png" data-position="105,180" data-in="fade" data-delay="500" data-out="bottomRight" />
			</div>
		</div>
	</div>
</div>