logo DevAnswer - Developers Answer

Animated Clip Path Slider Concept

13th January

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@font-face {
  font-family: "Cosi";
  src: url("http://www.devanswer.com/codes/files/CosiTimes-Roman.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cosi";
  src: url("http://www.devanswer.com/codes/files/CosiTimes-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("http://www.devanswer.com/codes/files/MatterSQTRIAL-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: Cosi, serif;
  font-size: 16px;
  text-rendering: optimizeLegibility;
}
body * {
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
  text-transform: uppercase;
}
.header__logo {
  font-size: 1.1rem;
  padding: 1.3rem 2.5rem;
  background: #fff;
}
.header__nav {
  list-style: none;
  margin: 0;
  font-family: Matter, sans-serif;
  font-size: 0.725rem;
}
.header__nav ul {
  display: flex;
  align-items: center;
}
.header__nav ul li {
  list-style: none;
  padding-right: 1rem;
}
.header__burger {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="273.25" height="193.5" viewBox="0 0 273.25 193.5"><path d="M5627.77,610.482s-113.65-5.008-87.41,126.78,211.62,27.561,211.62,27.561S5943.89,648.034,5627.77,610.482Z" transform="translate(-5536.44 -610.438)"/></svg>');
  background-size: 100%;
  width: 3.1rem;
  height: 2.2rem;
  background-repeat: no-repeat;
}
.header__burger svg {
  width: 1rem;
  height: auto;
  margin: 0.8rem 0 0 0.8rem;
}

.slider {
  display: flex;
  height: 100vh;
}
.slider__side {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.slider__slide {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 101%;
  visibility: hidden;
}
.slider__slide:nth-child(2n) {
  visibility: visible;
}
.slider__slide.active {
  z-index: 2;
}
.slider__slide__img {
  height: 100%;
  width: calc(100% + 1px);
  vertical-align: middle;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  -webkit-clip-path: inset(0%);
          clip-path: inset(0%);
  top: 0;
  left: 0;
}
.slider__slide__content {
  width: 100%;
  height: 100%;
  padding: 5rem 4rem;
  position: relative;
}
.slider__slide__more {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: rotate(-90deg);
  transform-origin: 0 100%;
  position: absolute;
  top: 50%;
  left: 10%;
  text-transform: uppercase;
}
.slider__slide__more + .slider__slide__more {
  transform: rotate(90deg);
  transform-origin: 100% 100%;
  right: 10%;
  left: auto;
}
.slider__slide__number {
  font-weight: 200;
  position: absolute;
  bottom: 10%;
  right: 18%;
  font-size: 5rem;
  opacity: 0;
  transform: translateY(5rem);
  display: flex;
}
@media (min-width: 1200px) {
  .slider__slide__number {
    font-size: 9rem;
  }
}
.slider__slide__number span {
  display: block;
  transform: rotateY(90deg);
}
.slider__slide__number span + .slider__slide__number span {
  transform: rotateY(-90deg);
}
.slider__slide__scene {
  font-weight: 200;
  font-size: 4rem;
  margin-top: 4%;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
}
@media (min-width: 1200px) {
  .slider__slide__scene {
    font-size: 6rem;
  }
}
.slider__slide__scene span {
  opacity: 0;
}
.slider__slide__scene span:nth-child(1) {
  transform: translate(-300%, -3rem);
}
.slider__slide__scene span:nth-child(2) {
  transform: translate(-150%, -3rem);
}
.slider__slide__scene span:nth-child(3) {
  transform: translate(0, -3rem);
}
.slider__slide__scene span:nth-child(4) {
  transform: translate(150%, -3rem);
}
.slider__slide__scene span:nth-child(5) {
  transform: translate(300%, -3rem);
}

.controls {
  position: fixed;
  bottom: -7.5rem;
  left: 50%;
  z-index: 20;
  background: #000;
  height: 10rem;
  width: 10rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.controls__icon {
  display: inline-block;
  color: #fff;
  width: 30%;
  margin-top: -6.9rem;
  text-align: center;
  cursor: pointer;
}
.controls__icon svg {
  height: 1.25rem;
  width: 1.25rem;
}
.controls__icon + .controls__icon {
  transform: rotate(180deg);
  margin-top: -7.1rem;
}

.modal {
  opacity: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: opacity 0.3s ease-in-out;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.modal.active {
  opacity: 1;
  pointer-events: auto;
}
.modal__content {
  background: #fff;
  position: absolute;
  height: 60vh;
  width: 50vw;
  max-width: 600px;
  overflow-y: auto;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 2rem;
  font-family: "Matter";
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal__content h2 {
  font-family: cosi;
}
.modal__content a {
  color: #000;
}
.modal-trigger {
  position: absolute;
  z-index: 100;
  bottom: 0;
  right: 0;
  background: #000;
  background-size: 100%;
  color: #fff;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  border-radius: none;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://use.typekit.net/waw8uxn.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@unseenco/e@1.7.0/dist/e.js'></script>
<header class="header">
    <div class="header__logo">
        Your LOGO
    </div>
    <nav class="header__nav">
        <ul>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
            <li>
                <div class="header__burger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="75.75" height="50.469" viewBox="0 0 75.75 50.469">
                        <path fill="#fff" data-name="Rectangle 7 copy 2" class="cls-1" d="M5615.26,681.145h75.73v7.213h-75.73v-7.213Zm0,21.638h75.73V710h-75.73v-7.212Zm0,21.638h75.73v7.212h-75.73v-7.212Z" transform="translate(-5615.25 -681.156)" />
                    </svg>
                </div>
            </li>
        </ul>
    </nav>
</header>
<main>
    <div class="slider">
        <div class="slider__side">
            <div class="slider__slide">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-1.jpg">
                <div class="slider__slide__number">
                    <span>4</span>
                    <span>3</span>
                </div>
            </div>
            <div class="slider__slide active">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-2.jpg">
                <div class="slider__slide__number">
                    <span>4</span>
                    <span>2</span>
                </div>
            </div>
            <div class="slider__slide">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-3.jpg">
                <div class="slider__slide__number">
                    <span>6</span>
                    <span>7</span>
                </div>
            </div>
        </div>
        <div class="slider__side">
            <div class="slider__slide">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-4.jpg">
                <div class="slider__slide__number">
                    <span>3</span>
                    <span>8</span>
                </div>
            </div>
            <div class="slider__slide active">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-5.jpg">
                <div class="slider__slide__number">
                    <span>0</span>
                    <span>8</span>
                </div>
            </div>
            <div class="slider__slide">
                <div class="slider__slide__content">
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__more">View More</div>
                    <div class="slider__slide__scene">
                        <span>s</span><span>c</span><span>e</span><span>n</span><span>e</span>
                    </div>
                </div>
                <img class="slider__slide__img" src="http://www.devanswer.com/img/paint-6.jpg">
                <div class="slider__slide__number">
                    <span>3</span>
                    <span>8</span>
                </div>
            </div>
        </div>
    </div>
    <div class="controls">
        <span class="controls__icon js-down">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                    viewBox="0 0 23.6 13.5" style="enable-background:new 0 0 23.6 13.5;" xml:space="preserve">
<polygon fill="#fff" class="st0" points="23.6,11.8 11.8,0 10.1,1.7 10.1,1.7 0,11.8 1.7,13.5 11.8,3.4 21.9,13.5 " />
</svg>
        </span>
        <span class="controls__icon js-up">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                    viewBox="0 0 23.6 13.5" style="enable-background:new 0 0 23.6 13.5;" xml:space="preserve">
<polygon fill="#fff" class="st0" points="23.6,11.8 11.8,0 10.1,1.7 10.1,1.7 0,11.8 1.7,13.5 11.8,3.4 21.9,13.5 " />
</svg>
        </span>
    </div>
    <div class="modal">
        <div class="modal__content">
            <div>
                <h2>What is this?</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
            <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</small></p>
        </div>
    </div>
    <button type="button" class="modal-trigger js-trigger">info</button>
</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
E = new window.E();
window.onload = () => {
  const modal = document.querySelector('.modal');
  const navTl = gsap.timeline({ defaults: { duration: 1 } });
  let slides = [...document.querySelectorAll('.slider__slide')];
  let slideTl = [];
  // add all slide timelines
  for (let i = 0; i < slides.length; i++) {
    const slide = slides[i];
    const viewMore = slide.querySelectorAll('.slider__slide__more');
    const scene = slide.querySelectorAll('.slider__slide__scene span');
    const img = slide.querySelector('.slider__slide__img');
    const number = slide.querySelector('.slider__slide__number');
    const numbers = number.querySelectorAll('span');
    const tl = gsap.timeline({ paused: true, defaults: { duration: 1.1, ease: "power2.inOut" } });
    tl.
    to(img, {
      clipPath: 'inset(18%)',
      scale: 0.95 },
    0).
    to(viewMore[0], { x: '2rem' }, 0).
    to(viewMore[1], { x: '-2rem' }, 0).
    to(number, { y: '0rem', duration: 1 }, 0.3).
    to(number, { opacity: 1 }, 0.4).
    to(numbers, { rotateY: 0, duration: 1.6 }, 0).
    to(scene, {
      x: '0%',
      y: 0,
      opacity: 1,
      duration: 1.2 },
    0.2);
    slideTl.push(tl);
  }
  // hover interaction
  E.on('mouseenter mouseleave', '.slider__slide', e => {
    const slide = e.target;
    const tl = slideTl[slides.indexOf(slide)];
    if (e.type === 'mouseenter') {
      tl.play();
    } else {
      tl.reverse();
    }
  });
  // Next button
  E.on('click', '.js-up, .js-down', e => {
    const sides = document.querySelectorAll('.slider__side');
    if (navTl.isActive() === false) {
      navTl.clear();
      sides.forEach((side, k) => {
        const slides = side.querySelectorAll('.slider__slide');
        let activeSlide, nextSlide, initialClip;
        if (e.target.classList.contains('js-up')) {
          initialClip = k === 0 ? 'inset(100% 0 0%)' : 'inset(0 0 100%)';
        } else {
          initialClip = k === 1 ? 'inset(100% 0 0%)' : 'inset(0 0 100%)';
        }
        for (let i = 0; i < slides.length; i++) {
          if (slides[i].classList.contains('active')) {
            activeSlide = slides[i];
            nextSlide = slides[i + 1] || slides[0];
            break;
          }
        }
        activeSlide.classList.remove('active');
        nextSlide.classList.add('active');
        gsap.set(nextSlide, {
          autoAlpha: 1,
          scale: 1.2,
          clipPath: initialClip });
        navTl.to(nextSlide, {
          clipPath: 'inset(0% 0 0%)',
          scale: 1,
          ease: 'power2.inOut',
          duration: 1,
          onComplete: () => {
            gsap.set(activeSlide, { autoAlpha: 0 });
          } },
        0);
      });
    }
  });
  // Modal
  E.on('click', '.js-trigger', e => modal.classList.add('active'));
  E.on('click', '.modal', e => modal.classList.remove('active'));
};
</script>

</body>
</html>



Other Codes

Vertical Image Gallery Code with Preview . . .


Vertical Image Gallery Code with Preview . . .

In this code, the slides smell vertically and by placing a cursor on each of the small photos, the photo is displayed in large size.
Responsive Image Slider with Thumbnails . . .


Responsive Image Slider with Thumbnails . . .

Each slide in this post has a small thumbnail at the bottom of the page that when the slide is selected, the thumbnail will also be colored. Each slide . . .
3D Turning Pages of Book with CSS


3D Turning Pages of Book with CSS

In this post, we have a very beautiful slider in the form of a book. This is a 3D slider that automatically shows photos one by one.
Yet Another Slider with Transition Effect


Yet Another Slider with Transition Effect

The slider prepared for you in this code divides the image into three parts to replace each slide, and all three parts of the page move to display the . . .