写真をかっこいいSVGアニメーションで見せてくれる「Card Expansion Effect with SVG clipPath」
Contents
写真をかっこいいSVGアニメーションで見せてくれる「Card Expansion Effect with SVG clipPath」
写真をクリックするとかっこいいポリゴンスタイルのSVGアニメーションを伴って拡大し、コンテンツが開く「Card Expansion Effect with SVG clipPath」。ページ遷移ではなく、元ページの上にコンテンツが広がるようなイメージで、美しい動きをスムーズに楽しむことができます。
「Card Expansion Effect with SVG clipPath」
デモは４タイプあります。
どれもクールなので、ぜひためしてみてください。
ダウンロード
codropsの記事からダウンロードできます。
使い方
デモを元に、使い方を見ていきましょう。
１、cssの読み込み
写真をレイアウトするためのcard.cssと、SVGアニメーションを描画するためのpattern.cssを<head>内で読み込みます。
[HTML]
<head> <link rel="stylesheet" type="text/css" href="css/card.css" /> <link rel="stylesheet" type="text/css" href="css/pattern.css" /> </head>
２、スクリプトを読み込む
<body>の閉じタグ直前で、スクリプトを読み込みます。
Card-circle.js とdemo.jsの部分は、デモのタイプによって読み込むスクリプトが違います。
下記はdemo1の場合です。
[HTML]
<script src="js/vendors/trianglify.min.js"></script> <script src="js/vendors/TweenMax.min.js"></script> <script src="js/vendors/cash.min.js"></script> <script src="js/Card-circle.js"></script> <script src="js/demo.js"></script>
３、HTMLを記述
最初に配置する写真やクリックした時の円形に切り抜いた写真、最後に配置される拡大写真は、SVGのclipPath要素で切り抜いて描画しています。
[HTML]
<div class="pattern pattern--hidden"></div> <div class="card"> <div class="card__container card__container--closed"> <svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice"> <defs> <clipPath id="clipPath1"> <circle class="clip" cx="960" cy="250" r="992"></circle> </clipPath> </defs> <image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="img/a.jpg"></image> </svg> <div class="card__content"> <i class="card__btn-close fa fa-times"></i> <div class="card__caption"> <h2 class="card__title"><span id="i-4">タイトル</span></h2> <p class="card__subtitle">サブタイトル</p> </div> <div class="card__copy"> <div class="meta"> <img decoding="async" class="meta__avatar" src="img/authors/1.png" alt="author01" /> <span class="meta__author">著者</span> <span class="meta__date">日付</span> </div> <p>テキスト</p> </div> </div> </div>
ダウンロードすると、デモのソース一式が手に入ります。
新しい技術を使って表現されたクールなエフェクトを、ぜひ試してみてください。