JQuery ve CSS Kullanarak Görüntü Karşılaştırma (Image Comparison) Slider Yapımı

CSS, JS veya herhangi bir JS kitaplığını kullanarak görüntü karşılaştırma slider (image comparison) nasıl oluşturabiliriz?

JQuery ve CSS Kullanarak Görüntü Karşılaştırma (Image Comparison) Slider Yapımı

Bu yazımızda Görüntü Karşılaştırıcı Slider’ı nasıl oluşturacapınızı öğreneceksiniz.  Temel olarak, iki resimli bir konteyner, kaydırma kolu ve metinlerden oluşan yapıya sahiptir. Konteynerin ortasına bulunan sürüklemek, kayırmak için kaydırma kolu yerleştirilmiştir. Sol tarafta, 'değiştirilmiş' yazan alan değiştirilmiş görüntüyü belirtmektedir, sağ tarafta ise 'orijinal' yazan alan orijinal görüntüyü belirtmektedir. Tutamağı sürükleyip resim üzerinde hareket ettirmeniz durumunda parçanın genişliği kaydırma yönünüze göre artacak veya azalacaktır.

 

jQuery ve CSS kullanarak Görüntü Karşılaştırma Slider yapımını sizlerle paylaşıyorum. Bu görüntü karşılaştırma aracında stil için CSS ve işleyiş için jQuery kullandım, ayrıca jQuery, resim üzerinde yapılan eyleme göre CSS değerlerini değiştirme özelliğine sahitir. Görüntü Karşılaştırıcı Slider eksiksiz bir programdır ve her türlü web sitesinde kullanıma hazır halde tasarlanmıştır. Program içerisinde bulunan görüntüyü değiştirmek için kod içerisinde bulunan blokta değişiklik yapmanız yeterli olacaktır.

 

Görüntü Karşılaştırıcı Slider Önizlemesi

Görüntü Karşılaştırıcı Slider’ın gerçekte nasıl karşılaştırma işlemi yaptığını merak ediyorsanız aşağıda önizlemeyi inceleyebilirsiniz.

 

Görüntü Karşılaştırıcı Slider’ı için 3 dosya oluşturmanız gerekir. HTML için ilk dosya, CSS için ikinci dosya ve JavaScript için üçüncü dosya. HTML için ilk dosya, CSS için ikinci dosya ve JavaScript için üçüncü dosya.

 

1. Adım index.html Adlı Bir HTML Dosyası Oluşturun ve Verilen Kodları Buraya Ekleyin.




  Image Comparison Slider | TechnoWorm.Net   OriginalDeğiştirilmiş

2.Adım style.css Adlı Bir CSS Dosyası Oluşturun ve Verilen Kodları Buraya Ekleyin.

/* Code By TechnoWorm.Net ( https://www.technoworm.net/ ) */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Open Sans", sans-serif;
  color: #445b7c;
  background-color: #445b7c;
}

a {
  color: #dc717d;
  text-decoration: none;
}

img {
  max-width: 100%;
}

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: 240px;
    line-height: 240px;
  }
  header h1 {
    font-size: 32px;
    font-size: 2rem;
  }
}

.image-container {
  position: relative;
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.image-container img {
  display: block;
}
@media only screen and (min-width: 768px) {
  .image-container {
    margin: 4em auto;
  }
}

.image-label {
  position: absolute;
  bottom: 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;
}
.image-label.is-hidden {
  visibility: hidden;
}
.is-visible .image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.resize-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  background: url("https://www.technoworm.net/uploads/images/skynaturemod.jpg") no-repeat left top;
  background-size: auto 100%;
  -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;
}
.resize-image .image-label {
  right: auto;
  left: 0;
}
.is-visible .resize-image {
  width: 50%;
  -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%;
  }
}
.handle {
  position: absolute;
  height: 44px;
  width: 44px;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #dc717d url("https://www.technoworm.net/uploads/images/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);
}
.handle.draggable {
  background-color: #445b7c;
}
.is-visible .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;
}

3.Adım Son function.js Adlı Bir JavaScript Dosyası Oluşturun ve Verilen Kodları Buraya Ekleyin.

// Code By TechnoWorm.Net( https://www.technoworm.net/ )
jQuery(document).ready(function($){
    //check if the .image-container is in the viewport 
    //if yes, animate it
    checkPosition($('.image-container'));
    $(window).on('scroll', function(){
        checkPosition($('.image-container'));
    });
    
    //make the .handle element draggable and modify .resize-image width according to its position
    drags($('.handle'), $('.resize-image'), $('.image-container'), $('.image-label[data-type="original"]'), $('.image-label[data-type="modified"]'));

    //upadate images label visibility
    $(window).on('resize', function(){
        updateLabel($('.image-label[data-type="modified"]'), $('.resize-image'), 'left');
        updateLabel($('.image-label[data-type="original"]'), $('.resize-image'), 'right');
    });
});

function checkPosition(container) {
    if( $(window).scrollTop() + $(window).height()*0.5 > container.offset().top) {
        container.addClass('is-visible');
        //you can uncomment the following line if you don't have other events to bind to the window scroll
        // $(window).off('scroll');
    }
}

//draggable funtionality
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) {
            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;
            }

            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');
            
        }).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 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') ;
    }
}

İşlem Bu Kadar. Artık Görüntü Karşılaştırıcı Slider’ı jQuery ve CSS kullanarak başarıyla oluşturdunuz. Takıldığınız bir nokya veya sorunuz varsa, yorum bırakabilirsiniz.

Tepkiniz Nedir?

like
1
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0