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

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> <!-- here I put the elements that will move.. they dont have to necessarily be at the bottom of the container --> <img class="parallax-move"src="01.png" /> <div class="parallax-move">something here</div> <p class="parallax-move">text that will move</p> </div>
$(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