はじめに
anime.jsを少し触ってこんなのを作ってみました。
作り方
まず
にアクセスしてanime.min.jsファイルをコピーして読み込みます。
animate.cssはこのサイト
それで使い方ですが
animate.cssは簡単で
アニメーションさせたい要素のクラスに
<div class="animated bounceInDown">
</div>
みたいにするだけです。
めちゃ簡単で結構かっこよく動いてくれます。
ちなみにページをスクロールして画面上に来た時にアニメーションさせたい場合は
wow.jsを使うと実装出来ます。
サイトはこちら
wow.jsを読み込んだ状態であれば
<div class="wow bounceInDown">
</div>
とすれば画面上に来た時にアニメーションしてくれます。
次にanime.jsです
animejsの使い方はanimejs.comのdocumentを読むのが一番わかりやすいかもしれません。
動きとコードが載っているので参考になります。
使い方は
anime({
targets: '.st0',
duration: 1500,
delay: 4000
})
みたいな感じで使います。
まずアニメーションさせたい要素のクラス名もしくはidをtargetsで指定してあげます。
複数指定することもできます。
durationはアニメーションの時間
delayは文字通り遅延させたいときに使います。
このtargets,duration,delayでアニメーションに関しての基本的な設定をします。
次にどのようにアニメーションさせたいか指定します。
例えば
anime({
targets: '.st0',
duration: 1500,
delay: 4000,
translateX: 1000
})
このようにすれば4秒待った後にx方向に1000px移動します。
translateYにすればy方向に移動しますし
rotate:100とすれば100度回転してくれます。
使える値をまとめるをこんな感じになります。
| 名前 | 用途 | 注意 |
|---|---|---|
| translateX | X方向にnpx移動 | |
| translateY | Y方向にnpx移動 | |
| rotate | n deg回転 | 360degのことを1turnともかけるっぽい |
| scale | サイズをnに | |
| easing | 移動の仕方 | easeInOutExpoがかっこいい |
| loop | true,falseで指定 | |
| autoplay | 自動再生,truefalseで指定 |
基本的にはこんな感じだと思う。
自分はアニメーションの実装にsvgを使った。
svgってのがそもそもわからない状況だったのですが使ってみたら結構便利で
例えば文字をアニメーションさせながら表示させたい場合とかに使いました。
まずadobeのイラストレーターが必要になります。
自分は無料体験ができたのでそれを使っています。
加入すると一か月1000円くらいした気がする。
まずイラストレーターを開いて
文字を入力
名前を付けて保存をおして保存の形式にSVGを指定して
ここでアウトラインに変換を指定します
ここで結構つまずいた…
そしたら
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g>
<path class="st0 p1" d="M499.2,437.9c0.2,8.2,1,19.2,2.4,32.8v0.6c0,1.1-1.2,1.7-3.5,1.7c-0.9,0-1.4-0.5-1.7-1.5c-3.5-10.6-8.7-18.5-15.7-23.7
c-6-4.6-12.8-6.8-20.4-6.8c-8.9,0-15.9,2.7-21.1,8.2c-4.3,4.7-6.5,10.6-6.5,17.7c0,12,8,21.6,24.1,28.8l11,4.9
c15.5,6.9,26.4,14.3,32.5,22.3c5.2,6.7,7.8,14.7,7.8,24.1c0,14.7-5.2,26.1-15.6,34c-9.3,7.1-21.8,10.6-37.6,10.6
c-11.4,0-24.2-2.5-38.3-7.5c-2.8-9.5-5.1-20.1-6.8-31.8l-0.2-1.7c0-1.5,1.1-2.2,3.3-2.2c1.1,0,1.8,0.4,2.1,1.2
c4.4,11.6,10.8,20.6,19.3,26.9c7.1,5.5,14.8,8.2,23.1,8.2c10.6,0,18.9-3.2,25-9.5c5.2-5.4,7.8-12.1,7.8-20.2
c0-8.4-2.6-15.4-7.9-21.2c-4.8-5.2-12.7-10.4-23.6-15.8l-11-5.3c-12.6-6.2-21.4-12.7-26.2-19.5c-4.3-6-6.4-13.2-6.4-21.7
c0-11.6,4.7-21,14.2-28.1c8.3-6.2,18.7-9.3,31.1-9.3c6.3,0,12.3,0.9,18,2.6c4.1,1.2,8.7,1.9,13.8,1.9
C494.5,438.5,497,438.3,499.2,437.9z"/>
<path class="st0 p2" d="M532.1,582.6c9-0.7,14.3-2.4,15.9-5.1c1.3-2,2.1-4.7,2.4-8.2c0.4-3.6,0.5-10.2,0.5-19.7v-74.5c0-11.1-0.2-18.1-0.5-21.1
c-0.3-2.3-1-4.2-2.1-5.8c-1.7-2.6-7.5-4.3-17.3-5.1c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c14.4,0.7,23.9,1,28.6,1
c5.1,0,14.5-0.3,28-1c1.5,0,2.2,1.1,2.2,3.4c0,1.5-0.7,2.4-2.2,2.5c-9,0.9-14.3,2.6-15.9,5.1c-1.9,2.9-2.9,11.9-2.9,26.9v82.6
c0,10.7,0.9,17.3,2.7,19.8c1.1,1.5,2.8,2.6,5.1,3.3c2.4,0.7,6.5,1.3,12.2,1.8c1.4,0.1,2.1,1,2.1,2.7c0,1.9-0.7,2.8-2.1,2.8
c-11.6-0.6-21.3-0.8-29.2-0.8s-17.1,0.3-27.5,0.8c-1.1,0-1.7-0.9-1.7-2.8C530.3,583.7,530.9,582.8,532.1,582.6z"/>
<path class="st0 p3" d="M689.6,508.6c16.7,1.7,29.1,6.5,37.2,14.3c6.6,6.3,9.9,14.1,9.9,23.5c0,13.8-5.7,24.4-17,31.7
c-10.6,6.8-25.3,10.3-44.4,10.3l-38.6-1c-9.6,0-18.3,0.2-26.3,0.6c-1.1,0-1.7-0.9-1.7-2.8c0-1.6,0.6-2.5,1.7-2.7
c9.6-0.7,15.1-2.4,16.7-5.1c1.8-3,2.7-12.3,2.7-27.9v-74.5c0-11-0.2-18.2-0.6-21.6c-0.3-2.3-0.9-4.2-1.7-5.5
c-1.8-2.6-7.8-4.2-18.1-4.9c-1.3-0.1-1.9-1-1.9-2.7c0-2.1,0.6-3.2,1.9-3.2c11.9,0.6,20.9,0.8,27,0.8l36.5-1.2
c20.5,0,35.2,3.5,44,10.4c7.2,5.5,10.8,13.6,10.8,24.3c0,9.3-3.3,16.8-9.9,22.6c-6.1,5.3-15.4,9.7-28,13.3V508.6z M647.5,505.4
c2.4,0.1,6.5,0.2,12.3,0.2c31.9,0,47.8-10.8,47.8-32.5c0-9.7-3.5-17-10.5-22.1c-6.4-4.6-15.4-6.9-27.1-6.9
c-11.1,0-17.7,1.6-19.9,4.7c-1.8,2.6-2.7,11.4-2.7,26.3V505.4z M647.5,512.9v36.7c0,9.5,0.3,15.9,0.9,19.4c0.4,2.6,1.2,4.8,2.5,6.7
c2.6,3.8,10.4,5.7,23.4,5.7c14.5,0,25.5-3.6,32.7-10.9c6.1-5.9,9.1-13.9,9.1-24c0-22.6-17.8-33.9-53.5-33.9
C656.5,512.7,651.4,512.7,647.5,512.9z"/>
<path class="st0 p4" d="M848.4,529.1c-10.3-0.6-18.6-0.8-25-0.8c-9.7,0-18.8,0.3-27.4,0.8l-9,23.7c-3.4,8.6-5,15.2-5,19.6c0,3.6,1.3,6.1,3.9,7.5
c2.6,1.3,7.4,2.2,14.5,2.7c1.3,0.1,1.9,1,1.9,2.7c0,1.9-0.6,2.8-1.9,2.8c-15.9-0.4-24.7-0.6-26.3-0.6c-7.9,0-15.3,0.2-22.1,0.6
c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7c5.8-0.8,10-2.5,12.5-5.1c3.3-3.5,7.6-12,12.9-25.5l25.9-66.5
c8.6-22.4,14.2-37.5,16.6-45.2l12.5-6c1,0,1.6,0.6,1.9,1.8c4.5,14.6,10.2,31.4,17.1,50.5l24.6,67.1c4.6,12.4,8.1,20.4,10.7,23.9
c2,2.8,7.2,4.5,15.7,5.1c1.6,0.1,2.5,1,2.5,2.7c0,1.9-0.8,2.8-2.4,2.8c-16.3-0.4-25.8-0.6-28.6-0.6c-2.4,0-11.7,0.2-28,0.6
c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7c7.6-0.6,12.4-1.6,14.5-3c1.6-1.1,2.4-3.1,2.4-5.9c0-2.6-1.7-8.6-5-18L848.4,529.1z
M822.7,457c-1.1,3.1-2.8,7.8-5.2,14c-2.6,6.9-4.6,12.2-6,15.8l-12.4,33.8c5.2,0.3,13.3,0.4,24.3,0.4c10.1,0,17.4-0.1,22.1-0.4
L833,486.7C829.8,477.6,826.4,467.6,822.7,457z"/>
<path class="st0 p5" d="M952.9,509v44c0,9.7,0.2,16,0.5,18.8c0.3,2.1,1,4,2.1,5.7c1.5,2.6,7.2,4.3,17.1,5.1c1.3,0.1,1.9,1,1.9,2.7
c0,1.9-0.6,2.8-1.9,2.8c-11.8-0.6-21.4-0.8-28.6-0.8c-8.1,0-17.3,0.3-27.7,0.8c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7
c9.1-0.7,14.5-2.4,16.3-5.1c1.8-3,2.7-12.3,2.7-27.9v-74.5c0-10.9-0.2-17.8-0.5-20.9c-0.3-2.4-0.9-4.4-1.9-5.9
c-1.9-2.7-7.8-4.4-17.5-5.1c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c9.5,0.7,19.1,1,28.8,1c9.1,0,18.2-0.3,27.4-1
c1.4,0,2,1.1,2,3.4c0,1.5-0.7,2.4-2,2.5c-8.8,0.9-14.1,2.6-15.7,5.1c-1.9,3.1-2.9,12.1-2.9,26.9V507c6.3-5.2,12.4-10.6,18.2-16.2
l24.1-22.9c10.8-10.2,16.3-16.8,16.3-19.8c0-1.5-0.8-2.6-2.4-3.2c-1.6-0.6-4.7-1-9.3-1.5c-1.4-0.1-2.1-1-2.1-2.5c0-2,0.8-3,2.2-3
c10.1,0.3,18.1,0.4,24.1,0.4c7.6,0,16-0.3,25.2-1c1.3,0,1.9,1.1,1.9,3.2c0,1.7-0.7,2.6-2,2.7c-7,0.8-13.1,2.8-18.4,6
c-3.9,2.4-12.6,9.6-25.9,21.5l-21,18.7c-2.4,2.2-5.2,4.7-8.3,7.6c-3.2,2.9-5.2,4.7-5.9,5.4c2.6,3,20.4,22,53.2,57.1
c10.1,10.5,17.6,17.1,22.6,19.7c3,1.5,7.7,2.7,14.1,3.4c1.3,0.1,1.9,1,1.9,2.7c0,1.9-0.6,2.8-1.9,2.8c-6.3-0.6-12.9-0.8-19.8-0.8
c-6.3,0-11.6,0.1-15.9,0.2c-6.9-8.6-13.4-16.1-19.4-22.5C996.5,556.6,979.3,538,952.9,509z"/>
<path class="st0 p6" d="M1183.5,588.1c-20.5-0.8-38.5-1.1-54.2-1.1c-17.5,0-36.3,0.4-56.4,1.1c-1.1,0-1.7-0.9-1.7-2.8c0-1.6,0.6-2.5,1.7-2.7
c5.8-0.6,9.7-1.2,11.9-2c1.7-0.7,3.1-1.7,4.1-3.1c1.8-2.6,2.7-11.9,2.7-27.9v-74.5c0-11.1-0.2-18.1-0.5-21.3
c-0.3-2.3-0.9-4.3-1.9-5.8c-1.8-2.6-7.6-4.2-17.3-4.9c-1.3-0.1-1.9-1-1.9-2.5c0-2.3,0.6-3.4,1.9-3.4c14.7,0.7,32.9,1,54.7,1
c20.1,0,37.8-0.3,53.2-1c1.9,17.8,3.1,29,3.7,33.6v0.6c0,1.2-1.2,1.9-3.5,1.9c-0.8,0-1.4-0.4-1.7-1.2c-3.2-9.3-7.9-16.4-14-21.1
c-5.3-4.1-16.4-6.2-33.1-6.2c-10.4,0-16.8,1.7-19.1,5.1c-1.6,2.3-2.4,8.2-2.4,17.7v37.5c2.5,0.1,7.2,0.2,14,0.2
c15.7,0,25.3-1.4,28.9-4.3c3.8-2.9,6-7.4,6.6-13.6c0.1-1.2,0.9-1.9,2.4-1.9c2.2,0,3.3,0.6,3.3,1.9c-0.3,9.7-0.4,16.6-0.4,20.8
c0,5.9,0.1,13.9,0.4,23.9c0,1.2-1.1,1.9-3.3,1.9c-1.4,0-2.2-0.7-2.4-2.1c-0.6-7.8-3-13.1-7.1-15.8c-3.9-2.7-13.3-4-28.5-4
c-4.6,0-9.2,0.1-14,0.4v36.9c0,13.9,1,22.3,3.1,25.3c1.6,2.2,3.9,3.7,7.1,4.6c3.1,0.8,8.1,1.1,14.8,1.1c10.7,0,19-0.7,25-2.2
c5.1-1.2,9.6-3.1,13.6-5.9c5.8-4.1,11.3-11.2,16.4-21.3c0.4-1,1-1.5,1.6-1.5c2.8,0,4.2,0.8,4.2,2.4l-0.2,1
C1192.3,564.4,1188.5,576,1183.5,588.1z"/>
<path class="st0 p7" d="M1243.6,459.6h-2.5l0.9,90.4c0.2,15.1,1.4,24.4,3.5,27.7c1.9,2.8,7.5,4.6,16.9,5.3c1.1,0.2,1.7,1,1.7,2.5
c0,1.7-0.6,2.6-1.7,2.6c-2.1-0.1-5-0.1-8.8-0.2c-7.6-0.3-13-0.4-16.3-0.4c-2.5,0-10.8,0.2-25,0.6c-1.4,0-2.1-0.9-2.1-2.6
c0-1.5,0.7-2.3,2.1-2.5c8.5-0.8,13.5-2.7,15.2-5.5c2.3-4,3.5-13.2,3.7-27.5l1.3-78.5c0.2-11.5-0.9-18.8-3.3-21.9
c-2.5-3.2-8.5-5.3-18-6.2c-1.4-0.1-2.1-1-2.1-2.5c0-2.4,0.7-3.6,2.1-3.6c7.6,0.4,14.3,0.6,20.2,0.6c7,0,13.6-0.1,19.9-0.2
c4,7.4,9.6,16,16.7,25.7l50.8,70.1c9.3,12.9,16.2,22.7,20.9,29.5v-26.1l-0.2-61.7c0-14.4-1.2-23.3-3.7-26.9
c-1.8-2.6-7.3-4.3-16.7-5.1c-1.3-0.1-1.9-1-1.9-2.5c0-2.3,0.6-3.4,1.9-3.4c11.9,0.6,20.1,0.8,24.5,0.8c6,0,14.2-0.3,24.6-0.8
c1.4,0,2.1,1.1,2.1,3.4c0,1.3-0.7,2.1-2.1,2.5c-8,0.7-12.9,2.4-14.9,5.1c-2.3,3.3-3.5,12.2-3.7,26.9l-1.4,74.9
c0,4.8,0,8.4,0.1,10.7c0,6.4,0.1,14.9,0.4,25.7c-6.1,3.7-9.4,5.5-9.7,5.5c-0.5,0-1-0.3-1.5-1c-6.8-10.9-15.2-23.1-24.9-36.6
L1243.6,459.6z"/>
<path class="st0 p8" d="M1439.9,518.6c-0.9-1.3-2.5-3.9-4.9-7.9c-1.6-2.8-3-5-4.1-6.7l-20.1-31.8c-8.5-13.4-13.9-21.3-16.3-23.5
c-3.3-3-8.3-4.8-15.2-5.4c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c10,0.7,19.3,1,27.8,1c9.3,0,18.6-0.3,27.9-1
c1.1,0,1.7,1.1,1.7,3.4c0,1.5-0.6,2.4-1.7,2.5c-6.5,0.7-10.6,1.6-12.4,2.7c-1.5,1-2.2,2.6-2.2,5c0,2.4,2.1,7.1,6.3,14l20,32
c1.2,1.8,2.6,4,4.3,6.7c1.8,2.8,3,4.7,3.5,5.6c1.9-3.3,4.3-7.3,7.3-11.8l18.2-31.2c4.5-7.6,6.7-12.6,6.7-14.9
c0-2.7-1.1-4.6-3.4-5.8c-2.4-1.2-6.3-2-11.9-2.3c-1.5-0.1-2.2-1-2.2-2.5c0-2.3,0.7-3.4,2.2-3.4c13.5,0.7,22.1,1,25.6,1
c1.8,0,9.5-0.3,23.1-1c1.1,0,1.7,1.1,1.7,3.4c0,1.5-0.6,2.4-1.7,2.5c-6.6,0.6-11.7,2.4-15.4,5.4c-2.7,2-8.2,9.4-16.4,22.3
l-20.4,31.4c-3.1,4.9-6.3,10.1-9.8,15.7l-0.2,9.3v27.9c0,12.2,0.8,19.7,2.5,22.3c1.6,2.7,7.6,4.4,18,5.1c1.1,0.2,1.7,1.1,1.7,2.7
c0,1.9-0.4,2.8-1.3,2.8c-12.7-0.6-22.6-0.8-29.8-0.8c-8.1,0-17.1,0.3-27.2,0.8c-1.6,0-2.5-0.9-2.5-2.8c0-1.7,0.8-2.6,2.5-2.7
c8.6-0.7,13.8-2.4,15.5-5.1c1.9-2.9,2.9-11.1,2.9-24.5v-25.9L1439.9,518.6z"/>
</g>
</svg>
こんな感じの長いコードが出てきます。
pathに適当な名前のクラスを付けます。
この場合st0というクラス名がついています。
javascriptでこのクラスを指定してアニメーションを書きます
anime({
targets: '.st0',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: false
});
そしてcssファイルで
.st0
{
fill: #fff;
stroke-width: 3px;
stroke: red;
}
こんな感じでfill,stroke-widthを指定します。
この場合文字の色が白で回りに赤色のstrokeが表示され、このstrokeがいい感じにアニメーションしてくれます。
strokeは文字の周りの線のことです。
最後に
twitterに上げたやつのコードはこんな感じになりました。
書き方汚いですが....
html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/animate.min.css">
</style>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="js/anime.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<section id="first">
<div id="main">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g>
<path class="st0 p1" d="M499.2,437.9c0.2,8.2,1,19.2,2.4,32.8v0.6c0,1.1-1.2,1.7-3.5,1.7c-0.9,0-1.4-0.5-1.7-1.5c-3.5-10.6-8.7-18.5-15.7-23.7
c-6-4.6-12.8-6.8-20.4-6.8c-8.9,0-15.9,2.7-21.1,8.2c-4.3,4.7-6.5,10.6-6.5,17.7c0,12,8,21.6,24.1,28.8l11,4.9
c15.5,6.9,26.4,14.3,32.5,22.3c5.2,6.7,7.8,14.7,7.8,24.1c0,14.7-5.2,26.1-15.6,34c-9.3,7.1-21.8,10.6-37.6,10.6
c-11.4,0-24.2-2.5-38.3-7.5c-2.8-9.5-5.1-20.1-6.8-31.8l-0.2-1.7c0-1.5,1.1-2.2,3.3-2.2c1.1,0,1.8,0.4,2.1,1.2
c4.4,11.6,10.8,20.6,19.3,26.9c7.1,5.5,14.8,8.2,23.1,8.2c10.6,0,18.9-3.2,25-9.5c5.2-5.4,7.8-12.1,7.8-20.2
c0-8.4-2.6-15.4-7.9-21.2c-4.8-5.2-12.7-10.4-23.6-15.8l-11-5.3c-12.6-6.2-21.4-12.7-26.2-19.5c-4.3-6-6.4-13.2-6.4-21.7
c0-11.6,4.7-21,14.2-28.1c8.3-6.2,18.7-9.3,31.1-9.3c6.3,0,12.3,0.9,18,2.6c4.1,1.2,8.7,1.9,13.8,1.9
C494.5,438.5,497,438.3,499.2,437.9z"/>
<path class="st0 p2" d="M532.1,582.6c9-0.7,14.3-2.4,15.9-5.1c1.3-2,2.1-4.7,2.4-8.2c0.4-3.6,0.5-10.2,0.5-19.7v-74.5c0-11.1-0.2-18.1-0.5-21.1
c-0.3-2.3-1-4.2-2.1-5.8c-1.7-2.6-7.5-4.3-17.3-5.1c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c14.4,0.7,23.9,1,28.6,1
c5.1,0,14.5-0.3,28-1c1.5,0,2.2,1.1,2.2,3.4c0,1.5-0.7,2.4-2.2,2.5c-9,0.9-14.3,2.6-15.9,5.1c-1.9,2.9-2.9,11.9-2.9,26.9v82.6
c0,10.7,0.9,17.3,2.7,19.8c1.1,1.5,2.8,2.6,5.1,3.3c2.4,0.7,6.5,1.3,12.2,1.8c1.4,0.1,2.1,1,2.1,2.7c0,1.9-0.7,2.8-2.1,2.8
c-11.6-0.6-21.3-0.8-29.2-0.8s-17.1,0.3-27.5,0.8c-1.1,0-1.7-0.9-1.7-2.8C530.3,583.7,530.9,582.8,532.1,582.6z"/>
<path class="st0 p3" d="M689.6,508.6c16.7,1.7,29.1,6.5,37.2,14.3c6.6,6.3,9.9,14.1,9.9,23.5c0,13.8-5.7,24.4-17,31.7
c-10.6,6.8-25.3,10.3-44.4,10.3l-38.6-1c-9.6,0-18.3,0.2-26.3,0.6c-1.1,0-1.7-0.9-1.7-2.8c0-1.6,0.6-2.5,1.7-2.7
c9.6-0.7,15.1-2.4,16.7-5.1c1.8-3,2.7-12.3,2.7-27.9v-74.5c0-11-0.2-18.2-0.6-21.6c-0.3-2.3-0.9-4.2-1.7-5.5
c-1.8-2.6-7.8-4.2-18.1-4.9c-1.3-0.1-1.9-1-1.9-2.7c0-2.1,0.6-3.2,1.9-3.2c11.9,0.6,20.9,0.8,27,0.8l36.5-1.2
c20.5,0,35.2,3.5,44,10.4c7.2,5.5,10.8,13.6,10.8,24.3c0,9.3-3.3,16.8-9.9,22.6c-6.1,5.3-15.4,9.7-28,13.3V508.6z M647.5,505.4
c2.4,0.1,6.5,0.2,12.3,0.2c31.9,0,47.8-10.8,47.8-32.5c0-9.7-3.5-17-10.5-22.1c-6.4-4.6-15.4-6.9-27.1-6.9
c-11.1,0-17.7,1.6-19.9,4.7c-1.8,2.6-2.7,11.4-2.7,26.3V505.4z M647.5,512.9v36.7c0,9.5,0.3,15.9,0.9,19.4c0.4,2.6,1.2,4.8,2.5,6.7
c2.6,3.8,10.4,5.7,23.4,5.7c14.5,0,25.5-3.6,32.7-10.9c6.1-5.9,9.1-13.9,9.1-24c0-22.6-17.8-33.9-53.5-33.9
C656.5,512.7,651.4,512.7,647.5,512.9z"/>
<path class="st0 p4" d="M848.4,529.1c-10.3-0.6-18.6-0.8-25-0.8c-9.7,0-18.8,0.3-27.4,0.8l-9,23.7c-3.4,8.6-5,15.2-5,19.6c0,3.6,1.3,6.1,3.9,7.5
c2.6,1.3,7.4,2.2,14.5,2.7c1.3,0.1,1.9,1,1.9,2.7c0,1.9-0.6,2.8-1.9,2.8c-15.9-0.4-24.7-0.6-26.3-0.6c-7.9,0-15.3,0.2-22.1,0.6
c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7c5.8-0.8,10-2.5,12.5-5.1c3.3-3.5,7.6-12,12.9-25.5l25.9-66.5
c8.6-22.4,14.2-37.5,16.6-45.2l12.5-6c1,0,1.6,0.6,1.9,1.8c4.5,14.6,10.2,31.4,17.1,50.5l24.6,67.1c4.6,12.4,8.1,20.4,10.7,23.9
c2,2.8,7.2,4.5,15.7,5.1c1.6,0.1,2.5,1,2.5,2.7c0,1.9-0.8,2.8-2.4,2.8c-16.3-0.4-25.8-0.6-28.6-0.6c-2.4,0-11.7,0.2-28,0.6
c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7c7.6-0.6,12.4-1.6,14.5-3c1.6-1.1,2.4-3.1,2.4-5.9c0-2.6-1.7-8.6-5-18L848.4,529.1z
M822.7,457c-1.1,3.1-2.8,7.8-5.2,14c-2.6,6.9-4.6,12.2-6,15.8l-12.4,33.8c5.2,0.3,13.3,0.4,24.3,0.4c10.1,0,17.4-0.1,22.1-0.4
L833,486.7C829.8,477.6,826.4,467.6,822.7,457z"/>
<path class="st0 p5" d="M952.9,509v44c0,9.7,0.2,16,0.5,18.8c0.3,2.1,1,4,2.1,5.7c1.5,2.6,7.2,4.3,17.1,5.1c1.3,0.1,1.9,1,1.9,2.7
c0,1.9-0.6,2.8-1.9,2.8c-11.8-0.6-21.4-0.8-28.6-0.8c-8.1,0-17.3,0.3-27.7,0.8c-1.3,0-1.9-0.9-1.9-2.8c0-1.7,0.6-2.6,1.9-2.7
c9.1-0.7,14.5-2.4,16.3-5.1c1.8-3,2.7-12.3,2.7-27.9v-74.5c0-10.9-0.2-17.8-0.5-20.9c-0.3-2.4-0.9-4.4-1.9-5.9
c-1.9-2.7-7.8-4.4-17.5-5.1c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c9.5,0.7,19.1,1,28.8,1c9.1,0,18.2-0.3,27.4-1
c1.4,0,2,1.1,2,3.4c0,1.5-0.7,2.4-2,2.5c-8.8,0.9-14.1,2.6-15.7,5.1c-1.9,3.1-2.9,12.1-2.9,26.9V507c6.3-5.2,12.4-10.6,18.2-16.2
l24.1-22.9c10.8-10.2,16.3-16.8,16.3-19.8c0-1.5-0.8-2.6-2.4-3.2c-1.6-0.6-4.7-1-9.3-1.5c-1.4-0.1-2.1-1-2.1-2.5c0-2,0.8-3,2.2-3
c10.1,0.3,18.1,0.4,24.1,0.4c7.6,0,16-0.3,25.2-1c1.3,0,1.9,1.1,1.9,3.2c0,1.7-0.7,2.6-2,2.7c-7,0.8-13.1,2.8-18.4,6
c-3.9,2.4-12.6,9.6-25.9,21.5l-21,18.7c-2.4,2.2-5.2,4.7-8.3,7.6c-3.2,2.9-5.2,4.7-5.9,5.4c2.6,3,20.4,22,53.2,57.1
c10.1,10.5,17.6,17.1,22.6,19.7c3,1.5,7.7,2.7,14.1,3.4c1.3,0.1,1.9,1,1.9,2.7c0,1.9-0.6,2.8-1.9,2.8c-6.3-0.6-12.9-0.8-19.8-0.8
c-6.3,0-11.6,0.1-15.9,0.2c-6.9-8.6-13.4-16.1-19.4-22.5C996.5,556.6,979.3,538,952.9,509z"/>
<path class="st0 p6" d="M1183.5,588.1c-20.5-0.8-38.5-1.1-54.2-1.1c-17.5,0-36.3,0.4-56.4,1.1c-1.1,0-1.7-0.9-1.7-2.8c0-1.6,0.6-2.5,1.7-2.7
c5.8-0.6,9.7-1.2,11.9-2c1.7-0.7,3.1-1.7,4.1-3.1c1.8-2.6,2.7-11.9,2.7-27.9v-74.5c0-11.1-0.2-18.1-0.5-21.3
c-0.3-2.3-0.9-4.3-1.9-5.8c-1.8-2.6-7.6-4.2-17.3-4.9c-1.3-0.1-1.9-1-1.9-2.5c0-2.3,0.6-3.4,1.9-3.4c14.7,0.7,32.9,1,54.7,1
c20.1,0,37.8-0.3,53.2-1c1.9,17.8,3.1,29,3.7,33.6v0.6c0,1.2-1.2,1.9-3.5,1.9c-0.8,0-1.4-0.4-1.7-1.2c-3.2-9.3-7.9-16.4-14-21.1
c-5.3-4.1-16.4-6.2-33.1-6.2c-10.4,0-16.8,1.7-19.1,5.1c-1.6,2.3-2.4,8.2-2.4,17.7v37.5c2.5,0.1,7.2,0.2,14,0.2
c15.7,0,25.3-1.4,28.9-4.3c3.8-2.9,6-7.4,6.6-13.6c0.1-1.2,0.9-1.9,2.4-1.9c2.2,0,3.3,0.6,3.3,1.9c-0.3,9.7-0.4,16.6-0.4,20.8
c0,5.9,0.1,13.9,0.4,23.9c0,1.2-1.1,1.9-3.3,1.9c-1.4,0-2.2-0.7-2.4-2.1c-0.6-7.8-3-13.1-7.1-15.8c-3.9-2.7-13.3-4-28.5-4
c-4.6,0-9.2,0.1-14,0.4v36.9c0,13.9,1,22.3,3.1,25.3c1.6,2.2,3.9,3.7,7.1,4.6c3.1,0.8,8.1,1.1,14.8,1.1c10.7,0,19-0.7,25-2.2
c5.1-1.2,9.6-3.1,13.6-5.9c5.8-4.1,11.3-11.2,16.4-21.3c0.4-1,1-1.5,1.6-1.5c2.8,0,4.2,0.8,4.2,2.4l-0.2,1
C1192.3,564.4,1188.5,576,1183.5,588.1z"/>
<path class="st0 p7" d="M1243.6,459.6h-2.5l0.9,90.4c0.2,15.1,1.4,24.4,3.5,27.7c1.9,2.8,7.5,4.6,16.9,5.3c1.1,0.2,1.7,1,1.7,2.5
c0,1.7-0.6,2.6-1.7,2.6c-2.1-0.1-5-0.1-8.8-0.2c-7.6-0.3-13-0.4-16.3-0.4c-2.5,0-10.8,0.2-25,0.6c-1.4,0-2.1-0.9-2.1-2.6
c0-1.5,0.7-2.3,2.1-2.5c8.5-0.8,13.5-2.7,15.2-5.5c2.3-4,3.5-13.2,3.7-27.5l1.3-78.5c0.2-11.5-0.9-18.8-3.3-21.9
c-2.5-3.2-8.5-5.3-18-6.2c-1.4-0.1-2.1-1-2.1-2.5c0-2.4,0.7-3.6,2.1-3.6c7.6,0.4,14.3,0.6,20.2,0.6c7,0,13.6-0.1,19.9-0.2
c4,7.4,9.6,16,16.7,25.7l50.8,70.1c9.3,12.9,16.2,22.7,20.9,29.5v-26.1l-0.2-61.7c0-14.4-1.2-23.3-3.7-26.9
c-1.8-2.6-7.3-4.3-16.7-5.1c-1.3-0.1-1.9-1-1.9-2.5c0-2.3,0.6-3.4,1.9-3.4c11.9,0.6,20.1,0.8,24.5,0.8c6,0,14.2-0.3,24.6-0.8
c1.4,0,2.1,1.1,2.1,3.4c0,1.3-0.7,2.1-2.1,2.5c-8,0.7-12.9,2.4-14.9,5.1c-2.3,3.3-3.5,12.2-3.7,26.9l-1.4,74.9
c0,4.8,0,8.4,0.1,10.7c0,6.4,0.1,14.9,0.4,25.7c-6.1,3.7-9.4,5.5-9.7,5.5c-0.5,0-1-0.3-1.5-1c-6.8-10.9-15.2-23.1-24.9-36.6
L1243.6,459.6z"/>
<path class="st0 p8" d="M1439.9,518.6c-0.9-1.3-2.5-3.9-4.9-7.9c-1.6-2.8-3-5-4.1-6.7l-20.1-31.8c-8.5-13.4-13.9-21.3-16.3-23.5
c-3.3-3-8.3-4.8-15.2-5.4c-1.1-0.1-1.7-1-1.7-2.5c0-2.3,0.6-3.4,1.7-3.4c10,0.7,19.3,1,27.8,1c9.3,0,18.6-0.3,27.9-1
c1.1,0,1.7,1.1,1.7,3.4c0,1.5-0.6,2.4-1.7,2.5c-6.5,0.7-10.6,1.6-12.4,2.7c-1.5,1-2.2,2.6-2.2,5c0,2.4,2.1,7.1,6.3,14l20,32
c1.2,1.8,2.6,4,4.3,6.7c1.8,2.8,3,4.7,3.5,5.6c1.9-3.3,4.3-7.3,7.3-11.8l18.2-31.2c4.5-7.6,6.7-12.6,6.7-14.9
c0-2.7-1.1-4.6-3.4-5.8c-2.4-1.2-6.3-2-11.9-2.3c-1.5-0.1-2.2-1-2.2-2.5c0-2.3,0.7-3.4,2.2-3.4c13.5,0.7,22.1,1,25.6,1
c1.8,0,9.5-0.3,23.1-1c1.1,0,1.7,1.1,1.7,3.4c0,1.5-0.6,2.4-1.7,2.5c-6.6,0.6-11.7,2.4-15.4,5.4c-2.7,2-8.2,9.4-16.4,22.3
l-20.4,31.4c-3.1,4.9-6.3,10.1-9.8,15.7l-0.2,9.3v27.9c0,12.2,0.8,19.7,2.5,22.3c1.6,2.7,7.6,4.4,18,5.1c1.1,0.2,1.7,1.1,1.7,2.7
c0,1.9-0.4,2.8-1.3,2.8c-12.7-0.6-22.6-0.8-29.8-0.8c-8.1,0-17.1,0.3-27.2,0.8c-1.6,0-2.5-0.9-2.5-2.8c0-1.7,0.8-2.6,2.5-2.7
c8.6-0.7,13.8-2.4,15.5-5.1c1.9-2.9,2.9-11.1,2.9-24.5v-25.9L1439.9,518.6z"/>
</g>
</svg>
</div>
</section>
<section id="second">
<div>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" xml:space="preserve">
<path class="firstr" d="M2458.4,1080L2458.4,1080c-211.1-211.1-329.4-329.4-540.5-540.5v0C2128.5,328.8,2246.6,210.7,2457.3,0l1.1,0V1080z"/>
<path class="firstl" d="M-540.5,0L-540.5,0C-329.4,211.1-211.1,329.4,0,540.5v0C-210.7,751.2-328.8,869.3-539.5,1080h-1.1V0z"/>
</svg>
</div>
</section>
<section id="third">
<div>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" xml:space="preserve">
<g>
<path d="M2264.4,400.2c1.9,0,1.9-3,0-3C2262.5,397.2,2262.5,400.2,2264.4,400.2L2264.4,400.2z"/>
</g>
<rect class="thirdp" x="0" y="-1080" width="1920" height="1080"/>
</svg>
</div>
</section>
<section id="fourth">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" xml:space="preserve">
<g>
<path d="M2264.4,400.2c1.9,0,1.9-3,0-3C2262.5,397.2,2262.5,400.2,2264.4,400.2L2264.4,400.2z"/>
</g>
<rect class="title-border" x="-1920" y="80" width="1920" height="2"/>
</svg>
</section>
<section id="fifth">
<div class="row fifth-row">
<div class="col-md-4 animated bounceInDown">
<div class="block1">
<p class="btn1 text-center" id="about">ABOUT ME</p>
</div>
</div>
<div class="col-md-4 animated bounceInDown delay-1">
<div class="block2">
<p class="btn2 text-center" id="works">WORKS</p>
</div>
</div>
<div class="col-md-4 animated bounceInDown delay-2">
<div class="block3">
<p class="btn3 text-center" id="contact">CONTACT</p>
</div>
</div>
</div>
</section>
<section id="page">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g>
<rect class="about-border" x="300" y="-1080" width="2" height="1080"/>
<circle class="about-sp" cx="300" cy="-50" r="50"/>
</g>
</svg>
</section>
<section id="page2">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g>
<rect class="works-border" x="960" y="-1080" width="2" height="1080"/>
<circle class="works-sp" cx="960" cy="-50" r="50"/>
</g>
</svg>
</section>
<section id="page3">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<g>
<rect class="contact-border" x="1610" y="-1080" width="2" height="1080"/>
<circle class="contact-sp" cx="1610" cy="-50" r="50"/>
</g>
</svg>
</section>
<section id="about-container">
<div class="container">
<div class="row about-row">
<div class="col-md-4 animated bounceInLeft">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-1">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-2">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<p id="back-btn" class="animated bounceInDown back-btn">GO BACK</p>
</section>
<section id="works-container">
<div class="container">
<div class="row about-row">
<div class="col-md-4 animated bounceInLeft">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-1">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-2">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<p id="back-btn2" class="animated bounceInDown back-btn2">GO BACK</p>
</section>
<section id="contact-container">
<div class="container">
<div class="row about-row">
<div class="col-md-4 animated bounceInLeft">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-1">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4 animated bounceInLeft delay-2">
<div class="card">
<img src="img/paint2.jpeg" class="card-img-top img-thumbnail img-responsive" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<p id="back-btn3" class="animated bounceInDown back-btn3">GO BACK</p>
</section>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
CSS
body
{
overflow: hidden;
}
#first
{
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
#second
{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
#third
{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
#fourth
{
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
#fifth
{
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
display: none;
}
#page
{
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
display: none;
}
#page2
{
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
display: none;
}
#page3
{
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
display: none;
}
#about-container
{
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
display: none;
}
#works-container
{
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
display: none;
}
#contact-container
{
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
display: none;
}
.title-border
{
fill: #fff !important;
background: #fff;
}
.svg-str
{
width: 100%;
height: 100%;
background: none;
}
.st0
{
fill: #fff;
stroke-width: 3px;
background: none;
}
.p1
{
stroke: rgb(255, 0, 0);
}
.p2
{
stroke: rgb(255, 166, 0);
}
.p3
{
stroke: rgb(217, 255, 0);
}
.p4
{
stroke: rgb(21, 255, 0);
}
.p5
{
stroke: rgb(0, 247, 255);
}
.p6
{
stroke: rgb(0, 17, 255);
}
.p7
{
stroke: rgb(255, 0, 234);
}
.p8
{
stroke: rgb(255, 0, 179);
}
.col-bg
{
}
.fifth-row
{
margin-top: 300px;
}
.block1
{
width: 300px;
margin: 0 auto;
padding: 10px 10px;
}
.block2
{
width: 300px;
margin: 0 auto;
padding: 10px 10px;
margin-top: 100px;
}
.block3
{
width: 300px;
margin: 0 auto;
padding: 10px 10px;
margin-top: 200px;
}
.delay-1
{
animation-delay: 0.5s;
}
.delay-2
{
animation-delay: 1s;
}
.btn1
{
position: relative;
display: block;
color: white;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
margin: 30px 0;
border: 2px solid #ff0202;
padding: 14px 60px;
text-transform: uppercase;
overflow: hidden;
transition: 1s all ease;
}
.btn1::before{
background: #ff0202;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
transition: all 0.6s ease;
}
.btn1::before{
width: 100%;
height: 0;
transform: translate(-50%,-50%) rotate(45deg);
}
.btn1:hover::before{
height: 500%;
}
.btn2
{
position: relative;
display: block;
color: white;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
margin: 30px 0;
border: 2px solid #00fc54;
padding: 14px 60px;
text-transform: uppercase;
overflow: hidden;
transition: 1s all ease;
}
.btn2::before{
background: #00fc54;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
transition: all 0.6s ease;
}
.btn2::before{
width: 100%;
height: 0;
transform: translate(-50%,-50%) rotate(45deg);
}
.btn2:hover::before{
height: 500%;
}
.btn3
{
position: relative;
display: block;
color: white;
font-size: 14px;
font-family: sans-serif;
text-decoration: none;
margin: 30px 0;
border: 2px solid #023cf8;
padding: 14px 60px;
text-transform: uppercase;
overflow: hidden;
transition: 1s all ease;
}
.btn3::before{
background: #023cf8;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
transition: all 0.6s ease;
}
.btn3::before{
width: 100%;
height: 0;
transform: translate(-50%,-50%) rotate(45deg);
}
.btn3:hover::before{
height: 500%;
}
.about-border
{
fill: #ff0202;
}
.about-sp
{
fill: #ff0202;
}
.works-border
{
fill: #00fc54;
}
.works-sp
{
fill: #00fc54;
}
.contact-border
{
fill: #023cf8;
}
.contact-sp
{
fill: #023cf8;
}
.back-btn
{
font-size: 50px;
color: white;
width: 300px;
text-align: center;
margin: 0 auto;
border: 1px solid white;
background-color: #ff0202;
cursor: pointer;
border-top-left-radius: 0px;
transition: all 0.5s;
}
.back-btn:hover
{
background-color: white;
color: #ff0202;
border-top-left-radius: 100px;
}
.back-btn2
{
font-size: 50px;
color: white;
width: 300px;
text-align: center;
margin: 0 auto;
border: 1px solid white;
background-color: #00fc54;
cursor: pointer;
border-top-left-radius: 0px;
transition: all 0.5s;
}
.back-btn2:hover
{
background-color: white;
color: #00fc54;
border-top-left-radius: 100px;
}
.back-btn3
{
font-size: 50px;
color: white;
width: 300px;
text-align: center;
margin: 0 auto;
border: 1px solid white;
background-color: #023cf8;
cursor: pointer;
border-top-left-radius: 0px;
transition: all 0.5s;
}
.back-btn3:hover
{
background-color: white;
color: #023cf8;
border-top-left-radius: 100px;
}
.about-row
{
margin-top: 200px;
}
.card
{
background: white;
padding: 20px 20px;
margin-bottom: 100px;
}
javascript
anime({
targets: '.st0',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: false
});
anime({
targets: '.firstr',
d: [
{value: 'M1918.9,1080L1918.9,1080c-211.1-211.1-329.4-329.4-540.5-540.5v0C1589,328.8,1707.2,210.7,1917.8,0l1.1,0V1080z'}
],
baseFrequency: 0,
scale: 1,
delay: 2000,
loop: false,
direction: 'alternate',
easing: 'easeInOutExpo'
});
anime({
targets: '.firstl',
d: [
{value: 'M0,0L0,0c211.1,211.1,329.4,329.4,540.5,540.5v0C329.9,751.2,211.7,869.3,1.1,1080H0V0z'}
],
baseFrequency: 0,
scale: 1,
delay: 2000,
loop: false,
direction: 'alternate',
easing: 'easeInOutExpo'
})
anime({
targets: '.thirdp',
y: [
{value: 0}
],
baseFrequency: 0,
scale: 1,
delay: 3000,
loop: false,
direction: 'alternate',
easing: 'easeInOutExpo'
})
anime({
targets: '.st0',
scale: 0.2,
duration: 1500,
translateX: -250,
translateY: -300,
delay: 4000
})
anime({
targets: '.title-border',
x: "0",
duration: 1500,
delay: 4000,
easing: 'easeInOutExpo'
})
var about = document.getElementById('about')
about.addEventListener('click', function() {
var page = document.getElementById('page')
page.style.display = 'block';
page.style.zIndex = '4'
var aboutBd = anime({
targets: '.about-border',
y: "0",
duration: 500,
easing: 'easeInOutExpo',
loop: false
})
var aboutSp1 = anime({
targets: '.about-sp',
cy: "360",
delay: 500,
duration: 1000,
easing: 'easeInOutExpo',
loop: false
})
var aboutSp2 = anime({
targets: '.about-sp',
r: "2000",
delay: 1500,
duration: 1000,
loop: false
})
window.setTimeout( function() {
var aboutContainer = document.getElementById('about-container');
aboutContainer.style.display = 'block'
}, 1500 );
})
var backBtn = document.getElementById('back-btn')
backBtn.addEventListener('click', function() {
var aboutContainer = document.getElementById('about-container');
aboutContainer.style.display = "none"
anime({
targets: '.about-border',
y: "-1920",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.about-sp',
cy: "-50",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.about-sp',
r: "50",
duration: 1000,
loop: false
})
var page = document.getElementById('page')
page.style.zIndex = '2';
})
window.setTimeout( function() {
var fifth = document.getElementById('fifth');
fifth.style.display = 'block'
}, 5000 );
var works = document.getElementById('works')
works.addEventListener('click', function() {
var page2 = document.getElementById('page2')
page2.style.display = 'block';
page2.style.zIndex = '4'
var worksBd = anime({
targets: '.works-border',
y: "0",
duration: 500,
easing: 'easeInOutExpo',
loop: false
})
var worksSp1 = anime({
targets: '.works-sp',
cy: "450",
delay: 500,
duration: 1000,
easing: 'easeInOutExpo',
loop: false
})
var worksSp2 = anime({
targets: '.works-sp',
r: "2000",
delay: 1500,
duration: 1000,
loop: false
})
window.setTimeout( function() {
var worksContainer = document.getElementById('works-container');
worksContainer.style.display = 'block'
}, 1500 );
})
var backBtn2 = document.getElementById('back-btn2')
backBtn2.addEventListener('click', function() {
var worksContainer = document.getElementById('works-container');
worksContainer.style.display = "none"
anime({
targets: '.works-border',
y: "-1920",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.works-sp',
cy: "-50",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.works-sp',
r: "50",
duration: 1000,
loop: false
})
var page2 = document.getElementById('page2')
page2.style.zIndex = '2';
})
var contact = document.getElementById('contact')
contact.addEventListener('click', function() {
var page3 = document.getElementById('page3')
page3.style.display = 'block';
page3.style.zIndex = '4'
var contactBd = anime({
targets: '.contact-border',
y: "0",
duration: 500,
easing: 'easeInOutExpo',
loop: false
})
var contactSp1 = anime({
targets: '.contact-sp',
cy: "560",
delay: 500,
duration: 1000,
easing: 'easeInOutExpo',
loop: false
})
var contactSp2 = anime({
targets: '.contact-sp',
r: "2000",
delay: 1500,
duration: 1000,
loop: false
})
window.setTimeout( function() {
var contactContainer = document.getElementById('contact-container');
contactContainer.style.display = 'block'
}, 1500 );
})
var backBtn3 = document.getElementById('back-btn3')
backBtn3.addEventListener('click', function() {
var contactContainer = document.getElementById('contact-container');
contactContainer.style.display = "none"
anime({
targets: '.contact-border',
y: "-1920",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.contact-sp',
cy: "-50",
duration: 100,
easing: 'easeInOutExpo',
loop: false
})
anime({
targets: '.contact-sp',
r: "50",
duration: 1000,
loop: false
})
var page3 = document.getElementById('page3')
page3.style.zIndex = '2';
})
おわり