SVG clipPathとマスク要素によって動かされる、放射状のトランジション効果を持つシンプルで反応性の高いスライダーのご紹介です。
これを段階的に見ていくと、
各スライドには、最初に表示される画像の部分をクリップする円要素（ナビゲーションCTA）と、スライダ全体をカバーする第2の円要素（最初の要素の半径円の要素）。
clipPath要素を使用すると、イメージの可視領域を定義できます。次に、clipPath要素をアニメーション化すると、クリップを適用している画像の可視領域がアニメートされます。
構造の作成
HTMLの構造は、 2つの順不同リストで構成されている ul.cd-radial-slider スライドやAの ul.cd-radial-slider-navigation スライダーナビゲーションのため。
その中の各リスト項目 ul.cd-radial-sliderは.svg-wrapper、<clipPath> 要素を持つsvgを含むa （スライド画像の切り抜き領域を変更するために使用される）と<image>要素（クリップパスのurl属性が<clipPath>id）と.cd-radial-slider-content、スライドコンテンツ。
.cd-round-mask 2つの<mask>要素をラップするには、追加が使用されます。
<div class=”cd-radial-slider-wrapper”>
<ul class=”cd-radial-slider” data-radius1=”60″ data-radius2=”1364″ data-centerx1=”110″ data-centerx2=”1290″>
<li class=”visible”>
<div class=”svg-wrapper”>
<svg viewBox=”0 0 1400 800″>
<title>SVG スライダー</title>
<defs>
<clipPath id=”cd-image-1″>
<circle id=”cd-circle-1″ cx=”110″ cy=”400″ r=”1364″/>
</clipPath>
</defs>
<image height=’800px’ width=”1400px” clip-path=”url(#cd-image-1)” xlink:href=”img/gori0I9A9903_TP_V.jpg”></image>
</svg>
</div> <!– .svg-wrapper –>
<div class=”cd-radial-slider-content”>
<div class=”wrapper”>
<div>
<h2>タイトルタイトル</h2>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<a href=”#0″ class=”cd-btn”>もっと見る</a>
</div>
</div>
</div> <!– .cd-radial-slider-content –>
</li>
<li class=”next-slide”>
<div class=”svg-wrapper”>
<svg viewBox=”0 0 1400 800″>
<title>SVG スライダー2</title>
<defs>
<clipPath id=”cd-image-2″>
<circle id=”cd-circle-2″ cx=”1290″ cy=”400″ r=”60″/>
</clipPath>
</defs>
<image height=’800px’ width=”1400px” clip-path=”url(#cd-image-2)” xlink:href=”img/smartphoneIMGL4229_TP_V.jpg”></image>
</svg>
</div> <!– .svg-wrapper –>
<div class=”cd-radial-slider-content”>
<div class=”wrapper”>
<div>
<h2>スライダータイトル</h2>
<p>サンプルテキストサンプルテキストサンプルテキスト</p>
<a href=”#0″ class=”cd-btn”>もっと見る</a>
</div>
</div>
</div> <!– .cd-radial-slider-content –>
</li>
<li>
<div class=”svg-wrapper”>
<svg viewBox=”0 0 1400 800″>
<title>Animated SVG</title>
<defs>
<clipPath id=”cd-image-3″>
<circle id=”cd-circle-3″ cx=”110″ cy=”400″ r=”60″/>
</clipPath>
</defs>
<image height=’800px’ width=”1400px” clip-path=”url(#cd-image-3)” xlink:href=”img/KLPL_FOREST_007_TP_V.jpg”></image>
</svg>
</div> <!– .svg-wrapper –>
<div class=”cd-radial-slider-content”>
<div class=”wrapper”>
<div>
<h2>3枚目のスライドです</h2>
<p>テキストテキストテキストテキストテキスト</p>
<a href=”#0″ class=”cd-btn”>もっと見る</a>
</div>
</div>
</div> <!– .cd-radial-slider-content –>
</li>
<li class=”prev-slide”>
<div class=”svg-wrapper”>
<svg viewBox=”0 0 1400 800″>
<title>Animated SVG</title>
<defs>
<clipPath id=”cd-image-4″>
<circle id=”cd-circle-4″ cx=”110″ cy=”400″ r=”60″/>
</clipPath>
</defs>
<image height=’800px’ width=”1400px” clip-path=”url(#cd-image-4)” xlink:href=”img/tachiaraiIMGL4741_TP_V.jpg”></image>
</svg>
</div> <!– .svg-wrapper –>
<div class=”cd-radial-slider-content”>
<div class=”wrapper”>
<div>
<h2>テキストタイトル</h2>
<p>あいうえおあいうえお</p>
<a href=”#0″ class=”cd-btn”>123456</a>
</div>
</div>
</div> <!– .cd-radial-slider-content –>
</li>
</ul> <!– .cd-radial-slider –>
<ul class=”cd-radial-slider-navigation”>
<li><a href=”#0″ class=”next”>Next</a></li>
<li><a href=”#0″ class=”prev”>Prev</a></li>
</ul> <!– .cd-radial-slider-navigation –>
<div class=”cd-round-mask”>
<svg viewBox=”0 0 1400 800″>
<defs>
<mask id=”cd-left-mask” height=’800px’ width=”1400px” x=”0″ y=”0″ maskUnits=”userSpaceOnUse”>
<path fill=”white” d=”M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z”/>
</mask>
<mask id=”cd-right-mask” height=’800px’ width=”1400px” x=”0″ y=”0″ maskUnits=”userSpaceOnUse”>
<path fill=”white” d=”M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z”/>
</mask>
</defs>
</svg>
</div>
</div> <!– .cd-radial-slider-wrapper –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<script>
if( !window.jQuery ) document.write(‘<script src=”js/jquery-2.2.1.min.js”><\/script>’);
</script>
<script src=”js/snap.svg-min.js”></script>
<script src=”js/main.js”></script> <!– Resource jQuery –>
