ページがぐにゃっとするSVGモーフィングページを作ってみた | それいけ！フロントエンド

会社案内採用情報お問い合わせ

#117

2018.01.16

それいけ！フロントエンド

記事一覧

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

はやち

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

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

▼目次

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

やりたいこと

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

実装方法

SVGを用意

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

&lt;svg class=&quot;shape&quot; width=&quot;100%&quot; height=&quot;100vh&quot; preserveAspectRatio=&quot;none&quot; viewBox=&quot;0 0 1440 800&quot; xmlns:pathdata=&quot;http://www.codrops.com/&quot;&gt;
        &lt;path d=&quot;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&quot; 
pathdata:id=&quot;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&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;

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

マークアップとスタイル

HTML

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

&lt;div class=&quot;l-wrapper&quot;&gt;
  &lt;div class=&quot;l-loading&quot;&gt;
    &lt;div class=&quot;l-loading-inner&quot;&gt;
      &lt;div class=&quot;loading&quot;&gt;
        &lt;!--ローディング用のSVG--&gt;
        &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 95.37 95.37&quot;&gt;
            &lt;!--省略--&gt;
        &lt;/svg&gt;
        &lt;p&gt;Loading…&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
 
    &lt;div class=&quot;shape-wrap&quot;&gt;
      &lt;svg class=&quot;shape&quot; width=&quot;100%&quot; height=&quot;100vh&quot; preserveAspectRatio=&quot;none&quot; viewBox=&quot;0 0 1440 800&quot; xmlns:pathdata=&quot;http://www.codrops.com/&quot;&gt;
        &lt;!-- 変形用に用意したSVG ▼--&gt;
        &lt;path d=&quot;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&quot; pathdata:id=&quot;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&quot;&gt;&lt;/path&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;l-content&quot;&gt;
      &lt;p class=&quot;reload&quot;&gt;&lt;a href=&quot;./&quot;&gt;Reload&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

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',()=&gt; {
 
    //大枠の画面が上がる
    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') //ここでアニメーションさせてます
    });
});