jQuery

【jQuery】スクロールされると画像などが動いたように魅せるパララックスエフェクトParallax Image Scroll

March 19, 2018

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

Installing

headに追加。

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

呼び出す

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

Example

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;

Options

  $(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

Demo/Download