Mobile phone APP slide finger to switch image effects,

Mobile phone APP slide finger to switch image effects,

This is a very cool mobile phone APP that uses slide fingers to switch between image effects. In mobile phones, users can slide between the left and right of their fingers to switch between pictures. The same effect can be achieved through the mouse on desktop devices.

Download Online Preview source code

Method of use: HTML Structure

This mobile phone APP switches the HTML structure of image effects using nesting<div>The HTML structure of each image card is enclosed indiv.demo__cardThe image, description, and some additional layers are placed.

123456789101112

<div class="demo__card">  <div class="demo__card__top brown">    <div class="demo__card__img"></div>    <p class="demo__card__name">Hungry cat</p>  </div>  <div class="demo__card__btm">    <p class="demo__card__we">Whatever</p>  </div>  <div class="demo__card__choice m--reject"></div>  <div class="demo__card__choice m--like"></div>  <div class="demo__card__drag"></div></div>

m--rejectIs the layer when moving the image to the left,m--likeIs the layer when the image is moved to the right,demo__card__dragIs the drag layer.

JavaScript

In jQuery code,pullChange()The function is used to set the Rotation Angle and transparency of the left and right sliding layers.release()The function is used to determine whether the user slides his finger left or right and adds the corresponding class to the DOM element for these actions.

12345678910111213141516171819202122232425262728293031323334353637

function pullChange() {    animating = true;    deg = pullDeltaX / 10;    $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');    var opacity = pullDeltaX / 100;    var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);    var likeOpacity = opacity <= 0 ? 0 : opacity;    $cardReject.css('opacity', rejectOpacity);    $cardLike.css('opacity', likeOpacity);};function release() {    if (pullDeltaX >= decisionVal) {        $card.addClass('to-right');    } else if (pullDeltaX <= -decisionVal) {        $card.addClass('to-left');    }    if (Math.abs(pullDeltaX) >= decisionVal) {        $card.addClass('inactive');        setTimeout(function () {            $card.addClass('below').removeClass('inactive to-left to-right');            cardsCounter++;            if (cardsCounter === numOfCards) {                cardsCounter = 0;                $('.demo__card').removeClass('below');            }        }, 300);    }    if (Math.abs(pullDeltaX) < decisionVal) {        $card.addClass('reset');    }    setTimeout(function () {        $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');        pullDeltaX = 0;        animating = false;    }, 300);};

Last listenmousedownAndtouchstartAnd.inactiveTo switch the card.

123456789101112131415161718192021

$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {    if (animating)        return;    $card = $(this);    $cardReject = $('.demo__card__choice.m--reject', $card);    $cardLike = $('.demo__card__choice.m--like', $card);    var startX = e.pageX || e.originalEvent.touches[0].pageX;    $(document).on('mousemove touchmove', function (e) {        var x = e.pageX || e.originalEvent.touches[0].pageX;        pullDeltaX = x - startX;        if (!pullDeltaX)            return;        pullChange();    });    $(document).on('mouseup touchend', function () {        $(document).off('mousemove touchmove mouseup touchend');        if (!pullDeltaX)            return;        release();    });});