ホームページ > 記事 > ウェブフロントエンド > CSS3で全画面切り替え効果を実現_html/css_WEB-ITnose
CSS3で全画面切り替え効果を実現_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:001141ブラウズ
いつも全画面スクロール効果を使った広告やウェブサイトをよく見かけますが、それを見るといつもムズムズするので、自分も実装したいと思っています。最近CSS3のアニメーション効果を知ったので、CSS3を使って全画面切り替えをしてみました。
ページ構造
図に示すように、実装のアイデアは一般的な方法と似ています
各セクションはコンテンツのページであり、そのサイズは画面いっぱいに表示されます (赤い領域)。コンテナーは複数のセクションで構成されます。ページ切り替えの効果を得るために、コンテナの位置を変更します。コンテナが下がるとページは上に移動するように見え、コンテナが上がるとページは下に移動するように見えます。
HTML 構造は次のとおりです:
<!DOCTYPE html><html><head lang="ch"> <meta charset="UTF-8"> <!--适配移动端--> <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; /**隐藏滚动条**/ overflow: hidden; } #container, .section { height: 100%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container"> <div class="section" id="section0"></div> <div class="section" id="section1"></div> <div class="section" id="section2"></div> <div class="section" id="section3"></div></div></body></html> イベント監視
現時点では、ウィンドウには 1 ページのみが表示されており、それにスクロール監視を追加します。これは、Firefox ブラウザーと Firefox 以外のブラウザーでは、スクロール監視のサポートが異なるためです。 Firefox ブラウザの上向きスクロールは -120、下スクロールは 120 ですが、他のブラウザは上に 5、下に -5 であるため、次のように判断する必要があります:
<script src="http://code.jquery.com/jquery-latest.js"></script><script> //当前页面索引 var curIndex = 0; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ } function movePrev(){ } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome } init(); </script> ユーザーが最初のページで上にスクロールするのを防ぐため、最後のページを下にスクロールするには、curIndex を使用します。これは、スクロール中に現在のページのインデックスが監視されることを意味します。もちろん、ページをループでスクロールさせたい場合は、条件制限を変更するだけで済みます。
アニメーションを追加します
アニメーションでは、css3 のtransform属性のtranslate3Dを使用します。次に、ページが切り替わるときにコンテナを1画面の高さ上または1画面の高さ下に移動する必要があります。
translation3D を使用する理由は、アニメーションをより滑らかにするために携帯電話でハードウェア アクセラレーションがオンになっており、x 軸、y 軸、z 軸の変位という 3 つのパラメーターを受け取るためです。たとえば、
transform: tanslate3D(10px, 30px, 0);
変更された JS コードは次のとおりです。
<script> //当前页面索引 var curIndex = 0; //container元素 var container = $("#container"); //页面总数 var sumCount = $(".section").length; //窗体元素 var $window = $(window); //动画时间 var duration = 500; var scrollFunc = function (e) { e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome //设置动画 container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } </script> ページのスクロール時にユーザーがスクロールを続けてリズムを乱すことを防ぐために、時間を使用して強制制御、つまり moveNext を実行できます。スクロール中に movePrev 関数を呼び出すことはできません。 最終的なコードは次のとおりです。
<!DOCTYPE html><html><head lang="ch"> <meta charset="UTF-8"> <meta name=”viewport” content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <style> body, html{ padding: 0; margin: 0; } body, html { height: 100%; overflow: hidden; } #container, .section { height: 100%; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #83af9b; } #section1 { background-color: #764d39; } #section2 { background-color: #ff9000; } #section3 { background-color: #380d31; } </style></head><body><div id="container"> <div class="section" id="section0"></div> <div class="section" id="section1"></div> <div class="section" id="section2"></div> <div class="section" id="section3"></div></div><script src="http://code.jquery.com/jquery-latest.js"></script><script> var curIndex = 0; var container = $("#container"); var sumCount = $(".section").length; var $window = $(window); var duration = 500; //时间控制 var aniTime = 0; var scrollFunc = function (e) { //如果动画还没执行完，则return if(new Date().getTime() < aniTime + duration){ return; } e = e || window.event; var t = 0; if (e.wheelDelta) {//IE/Opera/Chrome t = e.wheelDelta; if (t > 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t < 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } else if (e.detail) {//Firefox t = e.detail; if (t < 0 && curIndex > 0) { //上滚动 movePrev(); } else if (t > 0 && curIndex < sumCount - 1) { //下滚动 moveNext(); } } }; function moveNext(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (++curIndex) * $window.height() + "px, 0)"); } function movePrev(){ //获取动画开始时的时间 aniTime = new Date().getTime(); container.css("transform", "translate3D(0, -" + (--curIndex) * $window.height() + "px, 0)"); } function init(){ /*注册事件*/ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } init(); </script></body></html>
著作権に関する声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。