Parallax.jsデモページ

徘徊するゴリラ

威嚇するゴリラ

ビックリするゴリラ

head

                               
<!-- jqueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./path/to/parallax.min.js"></script>
                               
                           

jQuery

                               
--書くことがありません
                               
                           

sass

                               
<!-- parallax部分 -->
.parallax-window {
    min-height: 400px;
    background: transparent;
}
                               
                           

HTML

                           
<!-- parallax部分(スマホでは固定されます) -->
 <div class="parallax-window" data-parallax="scroll" data-speed="0.8" data-position="center center" data-image-src="./images/parallax_img01.jpg" data-natural-width="1200" data-natural-height="750" ></div>