みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

wordpressでウェブサイトを作っています。

htmlやcssを独学で勉強しながら、アニメーション等を実装していて
https://demo.kallyas.net/wedding2/のようにスクロールすると花がでてくるようなパララックスを作りたいのですが、デベロッパーツールを見てもどのように実装しているかが解りません、、、

こちらのサイトでは要素の上に被るように花が出てくるのですが、どのようなhtmlとcssを実装したら良いですか?

※こちらのサイトのテーマは使用していません。。。

ご教授頂けますと幸いです。

投稿日時 - 2019-02-15 08:41:30

QNo.9588004

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.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/)というものもありますので使用してみてはいかがでしょうか。

投稿日時 - 2019-02-15 12:21:27

お礼

回答ありがとうございます!試してみます!!
また、ライブラリも教えて頂きありがとうございます!

投稿日時 - 2019-02-16 04:24:32

あなたにオススメの質問