ホームページ > 記事 > ウェブフロントエンド > モバイル Web スライド スクリーン フレーム共有_html/css_WEB-ITnose
モバイル Web スライド スクリーン フレーム共有_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:261205ブラウズ
現在、H5 ページ、特に WeChat ブラウザ ウィンドウで非常に人気のあるスライディング スクリーン効果は、当初、フロントエンドの同僚と協力して作成するのに多大な費用がかかりました。スライディングスクリーン効果 かなり時間がかかり、ブラウザ互換性の点で落とし穴が多かったので思い切ってフレームワークを採用しました。
私が初めて触れたのは、iscroll4.js フレームワークでした。結局のところ、このフレームワークは比較的成熟しており、安心して使用できます。残念ながら、Android 2.3 のスクロール効果との互換性はあまり良くありません。もう 1 つの欠点は、このフレームワークには 25,000 のコードがあり、スライディング スクリーン効果のために 25,000 のコードをロードするのはコスト効率が悪いということです。
その後、より簡単な 2 つのフレームワーク (軽量でバグが少ない) を見つけました。困っている学生はここを見逃さないでください。(一部の学生は、「なぜ左右のスワイプを使用しないのかと尋ねます。理由の 1 つは、WeChat ブラウザで画面を右にスライドすると、ユーザーが誤って現在のページを終了する可能性があることです)
以下に 2 つの例を示します」上下のスワイプの例 ~
例 1、単純な上下のスワイプ
例 2、スライドにアニメーションを付けた単純な上下のスワイプ~
スライドをデザインするには、通常 2 つの方法があります。スクリーンフレーム
親コンテナメソッドの制御
親要素の変換を制御してページを上下にスライドさせます:translateY、margin-top、またはtopの値。各ディスプレイスメントは現在のページの高さです~
ここではスリップフレームワークが使用されています。ライブラリのサイズは5.75Kです。非常に軽量で、プロジェクトで使用できます~
スリップフレームワークのページスタイルは次のとおりです。カスタマイズしましたが、ここに簡単に書いてみました~
(フレームワークを使用しない場合は、transform:translate(X,Y)を使用することをお勧めします。まず、transform:translate(X,Y)を使用すると、高パフォーマンスのアニメーションを設計できます。 android2.3+システムと互換性があります。transform:translateYはandroid2.3システムと互換性がありません)
ios5+およびandroid2.3+システムと互換性があり、スライディングスクリーン機能は応答性があります~単純なスライディングスクリーンをデザインするだけでよい場合効果、検討してみてください~
Slip フレームワーク 詳しい機能はこちら https://github.com/binnng/ Slip.js
コード:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>slip</title><style>*{padding: 0;margin: 0;}/*框架*/.swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}.swipe{position:absolute;width:100%;}.swipe-box{width: 100%;overflow: hidden;}</style></head><body> <div class="swipe-wrap" id="slip"> <article class="swipe"> <div class="swipe-box" style=""> 第1屏 </div> <div class="swipe-box" style=""> 第2屏 </div> <div class="swipe-box" style=""> 第3屏 </div> <div class="swipe-box" style=""> 第4屏 </div> </article></div></body><script type="text/javascript" src="js/slip.min.js"></script><script type="text/javascript">var container = document.getElementById('slip');var pages = document.querySelectorAll('.swipe-box');var slip = Slip(container, 'y').webapp(pages);</script></html>
デモをダウンロード
Control sub -containerメソッド
メソッドは、子要素の1つだけを表示し、他の要素を非表示にします。画面をスライドすると、現在の要素が非表示になり、次のピア要素が表示されます~
fullPageフレームワーク。ここで使用されているライブラリのサイズは7.69K~
fullPageフレームワークのページスタイルはカスタマイズする必要はなく、すでに記述されています
ios5+、android2.3+システムと互換性があり、そのスライディングスクリーン機能、効果は比較的豊富で、ズーム、回転、透明度、自動スライディング スクリーン、その他のアニメーション効果をサポートしています~素晴らしいスライディング スクリーン効果をデザインする必要がある場合は、検討してください~
fullPage フレームワークの詳細な機能については、ここをクリックしてください https:/ /github .com/powy1993/fullpage
コード:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>fullPage</title><style>*{padding: 0;margin: 0;}/*框架*/body{overflow: hidden;}.page-wrap{overflow:hidden}.page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.contain{width:100%;height:100%;display:none;position:relative;z-index:0}.current .contain,.slide .contain{display:block}.current{display:block;z-index:1}.slide{display:block;z-index:2}.swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}</style></head><!--[if lte IE 7]> <body scroll="no"> <![endif]--><!--[if gt IE 7]><!--> <body> <!--<![endif]--><!-- 框架[[ --><div id="pageContain" class="page-wrap"> <div class="page page1 current" style=""> <div class="contain"> 第一屏 </div> </div> <div class="page page2" style=""> <div class="contain"> 第二屏 </div> </div> <div class="page page3" style=""> <div class="contain"> 第三屏 </div> </div> <div class="page page4" style=""> <div class="contain"> 第四屏 </div> </div></div><!-- 框架]] --></body><script type="text/javascript" src="js/fullPage.min.js"></script><script type="text/javascript">//禁止窗口的默认滑动document.ontouchmove = function(e){ e.preventDefault();}//框架var runPage, interval, autoPlay;autoPlay = function(to) { clearTimeout(interval); interval = setTimeout(function() { runPage.go(to); }, 5000);}runPage = new FullPage({ id : 'pageContain', // id of contain slideTime : 800, // time of slide continuous : true, // create an infinite feel with no endpoints effect : { // slide effect transform : { translate : 'Y', // 'X'|'Y'|'XY'|'none' scale : [1, 1], // [scalefrom, scaleto] rotate : [0, 0] // [rotatefrom, rotateto] }, opacity : [0, 1] // [opacityfrom, opacityto] }, mode : 'wheel,touch', // mode of fullpage easing : 'ease', // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] ) // callback : function(index, thisPage) { // index = index + 1 > 3 ? 0 : index + 1; // autoPlay(index); // }});// interval = setTimeout(function() {// runPage.go(runPage.thisPage() + 1);// }, 5000);</script></html>
デモをダウンロード
White Oak から転載: