携帯電話APP指スライド切り替え画像特殊効果ソースコードdownload

携帯電話APP指スライド切り替え画像特殊効果ソースコードdownload_jquery

WBOY

リリース： 2016-05-16 15:28:48

オリジナル

1973 人が閲覧しました

これは、指をスライドさせて画像効果を切り替える非常にクールな携帯電話アプリです。このアプリの特殊効果では、携帯電話では指を左右にスライドさせることで写真を切り替えることができ、デスクトップデバイスではマウスを使用して同じ効果を得ることができます。

効果デモソースコードのダウンロード

使用方法

HTML 構造

画像の特殊効果を切り替えるこのモバイル APP の HTML 構造は、ネストされた

の 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 は画像を右に移動するときのレイヤー、demo__card__drag はドラッグレイヤーです。

JavaScript

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 &#63; 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 構造

画像の特殊効果を切り替えるこのモバイル APP の HTML 構造は、ネストされた

の 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 は画像を右に移動するときのレイヤー、demo__card__drag はドラッグレイヤーです。

JavaScript

function pullChange() {
 animating = true;
 deg = pullDeltaX / 10;
 $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
 var opacity = pullDeltaX / 100;
 var rejectOpacity = opacity >= 0 &#63; 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();
 });
});

ログイン後にコピー