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

はやち

2018.01.16

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

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

やりたいこと
実装方法
まとめ

やりたいこと

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

実装方法

SVGを用意

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

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="https://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="https://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="https://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がいい感じにアニメーションしてくれるところに驚きました！
今後案件でのモーフィング実装はこいつに頼りそうです！

ではでは

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやちフロントエンドエンジニア / 林佳代子

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ｀)✌ 今までに作ったDemoたちはGithubにて公開しております！よろしければ是非( ˘ω˘)☞三☞ｼｭｯｼｭｯ

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

それいけ！フロントエンド | 213 articles