CSS-only image slider using SVG patterns

css-only-image-slider-using-svg-patterns.markdown

CSS-only image slider using SVG patterns

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.

CHANGELOG

Added will-change property to improve performance.

A Pen by Damián Muti on CodePen.

License.

index.html

<header class="header__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>
  </header>

script.js

// Force redirect to anchor
window.location.href="#slide-1";

// All images are from https://unsplash.com/

style.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:600');

$msuxf-background: #fff !default;
$msuxf-background-dark: #333 !default;
$msuxf-font-family-alt: 'Montserrat', sans-serif;
$msuxf-transition-duration: 0.25s !default;
$msuxf-transition-timing: ease !default;

.header__main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  text-align: left;
}

.slider {
  width: 100vw;
  height: 100vh;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: absolute;
  width: 100%;

  &:target {
    .slide__bg {
      opacity: 1;
    }
    
    .slide__image {
      transform: translate(0);
      opacity: 1;
      transition-delay: 0.5s;
      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%;
  transform: translate(-50%, -50%) scale(2);
  filter: blur(50px);
  opacity: 0;
  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;
  transition: all 0.5s ease-in-out 0s;
  filter: blur(10px) drop-shadow(0px 10px 30px rgba(0,0,0,0.35));
  will-change: transform, opacity, filter;

  svg {
    display: block;
  }
  
  &--left {
    transform: translate(0.75%, -10px);
  }
  
  &--right {
    top: 5vmin;
    transform: translate(-0.75%, 10px);
  }
}

.slider__pagination {
  position: absolute;
  bottom: 7vh;
  width: 100%;
  text-align: center;
}

.button {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  border: 2px solid $msuxf-background;
  line-height: 1; // Normalize height
  font: 600 12px 'Montserrat', sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: white;
  transition: all $msuxf-transition-duration $msuxf-transition-timing;
  appearance: none;

  &:hover {
    color: $msuxf-background-dark;
    background-color: white;
  }
}