소스 코드가 포함된 휴대폰 APP 손가락 슬라이딩 전환 사진 특수 효과 download_jquery

이것은 손가락을 밀어서 사진 효과를 전환할 수 있는 매우 멋진 휴대폰 앱입니다. 이 APP 특수 효과의 경우 사용자는 휴대폰에서 손가락을 좌우로 밀어 사진을 전환할 수 있으며, 데스크톱 장치에서 마우스를 사용해도 동일한 효과를 얻을 수 있습니다.

효과 시연     소스코드 다운로드

사용방법

HTML 구조

사진 특수 효과를 전환하기 위한 이 모바일 앱의 HTML 구조는 중첩된 dc6dce4a544fdca2df29d5ac0ea9906b의 HTML 구조를 채택합니다. 각 사진 카드는 사진, 설명 정보 및 일부 추가 레이어를 포함하는 div.demo__card로 래핑됩니다.

<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는 그림을 왼쪽으로 이동할 때의 레이어이고, m--like는 그림을 오른쪽으로 이동할 때의 레이어이고, deco__card__drag는 드래그 레이어입니다.

자바스크립트

jQuery 코드에서는 pullChange() 함수를 사용하여 왼쪽 및 오른쪽 슬라이딩 레이어의 회전 각도와 투명도를 설정합니다. release() 함수는 사용자가 손가락을 왼쪽으로 밀었는지 오른쪽으로 밀었는지 결정하고 이러한 작업에 대한 DOM 요소에 해당 클래스를 추가하는 데 사용됩니다.

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 &#63; 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);
}; 

마지막으로 mousedown 및 touchstart 이벤트를 수신하고 비활성 카드 요소에 대해 카드 전환 작업을 수행합니다.

사용방법

HTML 구조

사진 특수 효과를 전환하기 위한 이 모바일 앱의 HTML 구조는 중첩된 dc6dce4a544fdca2df29d5ac0ea9906b의 HTML 구조를 채택합니다. 각 사진 카드는 사진, 설명 정보 및 일부 추가 레이어를 포함하는 div.demo__card로 래핑됩니다.

<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는 그림을 왼쪽으로 이동할 때의 레이어이고, m--like는 그림을 오른쪽으로 이동할 때의 레이어이고, deco__card__drag는 드래그 레이어입니다.

자바스크립트

jQuery 코드에서는 pullChange() 함수를 사용하여 왼쪽 및 오른쪽 슬라이딩 레이어의 회전 각도와 투명도를 설정합니다. release() 함수는 사용자가 손가락을 왼쪽으로 밀었는지 오른쪽으로 밀었는지 결정하고 이러한 작업에 대한 DOM 요소에 해당 클래스를 추가하는 데 사용됩니다.

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 &#63; 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);
};

마지막으로 mousedown 및 touchstart 이벤트를 수신하고 비활성 카드 요소에 대해 카드 전환 작업을 수행합니다.

$(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();
 });
});