今回はトップのバックグランドの画像を曲線にして、Parallax（パララックス）風のオープニングページと、マウスをクリックした際に、クリックした座標をもとに「波紋」のようなアニメーションを発動させるショートページを作ります。(CSS,JavaScript)😀
See the Pen Animation from css curve background and pointer coordinates by bens-user (@ben1099user) on CodePen.
💻ben1099url.starfree.jp/0061.html ( DEMO ※スマホは未対応）
背景画像を曲線にさせるには （CSS）
まずは背景画像をCSSを使って曲線にさせてみます。
曲線にさせる方法としてCSSでは、「border-bottom-right-radius」「border-bottom-left-radius」を調整しながら利用する方法もありますが、今回の使用したCSSでは「clip-path」を使用しています。
clip-path : circle (円の半径 at 座標X 座標Y) ;
clip-path プロパティは要素をクリッピング（切り抜き）する際に使用します。
要素をクリッピングすると、指定したクリッピング領域の外側のみが非表示となって内側だけが表示されます。
同じ関連でpolygonを使用した記事もありますので、是非ご覧になって下さい。
https://www.benblogeveryday.com/css-poygon-textlayout-process/
(関連記事～ polygonを使って文章のレイアウトをオシャレにしませんか）
背景画像を指定している要素としてバックグランドに「 background-attachment : fixed ;」を追加することで、背景画像を移動・固定させることが可能になります。
ちなみに「fixed」を指定することで、画像はスクロールさせても動きません。
なので、スクロールを行うことで、background-attachmentの指定されている要素下に別な要素があれば、下から登って来るようになり、パララックス的な感じになります。
クリックさせたらアニメーションを発動させる（JavaScript）
次にWeb全体の要素にマウスでクリックさせたら、JavaScriptを使ってポインターの座標位置に「波紋」を出すアニメーションを実装させていきます。
ポイントは translate でアニメーションをかけながら位置をずらす
0%～100%の間、アニメーションを発動させている位置をずらして、opacity で透明度も徐々に消えて行くようにします。「波紋」アニメーションの輪郭や色は、border で好みに調整してください。
background-color を無くせば、輪郭のみのアニメーションになります。
JavaScriptが行っていることは、クリックした時の座標の取得・設定です。
アニメーションを終えた後に、animatinend イベントにて「波紋の div 」をremove（削除）します。
これが無いと、クリックのたびに「波紋 div」が増えてしまうので、削除を行いながら新たな波紋を作ります。
最終的な動作確認は、CodePen のソースをコピペして見て下さいね。☕
コメント