【 WEB デザイン 】 背景の画像をふわふわ浮遊させるアニメーション　 FirE♯496

バックグラウンドで、●、▲のオブジェクトがフワ〜と動くアニメーションを実装します。

■ オブジェクトがふんわり

スクロールすると、オブジェクトがふわ〜っと動きます。

■ CDN

<!-- CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

GSAPなどをCDNで読み込みます。

■ html

<!--メインヴィジュアル-->
<div class="mv">
  <div class="mv-container">

    <!--メインヴィジュアルーテキスト-->
    <div class="mv-container-text">
      <p>Portfolio of</p>
      <h1 data-splitting class="headline headline--twirl">YUU<br>
        HAYAMI
      </h1>
    </div>
    <!--/メインヴィジュアルーテキスト-->

    <!--メインヴィジュアルー背景オブジェクト-->
    <div class="page page1">
      <div class="box1">
        <img src="http://sap-sutdio.upper.jp/test-images/delta_beige.svg" />
      </div>

      <div class="box2">
        <img src="http://sap-sutdio.upper.jp/test-images/circle_green.svg" />
      </div>

      <div class="box3">
        <img src="http://sap-sutdio.upper.jp/test-images/circle_pink.svg" />
      </div>

      <div class="box4">
        <img src="http://sap-sutdio.upper.jp/test-images/circle_blue.svg" />
      </div>

      <div class="box5">
        <img src="http://sap-sutdio.upper.jp/test-images/circle_gray.svg" />
      </div>

      <div class="box6">
        <img src="http://sap-sutdio.upper.jp/test-images/delta_green.svg" />
      </div>


    </div>
    <!--/メインヴィジュアルー背景オブジェクト-->


  </div>
</div>
<!--/メインヴィジュアル-->



<div class="space"></div>

.boxの中に、画像を配置します。
もっと多くの画像を配置する場合は、.boxを増やして、関連するCSS、JSも追加しましょう

■ CSS

/* メインヴィジュアル */
.mv {
  width: 100%;
  overflow: hidden;

}
.mv-container {
  width: 100%;
  height: 800px;
  position: relative;
}
.mv-container-text {
  width: 100%;
  position: absolute;
  top: 10%;
  z-index: 1;
}
.mv-container-text p {
  font-family: "Courgette", cursive;
  font-family: "Roboto Flex", sans-serif;
  font-family: "Ubuntu", sans-serif;
  font-size: 30px;
  letter-spacing: 0.06em;
  padding-left: 4%;
}
.mv-container-text h1 {
  font-family: "Courgette", cursive;
  font-family: "Roboto Flex", sans-serif;
  font-family: "Ubuntu", sans-serif;
  font-weight: lighter;
  width: 100%;
  font-size: 80px;
  line-height: 1.16;
  letter-spacing: 0.06em;
  padding-left: 14%;
  padding-top: 2%;
}
.mv-container .page {
  height: 100vh;
}
.mv-container .page1 {
  position: relative;
}
.mv-container .page1 .box1 {
  width: 100%;
  position: absolute;
  top: -100%;
  left: -30%;
  transition: all 5s cubic-bezier(0, 0.91, 1, 1);
  z-index: 0;
}
.mv-container .page1 .box1 img {
  width: 100%;
}
.mv-container .page1 .box2 {
  width: 100%;
  position: absolute;
  top: 0%;
  left: 62%;
  transition: all 5s cubic-bezier(0, 1, 0, 1);
  z-index: 0;
}
.mv-container .page1 .box2 img {
  width: 28%;
}
.mv-container .page1 .box3 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 5s cubic-bezier(0, 0.91, 1, 1);
  z-index: 0;
}
.mv-container .page1 .box4 {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 30%;
  transition: all 5s cubic-bezier(0, 0.91, 1, 1);
  z-index: 0;
}
.mv-container .page1 .box5 {
  width: 100%;
  position: absolute;
  top: 74%;
  left: 80%;
  transition: all 5s cubic-bezier(0, 0.91, 1, 1);
  z-index: 0;
}
.mv-container .page1 .box6 {
  width: 100%;
  position: absolute;
  top: 60%;
  left: 40%;
  transition: all 5s cubic-bezier(0, 0.91, 1, 1);
  z-index: 0;
}

/* /メインヴィジュアル */



.space{
  width:100%;
  height:400px;
}

CSSで.boxの位置をしています。

■ JavaScript

// init ScrollMagic
  var controller = new ScrollMagic.Controller({
    // addIndicators: true
  });

  var tween1 = new TimelineMax();
  tween1.to('.box1', 2, {
      y: '-150px',
      rotation: 40,
      ease: Power0.easeNone
    })
    .to('.box2', 2, {
      y: '100px',
      rotation: -20,
      ease: Power0.easeNone
    }, 0)
    .to('.box3', 2, {
      y: '-400px',
      rotation: -30,
      ease: Power0.easeNone
    }, 0)
    .to('.box4', 2, {
      y: '10px',
      x: '-230px',
      rotation: -40,
      ease: Power0.easeNone
    }, 0)
    .to('.box5', 2, {
      y: '-200px',
      x: '-80px',
      rotation: -30,
      ease: Power0.easeNone
    }, 0)
    .to('.box6', 2, {
      y: '90px',
      x: '30px',
      rotation: -30,
      ease: Power0.easeNone
    }, 0);



  // page 1
  var page1 = new ScrollMagic.Scene({
      triggerElement: '.page1',
      triggerHook: 0,
      duration: '40%'
    })
    // .setPin('.box1')
    .setTween(tween1)
    .addTo(controller);

yとxの値で、動きを制御します。
rotationは、円を描く度合いです。

【 まとめ 】

カスタマイズして、色々動きを変えたり、画像を変えてみてください。

動きのあるメインヴィジュアルになります。