ページがぐにゃっとするSVGモーフィングページを作ってみた

はやち


ページがぐにゃっとするSVGモーフィングページを作ってみた

どうもですよはやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾

今回はですね、随分前にご紹介したanime.jsとSVGを使って画面のモーフィングアニメーションを実装いたしました!
ご紹介いたします!

▼目次

やりたいこと

blog12

ローディングアニメーションが終わったら画面が上がりつつ最後にSVGを変形していくような作りにしていきます。

実装方法

SVGを用意

ぐにゃっとさせるSVGを画面いっぱいにするために太くたれてるSVGと細くなってるSVGの2種類を用意します。

toroke2

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
        <path d="M 73.3,178.6 C 101.7,363.8 76.38,735 118.7,813.8 161,892.7 327.3,946.7 381.1,853.3 434.9,759.9 427.2,488.9 436.8,341.5 443.3,241.3 447.3,33.05 516.1,36.19 574.9,38.88 611.6,214.9 622.3,429.7 633,644.6 614.7,796.1 688.1,849 761.6,901.8 860.7,873.7 897.6,850 982.3,795.5 951.2,639.3 961.1,506.1 970.9,372.9 958.5,43.53 1023,43.47 1063,43.43 1085,173.6 1095,370.7 1105,567.8 1082,804.3 1165,842.6 1197,857.5 1304,901 1342,833 1380,765 1354,413.7 1379,156.2 1407,-137.5 1719,-12.96 1719,-12.96 L -53.5,-44.66 C -53.5,-44.66 44.91,-6.65 73.3,178.6 Z" 
pathdata:id="M 105.3,190.6 C 159.7,353.8 143.2,774.2 149.1,779.5 155,784.8 159.4,782 164.8,778.2 170.2,774.4 168.9,242.8 240.3,125 311.7,7.205 430.7,2.307 564.2,13.56 707.9,25.67 806,166.3 800.5,376 804.7,587.3 801.2,773.9 807.1,782.7 813,791.4 816.8,792.7 821.4,786 826.4,778.8 819.4,566.3 820.3,498.1 821.2,429.9 781.4,95.51 992.5,74.58 1108,63.14 1235,166.4 1250,359.4 1265,552.4 1248,763.7 1271,781.4 1277,786 1281,786.2 1286,779.7 1292,773.2 1260,251.3 1355,103.9 1441,-30.35 1610,-117.6 1610,-117.6 L -110.1,-132.3 C -110.1,-132.3 50.91,27.35 105.3,190.6 Z"></path>
</svg>

変形する前のパスと変形した後のパスはひとまとまりにしたSVGにします。

マークアップとスタイル

HTML

マークアップはこんな感じ。

<div class="l-wrapper">
  <div class="l-loading">
    <div class="l-loading-inner">
      <div class="loading">
        <!--ローディング用のSVG-->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.37 95.37">
            <!--省略-->
        </svg>
        <p>Loading…</p>
      </div>
    </div>

    <div class="shape-wrap">
      <svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
        <!-- 変形用に用意したSVG ▼-->
        <path d="M 73.3,178.6 C 101.7,363.8 76.38,735 118.7,813.8 161,892.7 327.3,946.7 381.1,853.3 434.9,759.9 427.2,488.9 436.8,341.5 443.3,241.3 447.3,33.05 516.1,36.19 574.9,38.88 611.6,214.9 622.3,429.7 633,644.6 614.7,796.1 688.1,849 761.6,901.8 860.7,873.7 897.6,850 982.3,795.5 951.2,639.3 961.1,506.1 970.9,372.9 958.5,43.53 1023,43.47 1063,43.43 1085,173.6 1095,370.7 1105,567.8 1082,804.3 1165,842.6 1197,857.5 1304,901 1342,833 1380,765 1354,413.7 1379,156.2 1407,-137.5 1719,-12.96 1719,-12.96 L -53.5,-44.66 C -53.5,-44.66 44.91,-6.65 73.3,178.6 Z" pathdata:id="M 105.3,190.6 C 159.7,353.8 143.2,774.2 149.1,779.5 155,784.8 159.4,782 164.8,778.2 170.2,774.4 168.9,242.8 240.3,125 311.7,7.205 430.7,2.307 564.2,13.56 707.9,25.67 806,166.3 800.5,376 804.7,587.3 801.2,773.9 807.1,782.7 813,791.4 816.8,792.7 821.4,786 826.4,778.8 819.4,566.3 820.3,498.1 821.2,429.9 781.4,95.51 992.5,74.58 1108,63.14 1235,166.4 1250,359.4 1265,552.4 1248,763.7 1271,781.4 1277,786 1281,786.2 1286,779.7 1292,773.2 1260,251.3 1355,103.9 1441,-30.35 1610,-117.6 1610,-117.6 L -110.1,-132.3 C -110.1,-132.3 50.91,27.35 105.3,190.6 Z"></path>
      </svg>
    </div>
  </div>
  <div class="l-content">
      <p class="reload"><a href="./">Reload</a></p>
  </div>
</div>

CSS

.l-wrapperでoverflow: hiddenをして.l-loadingのheightを200vhで隠しておきます。

.l-wrapper{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.l-loading{
  z-index: 10;
  height: 200vh;
  left: 0px;
  top:0vh;
  width: 100%;
  position:fixed;
}

.l-loading-inner{
  position: relative;
  height: 100vh;
  display: block;
  background: #575D62;
}

.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%,-50%);
  display: block;
  margin: auto;
  p{
    font-size: 35px;
    text-align: center;
    font-weight: bold;
    color: #fff;
  }
  svg{
    width: 150px;
    height: 150px;
    display: block;
    margin: 0px auto;
    animation: anime 1.5s ease infinite alternate;
  }
}

.shape{
  height: 100vh;
  width: 100%;
  display: block;
  fill: #575D62;
  transform: scaleY(1);
}

jsの実装

プラグインの導入方法はこちらの動きがなめらかなアニメーションライブラリ「anime.js」を使ってみた!でご紹介してますので、参考にしてくださいまし。

実際に今回実装したjsがこちらになります。
大枠の画面にあたる.l-loadingを引き上げつつ、SVGの全体を縮めつつ、passのアニメーションもしています!

let $window = $(window);

const DOM = {}; //オブジェクト化
DOM.loading = document.querySelector('.l-loading');
DOM.shape = document.querySelector('svg.shape');
DOM.path = DOM.shape.querySelector('path');

$window.on('load',()=> {

    //大枠の画面が上がる
    anime({
        targets: DOM.loading, //動かしたいセレクタ
        top: '-200vh', //動かしたいcssのプロパティ
        duration: 1600,
        easing: 'easeInOutCubic'
    });

    //SVGの横幅を縮める
    anime({
        targets: DOM.shape,
        delay:800,
        duration: 200,
        easing: 'easeInOutCubic',
        scaleY: '0'
    });

    //SVGのパスをアニメーションさせる
    anime({
        targets: DOM.path,
        duration: 1000,
        easing: 'easeInOutQuad',
        d: DOM.path.getAttribute('pathdata:id') //ここでアニメーションさせてます
    });
});

これらの動きが組み合わさってできたものがこちらになります!

DEMO

まとめ

いかがでしたか!
SVGのpathタグに最初のpathとpathdata:idで変形したあとのpathを指定すればあとはanime.jsがいい感じにアニメーションしてくれるところに驚きました!
今後案件でのモーフィング実装はこいつに頼りそうです!

ではでは

はやち
この記事を書いた人
はやち

フロントエンドエンジニア

おすすめ記事

Recommended by