Parallax Image Scrollはウェブサイトが上下にスクロールされると画像または他の種類のHTMLコンテンツを浮動させて動かすパララックスエフェクト。

headに追加。

<script src="js/parallaxImg.js" type="text/javascript"></script>

呼び出す

    $(document).on("ready", function() {
      parallaxImgScroll();
    }); 

parallax-img-containerクラスを追加

    <div class="parallax-img-container">
      <h1>The day Internet was the future</h1>
      <p>Some static text that will not move</p>
  &lt;!-- here I put the elements that will move.. they dont 
  have to necessarily be at the bottom of the container --&gt;
  
  &lt;img class="parallax-move"src="01.png" /&gt;
  &lt;div class="parallax-move"&gt;something here&lt;/div&gt;
  &lt;p class="parallax-move"&gt;text that will move&lt;/p&gt;
&lt;/div&gt;

  $(document).on("ready", function() {
    var parallaxSettings = { 
      initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
      opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
      pageLoader: true //creates a page loader. It is set "false" by default.
    };
parallaxImgScroll(parallaxSettings);

});

<div src='img/assassins/smoke-01.png' class='parallax-move' data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420"></div>

MIT

• Tag
• jQuery
• Parallax