#1000vhs

[enamoradade-ti]

“Pero yo lo decía en serio. Sin duda había chicos que me atraían, y me gustaba la idea de salir con alguien, pero el funcionamiento de este tipo de cosas no se ajustaba demasiado a mis aptitudes.”

[413-request-entity-too-large]

マウススクロールで「SVGグラデーション」を動かそう

こんにちは、フロントエンドエンジニアのドリルです。

今回はマウススクロールで、SVGグラデーションを動かすというアニメーションをご紹介します。 SVGについてもしご存知なければ、ぜひこちらの記事をご参照ください。

簡単な図形を描きながら、SVGの基本的な仕組みを理解してみよう！

2016.09.26

SVGグラデーションの配置

HTML

横200px、縦200pxの四角形を描画しています。

linearGradient要素のx1、y1はグラデーションの始点、x2、y2はグラデーションの終点です。この場合、四角形の左上から、右下にかけてグラデーションさせています。

色に関しては、始点は赤、終点は青に設定しています。

四角形の塗りは、g要素、fill属性の中に、linearGradient要素のidを記述することで、グラデーションが適応されます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <defs> <!-- x1、y1はグラデーションの始点、x2、y2はグラデーションの終点 --> <linearGradient id="js-gradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientUnits="userSpaceOnUse"> <!-- 始点は赤、終点は青に設定 --> <stop id="js-gradient__stop-1" offset="0%" stop-color="red"/> <stop id="js-gradient__stop-2" offset="100%" stop-color="blue"/> </linearGradient> </defs> <!-- g要素、fill属性の中に、linearGradient要素のidを記述することで、グラデーションが適応されます。 --> <g fill="url(#js-gradient)"> <rect width="200px" height="200px"></rect> </g> </svg>

CSS

スクロールできるように、わざとbody要素に高さを設定しています。

SVGはウィンドウに対して真ん中に配置しています。

/*body要素に高さを設定*/ body { height: 1000vh; } /*真ん中に配置*/ svg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; }

結果

SVGグラデーションを動かす

プラグインを読み込む

今回はTweenMax.jsを使用するので、CDNから読み込みましょう。

<!-- https://greensock.com/gsap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

Webpackなどを使っている方は、以下のようにnpm installしたあと、import文を記述してください。

$ npm install gsap

import 'gsap/TweenMax';

JAVASCRIPT

var $gradientStop1 = document.querySelector('#js-gradient__stop-1'); var $gradientStop2 = document.querySelector('#js-gradient__stop-2'); window.addEventListener('scroll', function() { var scrollTop = window.pageYOffset; var val = scrollTop / 20; var hue1 = (val) % 360; var hue2 = (val + 50) % 360; TweenMax.set($gradientStop1, { stopColor: 'hsl('+hue1+', 100%, 50%)' }); TweenMax.set($gradientStop2, { stopColor: 'hsl('+hue2+', 100%, 50%)' }); });

結果

スクロールしてみてください。色が変化していきます。

stop要素の色、HSL※1をTweenMax.jsで動かしています。 そのstopColorを剰余演算子※2「%」によって、値が０〜３６０で変化していきます。

See the Pen 1/2 – SVG gradation animation by scrolling – TweenMax – codepen is pc-only by Sho Shindo (@kabukimono) on CodePen.

CTOづやさんをグラデーションさせる

今度はづやさんの顔写真を、イラストレーターの画像トレースでパス化してみました（撮影と、写真切り抜き、はデザイナーのありさんに協力してもらいました！ 感謝いたします）！

See the Pen 2/2 – SVG gradation animation by scrolling – TweenMax – codepen is pc-only by Sho Shindo (@kabukimono) on CodePen.

スクロールしてみてください。

まとめ

いかがでしたか？ 今回は少ないコードでしたが、楽しいアニメーションを作るきっかけになればと思います。ドリルでした。

ドリルの楽しいアニメーション実装記事シリーズ▼

マウスクリックで顔が増殖���？ワクワクする「TweenMaxアニメーション」を作ろう！

2019.04.15

CANVASでドキドキする「アルファマスクアニメーション」を作ろう！

2018.09.11