CSS3で全畫面切り替え効果を?qū)g現(xiàn)_html/css_WEB-ITnose
Jun 24, 2016 am 11:42 AM
いつも全畫面スクロール効果を使った広告やウェブサイトをよく見かけますが、それを見るといつもムズムズするので、自分も実裝したいと思っています。最近CSS3のアニメーション効果を知ったので、CSS3を使って全畫面切り替えをしてみました。
ページ構(gòu)造
図に示すように、実裝のアイデアは一般的な方法と似ています
各セクションはコンテンツのページであり、そのサイズは畫面いっぱいに表示されます (赤い領(lǐng)域)。コンテナーは複數(shù)のセクションで構(gòu)成されます。ページ切り替えの効果を得るために、コンテナの位置を変更します。コンテナが下がるとページは上に移動するように見え、コンテナが上がるとページは下に移動するように見えます。
HTML 構(gòu)造は次のとおりです:
<!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> イベント監(jiān)視
現(xiàn)時點では、ウィンドウには 1 ページのみが表示されており、それにスクロール監(jiān)視を追加します。これは、Firefox ブラウザーと Firefox 以外のブラウザーでは、スクロール監(jiān)視のサポートが異なるためです。 Firefox ブラウザの上向きスクロールは -120、下スクロールは 120 ですが、他のブラウザは上に 5、下に -5 であるため、次のように判斷する必要があります:
<script src="http://code.jquery.com/jquery-latest.js"></script><script> //當(dāng)前頁面索引 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 を使用します。これは、スクロール中に現(xiàn)在のページのインデックスが監(jiān)視されることを意味します。もちろん、ページをループでスクロールさせたい場合は、條件制限を変更するだけで済みます。
アニメーションを追加します
アニメーションでは、css3 のtransform屬性のtranslate3Dを使用します。次に、ページが切り替わるときにコンテナを1畫面の高さ上または1畫面の高さ下に移動する必要があります。
translation3D を使用する理由は、アニメーションをより滑らかにするために攜帯電話でハードウェア アクセラレーションがオンになっており、x 軸、y 軸、z 軸の変位という 3 つのパラメーターを受け取るためです。たとえば、
transform: tanslate3D(10px, 30px, 0);
変更された JS コードは次のとおりです。
<script> //當(dāng)前頁面索引 var curIndex = 0; //container元素 var container = $("#container"); //頁面總數(shù) 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 //設(shè)置動畫 container.css({ "transition": "all 0.5s", "-moz-transition": "all 0.5s", "-webkit-transition": "all 0.5s" }); } </script> ページのスクロール時にユーザーがスクロールを続けてリズムを亂すことを防ぐために、時間を使用して強制制御、つまり moveNext を?qū)g行できます。スクロール中に movePrev 関數(shù)を呼び出すことはできません。 最終的なコードは次のとおりです。
<!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) { //如果動畫還沒執(zhí)行完，則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>
著作権に関する聲明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強化します。 4.一般的な問題に注意してください：無効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
HTMLヘッド要素內(nèi)のドキュメントメタデータの構(gòu)成
Jul 09, 2025 am 02:30 AM
htmlheadのメタデータは、SEO、ソーシャル共有、ブラウザの動作にとって重要です。 1.ページのタイトルと説明を設(shè)定し、使用して簡潔で一意に保ちます。 2.オープングラフとツイッターのカード情報を追加してソーシャル共有効果を最適化し、畫像サイズに注意を払い、デバッグツールを使用してテストします。 3.文字セットとビューポート設(shè)定を定義して、多言語サポートがモバイル端末に適合していることを確認(rèn)します。 4.著者の著作権、ロボット制御、および標(biāo)準(zhǔn)的な防止コンテンツなどのオプションのタグも合理的に構(gòu)成する必要があります。
2025年の初心者向けの最高のHTMLチュートリアル
Jul 08, 2025 am 12:25 AM
tolearnhtmlin2025、chooseatutorialthatiatutorialthatishands-onpracticewithmodernstandardescssandjavascriptbasics.1.priolitizeds-onlealningswith-by-stepprojectslike by by-dikebuildinging ofersalpersalblement.2.enturetcocrovernhternhtermovernedernhtermoternedernedの
メールテンプレートチュートリアル用のHTML
Jul 10, 2025 pm 02:01 PM
互換性の高いHTMLメールテンプレートを作成する方法は？まず、Div Flexまたはグリッドレイアウトの使用を避けるために、テーブルで構(gòu)造を構(gòu)築する必要があります。第二に、すべてのスタイルにインラインドする必要があり、外部CSSに依存することはできません。次に、畫像をAlt説明で追加し、パブリックURLを使用する必要があります。ボタンは、背景色のテーブルまたはTDでシミュレートする必要があります。最後に、複數(shù)のクライアントの詳細(xì)をテストして調(diào)整する必要があります。
HTMLフィギュアとFigcaption要素を使用して、キャプションを畫像やメディアに関連付ける方法は？
Jul 07, 2025 am 02:30 AM
HTML合計を使用すると、直感的でセマンティックな明確さが可能になり、畫像またはメディアにキャプションテキストを追加できます。 1。寫真、ビデオ、コードブロックなどの獨立したメディアコンテンツをラップするために使用されます。 2。説明テキストとして配置され、メディアの上または下に配置できます。 3.ページ構(gòu)造の明確さを改善するだけでなく、アクセシビリティとSEO効果も向上します。 4.それを使用する場合、虐待を避けるために注意を払い、通常の裝飾的な寫真ではなく、説明を強調(diào)し、伴う必要があるコンテンツに適用する必要があります。 5.無視できないalt屬性。これはfigcaptionとは異なります。 6.フィマは柔軟で、必要に応じて図の上または下部に配置できます。これらの2つのタグを正しく使用すると、セマンティックで理解しやすいWebコンテンツの構(gòu)築に役立ちます。
サーバーなしでHTMLでフォームの送信を処理する方法は？
Jul 09, 2025 am 01:14 AM
バックエンドサーバーがない場合、HTMLフォームの送信は、フロントエンドテクノロジーまたはサードパーティサービスを通じて処理できます。特定の方法には次のものが含まれます。1。javaScriptを使用してフォーム送信を傍受して、入力検証とユーザーフィードバックを達成しますが、データは持続しません。 2. Formspreeなどのサードパーティサーバーレスフォームサービスを使用してデータを収集し、電子メール通知とリダイレクト機能を提供します。 3. LocalStorageを使用して、ユーザーの好みを保存したり、単一ページのアプリケーションステータスの管理に適した一時的なクライアントデータを保存しますが、機密情報の長期的なストレージには適していません。
HTMLで最も一般的に使用されるグローバル屬性は何ですか？
Jul 10, 2025 am 10:58 AM
クラス、ID、スタイル、データ、およびタイトルは、HTMLで最も一般的に使用されるグローバル屬性です。クラスは、スタイル設(shè)定とJavaScript操作を容易にするために、1つ以上のクラス名を指定するために使用されます。 IDは、アンカージャンプとJavaScriptコントロールに適した要素の一意の識別子を提供します。スタイルを使用すると、インラインスタイルを追加できます。一時的なデバッグに適していますが、大規(guī)模な使用にはお勧めしません。データプロパティは、フロントエンドとバックエンドの相互作用に便利なカスタムデータの保存に使用されます。タイトルはマウスオーバープロンプトを追加するために使用されますが、そのスタイルと動作はブラウザによって制限されます。これらの屬性の合理的な選択は、開発効率とユーザーエクスペリエンスを改善できます。
HTMLの畫像のネイティブレイジーロードを?qū)g裝します
Jul 12, 2025 am 12:48 AM
ネイティブLazyロードは、タグにロード= "lazy"屬性を追加することにより、寫真の怠zyなロードを可能にする組み込みブラウザー機能です。 1. JavaScriptまたはサードパーティライブラリを必要とせず、HTMLで直接使用されます。 2。ページの下の最初の畫面に表示されない寫真、畫像ギャラリーはアドオンをスクロールし、大規(guī)模な寫真リソースに適しています。 3.最初の畫面またはディスプレイを備えた寫真には適していません。 4。それを使用する場合、レイアウトジッターを避けるために適切なプレースホルダーを設(shè)定する必要があります。 5。SRCSETおよびサイズの屬性と組み合わせて、レスポンシブな畫像の読み込みを最適化する必要があります。 6。互換性の問題を考慮する必要があります。一部の古いブラウザはそれをサポートしていません。これらは、機能検出を通じて使用し、JavaScriptソリューションと組み合わせることができます。
