Javascript
【Javascript】SVGクリップパス機能とアニメーションを使用したスライダーElastic Slider
April 30, 2018

Elastic SliderはSVGクリップパス機能とアニメーションを使用したスライダープラグイン。
必要なスタイルとスクリプト
<!-- CSS: The inline piece is needed to work properly --> <link rel="stylesheet" href="elastic-slider.css"> <style> .clipped-left { -webkit-clip-path: url(#clipped-left); clip-path: url(#clipped-left); } .clipped-right { -webkit-clip-path: url(#clipped-right); clip-path: url(#clipped-right); } </style> <!-- JS --> <script src="snap.svg.js"></script> <script src="elastic-slider.js"></script> <!-- Basic HTML structure: A div with class 'elastic-slider' and three children at least --> <div class="elastic-slider"> <div id="image1"></div> <div id="image2"></div> <div id="image3"></div> </div> <!-- Simple 'elastic-slider' initialization --> <script> new ElasticSlider('.elastic-slider'); </script>
MIT