dimasmith
1/28/2013 - 7:49 AM

scrollr.css

skrollr.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <title>Parallax Effects</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/skrollr.css">
        <script type="text/javascript" src="js/skrollr.min.js"></script>

    </head>
    <body>

        <div class="sidescroll not-animated">
            <img src="http://placehold.it/320x960"/>

        </div>

        <div class="sidescroll" id="container">
            <div
                 data-bottom-top="margin-left: 25%; opacity: 1.0;"
                 data-center="margin-left: 75%; opacity: 0.3;"
                 data-top-bottom="margin-left: 25%; opacity: 0.9;"
                 data-anchor-target="#container" class="anim1">
                <img src="http://placehold.it/240x240"/>
            </div>
            <div
                 data-bottom-top="margin-left: 25%; opacity: 1.0;"
                 data-center="margin-left: 75%; opacity: 0.3;"
                 data-top-bottom="margin-left: 25%; opacity: 0.9;"
                 data-anchor-target=".anim1" class="anim2">
                <img src="http://placehold.it/240x240"/>
            </div>
            <div
                 data-bottom-top="margin-left: 25%; opacity: 1.0;"
                 data-center="margin-left: 75%; opacity: 0.3;"
                 data-top-bottom="margin-left: 25%; opacity: 0.9;"
                 data-anchor-target=".anim2" class="anim3">
                <img src="http://placehold.it/240x240"/>
            </div>
            <div
                 data-bottom-top="margin-left: 25%; opacity: 1.0;"
                 data-center="margin-left: 75%; opacity: 0.3;"
                 data-top-bottom="margin-left: 25%; opacity: 0.9;"
                 data-anchor-target=".anim3" class="anim4">
                <img src="http://placehold.it/240x240"/>
            </div>

        </div>

        <div class="sidescroll container2">
            <div class="bottom-to-top"
                 data-bottom-top="top: 0px; left: 0px;"
                 data-center="top: 100px; left: 500px;"
                 data-100-center="top: 100px; left: 200px;"
                 data-top-bottom="top: 0px; left: 0px;"
                 data-anchor-target=".container2">
                <img src="http://placehold.it/320x960"/>
            </div>

        </div>


        <script type="text/javascript">
            skrollr.init();
        </script>

    </body>
</html>
scrollr.css
content_copyfile_download
/*
Для блоків обов’язково треба задавати висоту, інакше може не спрацювати
*/

.sidescroll {
    height: 1000px;
    border-bottom: 1px solid gray;
    position: relative;
    overflow: hidden;
}



div.bottom-to-top {
    position: absolute;
}

.sidescroll.left-to-right {
    background-color: #7ce700;
}

.sidescroll.right-to-left {
    background-color: #9ff33d;
}

.sidescroll.bottom-to-top {
    background-color: #71ad2b;
}

#container {

}