Masked Circle Slider

index.html

<div class="slider" id="slider-1">
  <div class="item">
    <svg xmlns="http://www.w3.org/2000/svg" class="original">
      <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/1.jpg?raw=true" mask="url(#donutmask)"></image>
    </svg>
    <div class="tit">DAISY</div>
  </div>
  <div class="item">
    <svg xmlns="http://www.w3.org/2000/svg" class="original">
      <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/3.jpg?raw=true"  mask="url(#donutmask)"></image>  
    </svg>
    <div class="tit">CANDIDUM</div>
  </div>
  <div class="item">
    <svg xmlns="http://www.w3.org/2000/svg" class="original">
      <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/4.jpg?raw=true" mask="url(#donutmask)"></image>  
    </svg>
    <div class="tit">MARIGOLD</div>
  </div>
  <div class="item">
    <svg xmlns="http://www.w3.org/2000/svg" class="original">
      <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://github.com/supahfunk/supah-codepen/blob/master/flowers/2.jpg?raw=true" mask="url(#donutmask)"></image>  
      
    </svg>
    <div class="tit">BLOSSOM</div>
  </div>
</div>

<svg>
  <defs>
    <mask id="donutmask">
      <circle id="outer" cx="250" cy="250" r="400" fill="white"/>
      <circle id="inner" cx="250" cy="250" r="300"/>
    </mask>
  </defs>
</svg>

<div class="cursor"></div>

<a class="the-most" target="_blank" href="https://codepen.io/2018/popular/pens/9/">
  <img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2018.png">
</a>

masked-circle-slider.markdown

Masked Circle Slider

A Pen by Fabio Ottaviani on CodePen.

License.

script.js

$('.slider').clone().removeAttr('id').attr('id', 'slider-2').appendTo('body');

$('#slider-1').slick({
    arrows: false,
    speed: 750,
    asNavFor: '#slider-2',
    dots: false
}).on('mousedown touchstart', function () {
    $('body').addClass('down');
}).on('mouseleave mouseup touchend', function () {
    $('body').removeClass('down');
});

$(window).on('keydown', function () {
    $('body').addClass('down');
}).on('keyup', function () {
    $('body').removeClass('down');
});

$('#slider-2').slick({
    fade: true,
    arrows: false,
    speed: 300,
    asNavFor:
    '#slider-1',
    dots: false
});

setTimeout(function(){
  $(window).trigger('keydown');
  setTimeout(function(){
    $('#slider-1').slick('slickNext');
    setTimeout(function(){
      $(window).trigger('keyup');
    }, 500);
  }, 600);
}, 1500);

$('#slider-1 image').removeAttr('mask');

$(window).on('resize', function () {
    $('#donutmask circle').attr({
        cx: $(window).width() / 2,
        cy: $(window).height() / 2
    });
    $('#donutmask #outer').attr({
        r: $(window).height() / 2.6
    });
    $('#donutmask #inner').attr({
        r: $(window).height() / 4.5
    });
}).resize();

$(window).on('mousemove', function(e){
  $('.cursor').css({
    top: e.pageY + 'px',
    left: e.pageX + 'px',
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

style.scss

html, body {
  height: 100vh;
  overflow: hidden;
  cursor: none;
  
  @media (pointer:coarse) {
    cursor: default;
  }
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: .5s ease-in-out;
  
  .down & {
    transform: scale(0.9);
    
    .item {
      .tit {
        opacity: 0;
      }
    }
  }
  
  * {
    outline: none;
  }
  
  .item {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    
    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
    }
    
    .tit {
      text-align: center;
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 0;
      width: 100%;
      transform: translateY(-50%);
      letter-spacing: 2rem;
      color: #fff;
      font-family: Roboto, sans-serif;
      font-size: 7vw;
      transition: all .3s ease-in-out;
    }
  }
}

#slider-1 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  
  .tit {
    display: none;
  }
}

#slider-2 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  transform: scale(1)!important;
  pointer-events: none;
}

.cursor {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .05);
  transition: transform ease-in-out .2s, background ease-in-out .2s;
  transform: translateZ(0);
  z-index: 100;
  left: -9999px;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    border-left: 6px solid rgba(255, 255, 255, .5);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    top: 10px;
    left: 52px;
    opacity: 0;
    transition: left ease-in-out .1s, opacity ease-in-out .2s;
  }
  
  &:after {
    border-left: none;
    border-right: 6px solid rgba(255, 255, 255, .5);
    left: -27px;
  }
  
  .down & {
    transform: scale(0.7) translateZ(0);
    background: rgba(255, 255, 255, .4);
    
    &:before,
    &:after {
      opacity: 1;
      left: 49px;
    }
    
    &:after {
      left: -24px;
    }
  }
  
  @media (pointer:coarse) {
    display: none;
  }
}

.the-most {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 100px;
  padding: 10px;
  
  img {
    max-width: 100%;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300|400" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />