Deslizador de imagen elástica con JavaScript y SVG-elastic Slider

Vista prévia

Descripción

Elastic Slider es una biblioteca deslizante de imagen de fondo bastante Cool que hace uso de < a href = "http:/snapsvg.io/" target = "_ blank" > Snap. svg para crear una animación elástica que estira al hacer la transición entre imágenes.

Funcionamiento

Cargue la biblioteca Snap. svg necesaria desde una red CDN.

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Cargue los archivos JavaScript y StyleSheet de Elastic Slider en la página HTML.

<link href="elastic-slider.css" rel="stylesheet">
<script src="elastic-slider.js"></script>

La estructura HTML del control deslizante.

<div class="elastic-slider">

<div id="slide1"></div>

<div id="slide2"></div>

<div id="slide3"></div>
</div>

Agregue imágenes de fondo al control deslizante.

#slide1 {

background-image: url("1.jpg")
}

#slide2 {

background-image: url("2.jpg")
}

#slide3 {

background-image: url("3.jpg")
}

Cree el efecto elástico con el trazado de clips SVG:

.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);
}

Cree un nuevo objeto ElasticSlider para inicializar el control deslizante.

new ElasticSlider('.elastic-slider');

Opciones posibles.

 new ElasticSlider('.elastic-slider',{



 // Max distance (px) for stretching effect.


 maxStretch: 100,



 // Parameter that allows to customize the curve in the stretching effect.



// A setting of 0 results in straight lines, and higher values result in steeper curves.


 bezierLen: 80

 });