» » » Parallax Scrolling
Parallax Scrolling

با استفاده از Parallax Scrolling قادر خواهید بود هر section از صفحه اصلی را به صورت صفحات مجزا نمایش دهید که با اسکرول کردن به صورت پارالکس تغییر خواهند کرد.
برای دیدن پیش نمایشی از  Parallax Scrolling می توانبد روی لینک کلیک کنید.

 
1. فایل زیر را دانلود کنید

    parallex-scrolling.zip [حجم: 0 بایت] (تعداد دانلود: 7)

2. تمام section های صفحات وب (صفحه اصلی) را بصورت زیر جدا کنید.

     هر section باید کلاس page را داشته باشد.
 

<"div class="wrap>
  <"div id="page-1" class="page>
    <"div class="containe>
      Content 1
    </div>
  </div>
  <"div id="page-2" class="page>
    <"div class="container>
      Content 2
    </div>
  </div>
  <"div id="page-3" class="page>
    <"div class="container>
      Content 3
    </div>
  </div>
</div> 
3. در فایل css هم کد زیر را وارد کنید.
 

sp-fixed.
}
  ;position: fixed
  ;top: 0
;left: 0
 {
 4. فایل های زیر رو در انتهای تگ <body> قرار دهید
 
 

      <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="js/main.js"></script>
 <script src="js/jquery.stackpage.js"></script>
مقالات مشابه