Thứ Bảy, 25 tháng 4, 2015

Sử dụng skrollr.js tạo hiệu ứng parallax scrolling

Đây là thư viện rất tuyệt vời để tạo hiệu ứng này vì chúng không yêu cầu phải biết javascript , kinh nhỉ .Đầu tiên là lí thuyết đầy đủ các bạn tham khảo tại đây nha:
https://github.com/Prinzhorn/skrollr
Tiếp theo là example:
File index.html:
<html>
<head>
<title>Test Parallax</title>

<link rel="stylesheet" type="text/css" href="css/me.css">

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="js/skrollr.js"></script>
</head>
<body>

<section id="slide-1" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-anchor-target="#slide-1"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-center="bottom: 200px; opacity: 1"
                data-top="bottom: 1200px; opacity: 0"
                data-anchor-target="#slide-1 h2"
            >
                <h2>Simple parallax scrolling is...</h2>
            </div>
        </div>
    </div>
</section>
<section id="slide-2" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-2"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-center="opacity: 1"
                data-center-top="opacity: 0"
                data--100-bottom="opacity: 0;"
                data-anchor-target="#slide-2"
            >
                <h2>great for story telling websites.</h2>
            </div>
        </div>
    </div>
</section>
<section id="slide-3" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-3"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data--50-bottom="opacity: 0;"
                data--200-bottom="opacity: 1;"
                data-center="opacity: 1"
                data-200-top="opacity: 0"
                data-anchor-target="#slide-3 h2"
            >
                <h2>Now go and create your own story</h2>
            </div>
        </div>
    </div>
</section>
<section id="slide-4" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-4"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-bottom-top="opacity: 0"
                data-25p-top="opacity: 0"
                data-top="opacity: 1"
                data-anchor-target="#slide-4"
            >
                <h2>and share mine.</h2>
            </div>
        </div>
    </div>
</section>
<div id="skrollr">
  <div id="footne" class="gap">
   <div class="container">
     <div class="inner-container">
          <p>Hello word</p>
     </div>
   </div>
 </div>
 <div id="foolne1" class="gap">
   <div class="container">
     <div class="inner-container">
          <p>the gioi mo ra nhe</p>
     </div>
   </div>
 </div>
</div>

<script type="text/javascript">
    skrollr.init({
        smoothScrolling: false,
        mobileDeceleration: 0.004
    });
    </script>
</body>
</html>
File me.css:


Không có nhận xét nào:

Đăng nhận xét