jqueryスクロールによる要素の前向き効果(学習64日目TIL)
4893 ワード
210913今日では、z軸順に配置された要素が前にスクロールする効果を例に示します.
の親要素にピボット値(本体への高さ値の1/10に相当)を与え、各要素変換:translationZ(-値)に距離位置決めを与えます. jqueryは、現在のスクロール位置を取得して変数に保存し、各記事にスクロールバーを追加します.これにより、スクロールバーは前に進みます. マウスを移動すると、座標に基づいて少し移動したい場合は、変数の保存から変数を100程度に分けます.
Must Remember
section {perspective: 2300px;}
section article:nth-child(1) {transform: translateZ(0px);}
section article:nth-child(2) {transform: translateZ(-5000px);}
section article:nth-child(3) {transform: translateZ(-10000px);}$(window).scroll(function() {
var scr = Math.floor($(this).scrollTop()); //현재 스크롤 위치
// z값을 준 article마다 현재 스크롤 위치를 더해준다.
$("article").eq(0).css({"transform":`translateZ(${0 + scr}px)`})
});var posX=e.pageX/100;
var posY=e.pageY/150;Reference
この問題について(jqueryスクロールによる要素の前向き効果(学習64日目TIL)), 我々は、より多くの情報をここで見つけました https://velog.io/@inusneo/Jquery-스크롤하면-요소들이-앞으로-나아오는-효과-구현하기학습-64일차-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol