金のフレーズ・銀のフレーズ。つくったもの脱jQueryマウスホイールで切り替わる全画面表示のコンテンツをつくってみました。マウスホイールに反応して、次のページがフェードインしてくるようにしています。スマホの場合は上下のフリックで切り替わるようにしました。デモをご確認ください。page10">10</div>10個のコンテンツを用意しました。いうクラスを付け外しすることで、コンテンツを切り替えます。付けておき、表示させておきます。各コンテンツのスタイルを指定。幅・高さを画面いっぱいに。しておき、あらかじめ非表示とします。入れ、フェードインのアニメーションするように。付け外しすることでコンテンツを入れ替えます。showクラスを付与して表示}});}スマホの場合は上下のフリックで、PCの場合はマウスホイールで反応させます。スマホはフリックでまずはスマホの場合。タッチを開始した位置を記録。タッチして移動した位置を記録。タッチが離れたときに、touchstart(タッチの開始位置)からtouchmove(タッチして移動した位置)を引き算。上方向に動いたらcountの数値をプラス、下方向に動いたらマイナス。付与して表示させます。効いているので、フェードインのアニメーションになります。タッチを開始した時点で、touchstart(タッチを開始した位置)と一緒に、touchmove(タッチして移動した位置)にもタッチを開始した位置を代入しておきます。値が残ってしまい、正しく動いてくれません。PC時のホイールでの制御wheelイベントで、マウスホイールの動きを取得。event.deltaYの移動距離が上方向か下方向かで、countの値とプラスもしくはマイナス。付与して表示させます。PCホイール取得時のポイント何も気にせずやってしまうと、マウスホイールをぐりぐりっとたくさん動かしたときに、countの値をたくさん変化してしまいます。一回目のホイールの動きだけを検知しするようにします。時だけホイールが反応するようにします。