اگر دوست دارید طراحی های خودتون رو جذاب و کاربر پسند بکنید این پلاگین رو بهتون پیشنهاد می کنم این پلاگین در واقع در صفحه ی وبتون رو اسکرول می کنه و صفحه رو به صورت اسلاید طی می کنه امید وارم مورد استفادتون قرار بگیره.
آموزش استفاده
- فراخوانی css و jquery
<head> <meta charset="utf-8"> <title>Create a Parralax Website using Stellar.js</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/js.js"></script> <script type="text/javascript" src="js/jquery.stellar.min.js"></script> <script type="text/javascript" src="js/waypoints.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> </head>
2. html
<body>
<ul class="navigation">
<li data-slide="1">Slide 1</li>
<li data-slide="2">Slide 2</li>
<li data-slide="3">Slide 3</li>
<li data-slide="4">Slide 4</li>
</ul>
<img class="envatologo" src="images/envatologo.png">
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<a class="button" data-slide="2" title=""></a>
</div><!--End Slide 1-->
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
<img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
<img src="images/slide2/focus-ball.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
<img src="images/slide2/small-ball.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">
<img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
<img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
<img src="images/slide2/focus-ball.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
<img src="images/slide2/small-ball.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">
</div>
<span class="slideno">Slide 2</span>
<a class="button" data-slide="3" title=""></a>
</div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="wrapper">
<img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
<img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
<img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
<img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
<img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
</div>
<span class="slideno">Slide 3</span>
<a class="button" data-slide="4" title=""></a>
</div><!--End Slide 3-->
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<span class="slideno">Slide 4</span>
<span class="parallaxbg">Use the parallax effects on background images too!</span>
</div><!--End Slide 4-->
</body>
سایتتون عالیه
واقعا خوشحالم که با سایتتون آشنا شدم
مرسی فرزانه خانم از اینکه نظر میدید خوشحال میشیم .