비전공자 개발일기

Simple Image Comparison Slider 본문

JQuery

Simple Image Comparison Slider

HiroDaegu 2022. 6. 4. 00:53
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SIMPLE IMAGE COMPARISON SLIDER</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' integrity='sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==' crossorigin='anonymous'></script>
</head>
<body>
  <figure class="cd-image-container">  
    <img src="https://source.unsplash.com/KbR06h9dNQw/768x460" alt="Original Image">  
    <span class="cd-image-label" data-type="original">Crowded</span>  
    <div class="cd-resize-img"> <!-- the resizable image on top -->  
         <img src="https://source.unsplash.com/jFCViYFYcus/768x460" alt="Modified Image">  
         <span class="cd-image-label" data-type="modified">Quiet</span>  
    </div>  
    <span class="cd-handle"></span>  
  </figure>  
  <header>  
  <h1>Image Comparison Slider</h1>  
  </header>  
</body>
</html>
 /* --------------------------------   
 Primary style  
 -------------------------------- */  
 *, *:after, *:before {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
 }  
 body {  
  font-size: 100%;  
  font-family: "Roboto Slab", sans-serif;  
  color: #445b7c;  
  background-color: #363636;  
  padding: 1rem .5rem;  
 }  
 a {  
  color: #dc717d;  
  text-decoration: none;  
 }  
 img {  
  max-width: 100%;  
 }  
 /* --------------------------------   
 Main components   
 -------------------------------- */  
 header {  
  position: relative;  
  height: 160px;  
  line-height: 160px;  
  text-align: center;  
 }  
 header h1 {  
  font-size: 22px;  
  font-size: 1.375rem;  
  color: #ffffff;  
  font-weight: 300;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
 }  
 @media only screen and (min-width: 768px) {  
  header {  
   height: 6em;  
   line-height: 1.6;  
  }  
  header h1 {  
   font-size: 32px;  
   font-size: 2rem;  
  }  
 }  
 .cd-image-container {  
  position: relative;  
  width: 90%;  
  max-width: 768px;  
  margin: 0em auto;  
 }  
 .cd-image-container img {  
  display: block;  
 }  
 .cd-image-label {  
  position: absolute;  
  font-weight: 500;  
  letter-spacing: 1px;  
  top: 0;  
  right: 0;  
  color: #ffffff;  
  padding: 1em;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  opacity: 0;  
  -webkit-transform: translateY(20px);  
  -moz-transform: translateY(20px);  
  -ms-transform: translateY(20px);  
  -o-transform: translateY(20px);  
  transform: translateY(20px);  
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;  
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;  
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;  
 }  
 .cd-image-label.is-hidden {  
  visibility: hidden;  
 }  
 .is-visible .cd-image-label {  
  opacity: 1;  
  -webkit-transform: translateY(0);  
  -moz-transform: translateY(0);  
  -ms-transform: translateY(0);  
  -o-transform: translateY(0);  
  transform: translateY(0);  
 }  
 .cd-resize-img {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 0;  
  height: 100%;  
  overflow: hidden;  
  /* Force Hardware Acceleration in WebKit */  
  -webkit-transform: translateZ(0);  
  -moz-transform: translateZ(0);  
  -ms-transform: translateZ(0);  
  -o-transform: translateZ(0);  
  transform: translateZ(0);  
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;  
 }  
 .cd-resize-img img {  
  position: absolute;  
  left: 0;  
  top: 0;  
  display: block;  
  height: 100%;  
  width: auto;  
  max-width: none;  
 }  
 .cd-resize-img .cd-image-label {  
  right: auto;  
  left: 0;  
 }  
 .is-visible .cd-resize-img {  
  width: 50%;  
  /* bounce in animation of the modified image */  
  -webkit-animation: cd-bounce-in 0.7s;  
  -moz-animation: cd-bounce-in 0.7s;  
  animation: cd-bounce-in 0.7s;  
 }  
 @-webkit-keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 @-moz-keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 @keyframes cd-bounce-in {  
  0% {  
   width: 0;  
  }  
  60% {  
   width: 55%;  
  }  
  100% {  
   width: 50%;  
  }  
 }  
 .cd-handle {  
  position: absolute;  
  height: 44px;  
  width: 44px;  
  /* center the element */  
  left: 50%;  
  top: 50%;  
  margin-left: -22px;  
  margin-top: -22px;  
  border-radius: 50%;  
  background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center;  
  cursor: move;  
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);  
  opacity: 0;  
  -webkit-transform: translate3d(0, 0, 0) scale(0);  
  -moz-transform: translate3d(0, 0, 0) scale(0);  
  -ms-transform: translate3d(0, 0, 0) scale(0);  
  -o-transform: translate3d(0, 0, 0) scale(0);  
  transform: translate3d(0, 0, 0) scale(0);  
 }  
 .cd-handle.draggable {  
  /* change background color when element is active */  
  background-color: #445b7c;  
 }  
 .is-visible .cd-handle {  
  opacity: 1;  
  -webkit-transform: translate3d(0, 0, 0) scale(1);  
  -moz-transform: translate3d(0, 0, 0) scale(1);  
  -ms-transform: translate3d(0, 0, 0) scale(1);  
  -o-transform: translate3d(0, 0, 0) scale(1);  
  transform: translate3d(0, 0, 0) scale(1);  
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;  
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;  
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;  
 }  
 footer {  
  padding: 2rem;  
 }  
 footer p {  
  font-size: 90%;  
  font-weight: 300;  
  text-align: center;  
 }
jQuery(document).ready(function($){  
  var dragging = false,  
    scrolling = false,  
    resizing = false;  
  //cache jQuery objects  
  var imageComparisonContainers = $('.cd-image-container');  
  //check if the .cd-image-container is in the viewport   
  //if yes, animate it  
  checkPosition(imageComparisonContainers);  
  $(window).on('scroll', function(){  
    if( !scrolling) {  
      scrolling = true;  
      ( !window.requestAnimationFrame )  
        ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)  
        : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});  
    }  
  });  
  //make the .cd-handle element draggable and modify .cd-resize-img width according to its position  
  imageComparisonContainers.each(function(){  
    var actual = $(this);  
    drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));  
  });  
  //upadate images label visibility  
  $(window).on('resize', function(){  
    if( !resizing) {  
      resizing = true;  
      ( !window.requestAnimationFrame )  
        ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)  
        : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});  
    }  
  });  
  function checkPosition(container) {  
    container.each(function(){  
      var actualContainer = $(this);  
      if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {  
        actualContainer.addClass('is-visible');  
      }  
    });  
    scrolling = false;  
  }  
  function checkLabel(container) {  
    container.each(function(){  
      var actual = $(this);  
      updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');  
      updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');  
    });  
    resizing = false;  
  }  
  //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/  
  function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {  
    dragElement.on("mousedown vmousedown", function(e) {  
      dragElement.addClass('draggable');  
      resizeElement.addClass('resizable');  
      var dragWidth = dragElement.outerWidth(),  
        xPosition = dragElement.offset().left + dragWidth - e.pageX,  
        containerOffset = container.offset().left,  
        containerWidth = container.outerWidth(),  
        minLeft = containerOffset + 10,  
        maxLeft = containerOffset + containerWidth - dragWidth - 10;  
      dragElement.parents().on("mousemove vmousemove", function(e) {  
        if( !dragging) {  
          dragging = true;  
          ( !window.requestAnimationFrame )  
            ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)  
            : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});  
        }  
      }).on("mouseup vmouseup", function(e){  
        dragElement.removeClass('draggable');  
        resizeElement.removeClass('resizable');  
      });  
      e.preventDefault();  
    }).on("mouseup vmouseup", function(e) {  
      dragElement.removeClass('draggable');  
      resizeElement.removeClass('resizable');  
    });  
  }  
  function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {  
    var leftValue = e.pageX + xPosition - dragWidth;    
    //constrain the draggable element to move inside his container  
    if(leftValue < minLeft ) {  
      leftValue = minLeft;  
    } else if ( leftValue > maxLeft) {  
      leftValue = maxLeft;  
    }  
    var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';  
    $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {  
      $(this).removeClass('draggable');  
      resizeElement.removeClass('resizable');  
    });  
    $('.resizable').css('width', widthValue);   
    updateLabel(labelResizeElement, resizeElement, 'left');  
    updateLabel(labelContainer, resizeElement, 'right');  
    dragging = false;  
  }  
  function updateLabel(label, resizeElement, position) {  
    if(position == 'left') {  
      ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;  
    } else {  
      ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;  
    }  
  }  
});
728x90
LIST

'JQuery' 카테고리의 다른 글

Sumoselect  (0) 2022.07.02
Sticky Note  (0) 2022.06.21
Virtual Keyboard  (0) 2022.06.01
Sly.js example Naver App Menu(수평 스크롤)  (0) 2022.05.27
SWIPE.js jQuery  (0) 2022.05.23
'JQuery' Related Articles more