Deslizador de imagen dividida con CSS3 y SVG

Vista prévia

Descripción

Un deslizador de imagen dividida de pantalla completa de gran capacidad de respuesta construido con patrones SVG y varias propiedades CSS3.

Funcionamiento

Agregue las imágenes al control deslizante que sigue a la estructura de marcado como esta:

<div class="main">

<div class="slider">


<svg class="slider__mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" width="0" height="0">



<defs>




<!-- Slide 1 -->




<pattern id="bg1" patternUnits="userSpaceOnUse" width="1920" height="1080" viewBox="0 0 1920 1080">





<image xlink:href="https://images.unsplash.com/photo-1454328911520-ccf83f1ef41d?dpr=1&auto=format&fit=crop&w=2000&h=2000&q=80&cs=tinysrgb&crop=&bg=" width="100%" height="100%"/>




</pattern>




<pattern id="pattern1l" patternUnits="userSpaceOnUse" width="562" height="366" viewBox="0 0 562 366">





<image xlink:href="https://images.unsplash.com/photo-1454328911520-ccf83f1ef41d?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>




</pattern>




<pattern id="pattern1r" patternUnits="userSpaceOnUse" x="365px" width="562" height="366" viewBox="0 0 562 366">





<image xlink:href="https://images.unsplash.com/photo-1497215842964-222b430dc094?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>




</pattern>









<!-- Slide 2 -->




<pattern id="bg2" patternUnits="userSpaceOnUse" width="1920" height="1080" viewBox="0 0 1920 1080">





<image xlink:href="https://images.unsplash.com/photo-1497377825569-02ad2f9edb81?dpr=1&auto=format&fit=crop&w=2000&h=2000&q=80&cs=tinysrgb&crop=&bg=" width="100%" height="100%"/>




</pattern>




<pattern id="pattern2l" patternUnits="userSpaceOnUse" width="562" height="366" viewBox="0 0 562 366">





<image xlink:href="https://images.unsplash.com/photo-1497377825569-02ad2f9edb81?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>




</pattern>




<pattern id="pattern2r" patternUnits="userSpaceOnUse" x="365" width="562" height="366" viewBox="0 0 562 366">





<image xlink:href="https://images.unsplash.com/photo-1496060169243-453fde45943b?dpr=1&auto=format&fit=crop&w=600&h=600&q=80&cs=tinysrgb&crop=&bg=" width="600px" height="600px"/>




</pattern>



</defs>


</svg>



<div class="slide" id="slide-1">



<svg class="slide__bg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920" height="1080">




<rect x="0" y="0" width="1920" height="1080" fill="url(#bg1)" />



</svg>



<div class="slide__images">




<div class="slide__image slide__image--left">





<svg viewBox="0 0 900 365" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">






<path d="M 0 0 L 0 365 L 351.2382 365 L 562 0 L 0 0 Z" fill="url(#pattern1l)"/>





</svg>




</div>





<div class="slide__image slide__image--right">





<svg viewBox="0 0 900 365" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">






<path d="M 900 365 L 900 0 L 548.7618 0 L 338 365 L 900 365 Z" fill="url(#pattern1r)"/>





</svg>




</div>



</div>


</div>



<div class="slide" id="slide-2">



<svg class="slide__bg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920" height="1080">




<rect x="0" y="0" width="1920" height="1080" fill="url(#bg2)" />



</svg>



<div class="slide__images">




<div class="slide__image slide__image--left">





<svg viewBox="0 0 900 365" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">






<path d="M 0 0 L 0 365 L 351.2382 365 L 562 0 L 0 0 Z" fill="url(#pattern2l)"/>





</svg>




</div>





<div class="slide__image slide__image--right">





<svg viewBox="0 0 900 365" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px">






<path d="M 900 365 L 900 0 L 548.7618 0 L 338 365 L 900 365 Z" fill="url(#pattern2r)"/>





</svg>




</div>



</div>


</div>



<div class="slider__pagination">



<a href="#slide-1" class="button">Slide 1</a>



<a href="#slide-2" class="button">Slide 2</a>


</div>

</div>
</div>

Los estilos CSS/CSS3 primarios para el deslizador de imagen.

.main {

position: relative;

min-height: 100vh;

overflow: hidden;

text-align: left;
}

.slider {

width: 100vw;

height: 100vh;
}

.slide {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

position: absolute;

width: 100%;
}

.slide:target .slide__bg { opacity: 1; }

.slide:target .slide__image {

-webkit-transform: translate(0);

transform: translate(0);

opacity: 1;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

-webkit-filter: blur(0) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));

filter: blur(0) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));
}

.slide__bg {

position: absolute;

z-index: 0;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%) scale(2);

transform: translate(-50%, -50%) scale(2);

-webkit-filter: blur(50px);

filter: blur(50px);

opacity: 0;

-webkit-transition: opacity 1s ease;

transition: opacity 1s ease;

will-change: opacity;
}

.slide__images {

position: relative;

width: 100%;

max-width: 900px;

height: 365px;

margin: 0 20px;
}

.slide__image {

position: absolute;

width: 100%;

opacity: 0;

-webkit-transition: all 0.5s ease-in-out 0s;

transition: all 0.5s ease-in-out 0s;

-webkit-filter: blur(10px) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));

filter: blur(10px) drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.35));

will-change: transform, opacity, filter;
}

.slide__image svg { display: block; }

.slide__image--left {

-webkit-transform: translate(0.75%, -10px);

transform: translate(0.75%, -10px);
}

.slide__image--right {

top: 5vmin;

-webkit-transform: translate(-0.75%, 10px);

transform: translate(-0.75%, 10px);
}

El estilo & colocar los botones de paginación.

.slider__pagination {

position: absolute;

bottom: 7vh;

width: 100%;

text-align: center;
}

.button {

position: relative;

display: inline-block;

padding: 20px 40px;

border: 2px solid #fff;

line-height: 1;

text-align: center;

text-decoration: none;

text-transform: uppercase;

letter-spacing: 1.5px;

color: white;

-webkit-transition: all 0.25s ease;

transition: all 0.25s ease;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;
}

.button:hover {

color: #333;

background-color: white;
}

Fuerza redirigir al ancla:

window.location.href="#slide-1";