Javascript

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

April 30, 2018

Elastic SliderはSVGクリップパス機能とアニメーションを使用したスライダープラグイン。

Basic usage

必要なスタイルとスクリプト

<!-- 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

Demo/Download