CSS/JSを使用してモバイルデバイスにスライドアップエフェクトを作成する

Question

達成する必要があることは、矢印からページを上にスワイプすると、ページが上にスライドし、ユーザーが別のページにリダイレクトされます。イントロ）。

私は現在、スライダーを使用する作業の方法を持っている：

質問です：どのように私は実際にページが時にスライダー上がるように見える効果を作るのですか使用されている？

Answer 1

あなたが見るswipe-recogniserHammer.js

var swipe = new Hammer.Swipe(); 
swipe.recognizeWith(swipeup); 

を使用することができます。

スワイプアップジェスチャーを認識したら、divをtranslateに、CSSを使用してアニメーション化できます。

div { 
    -ms-transform: translate(50px,100px); /* IE 9 */ 
    -webkit-transform: translate(50px,100px); /* Safari */ 
    transform: translate(50px,100px); 
} 

はそれを行うにはさまざまな方法がありますthis

Answer 2

を参照してください。これは、「touchstart」と「touchend」イベントで達成することができるスワイプ

を検出

1：私は、プラグイン（うまくjQueryのを除く）なしでそれを行うことを好むように、ここでこれを達成するための私の方法です。タッチスタートイベントが発生すると、タッチ位置の座標が取得されます。タッチが終わったら、もう一度それを取得し、距離を比較してください。

このトピックについては、多くの役立つ記事があります。

hereまたはhereまたは単に "JavaScriptのスワイプを" Googleの

ダウン

2.Scrollは、さまざまな方法で行うことができますが、あなたが望むものをアニメーションに依存します。 "滑らかなスクロールjavascript"のGoogle。下記のリンクをチェックし、効果TouchSwipeの詳細については
のためのjQueryでjQuery touchSwipeとslideUpを使用しCodepen http://codepen.io/keephacking/pen/RaYxpm
を作った

function afterscrolling(){ 
     $('html, body').animate({ 
      scrollTop: $(YOUR_ELEMENT).offset().top 
     }, 500); 
     return false; 
}; 

Answer 3

：あなたはjQueryのを使用している場合、これが最も簡単な方法かもしれません。 https://github.com/mattbryson/TouchSwipe-Jquery-Plugin