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__card
The 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--reject
Is the layer when moving the image to the left,m--like
Is the layer when the image is moved to the right,demo__card__drag
Is 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 listenmousedown
Andtouchstart
And.inactive
To 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(); }); }); |