締切済み

フラワーシャワーのようなパララックスの実装について

2019/02/15 08:41

wordpressでウェブサイトを作っています。 htmlやcssを独学で勉強しながら、アニメーション等を実装していて https://demo.kallyas.net/wedding2/のようにスクロールすると花がでてくるようなパララックスを作りたいのですが、デベロッパーツールを見てもどのように実装しているかが解りません、、、こちらのサイトでは要素の上に被るように花が出てくるのですが、どのようなhtmlとcssを実装したら良いですか？ ※こちらのサイトのテーマは使用していません。。。ご教授頂けますと幸いです。

ihakeaheulawe
お礼率62% (59/95)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

みんなの回答

Proof4
ベストアンサー率78% (151/192)

2019/02/15 12:21 回答No.1

私がライブラリを使わずに独自で実装してみたものを以下に示します。拙いコードで失礼します。 ※OKWAVEの仕様上、インデントを全角スペースで記述しています。動作確認の際はタブか半角スペースに置換してください。 ------ <!DOCTYPE html> <html> <head> 　<style> 　　body{ 　　　height: 2000px; 　　} 　　.wrap{ 　　　position: absolute; 　　　top: 800px; 　　　display: flex; 　　} 　　.wrap div{ 　　　width: 200px; 　　　height: 200px; 　　　border: solid 1px black; 　　　margin-right: 20px; 　　　/* 動きがカクカクしないようにtransition */ 　　　transition: transform .5s ease 0s; 　　} 　</style> </head> <body> 　↓↓↓↓↓↓↓scroll↓↓↓↓↓↓↓ 　<div class="wrap"> 　　<div> 　　　non floating item 　　</div> 　　<div id="floating_item"> 　　　floating item 　　</div> 　</div> 　<script> 　　var floating_item = document.getElementById('floating_item'); 　　var speedratio = 1.2; // スクロールに対して動く速度比(1なら動かない) 　　var timer = null; 　　　　setTransform(floating_item, speedratio); // 初期位置のセット　　　　/** 　　 * 要素の移動を制御する関数　　 * 　　 * @param elem 動かしたい要素　　 * @param sr 速度比　　 */ 　　function setTransform(elem, sr){ 　　　var clientRect = elem.getBoundingClientRect(); 　　　var t = clientRect.top - window.pageYOffset/2; 　　　var y = (sr-1) * t; 　　　elem.style = "transform: translateY(" + y + "px)"; 　　} 　　　　// 過負荷防止のため、スクロールの監視にはインターバルを設ける　　window.addEventListener('scroll', function(){ 　　　clearTimeout(timer); 　　　timer = setTimeout(function(){ 　　　　setTransform(floating_item, speedratio); 　　　}, 50); // 50ms毎　　}); 　</script> </body> </html> ------ このように独自実装も可能なのですが、ライブラリに頼る方が比較的楽に実現できると思います。例示されているサイトではScrollmagic(http://scrollmagic.io/)というライブラリが使われています。軽量で使いやすいライブラリとしてはRelax(https://dixonandmoe.com/rellax/)というものもありますので使用してみてはいかがでしょうか。

質問者