この記事では、全画面スクロール効果を実現するための fullPage.js と CSS3 について詳しく紹介します。興味のある方は参考にしてください。
まず、fullpage について説明します。 jquery このプラグインは、マウスを上下にスライドさせると、自動的に前の画面または次の画面に切り替わることを実現するために使用されます。これは、確かにいくつかのハイエンドエフェクトを作成するための優れたプラグインです。まず、基本的なレンダリングを示します。
ページが表示されると、2番目の画面の3つの写真が下から上に正しい位置に表示されます。
3番目の画面の3つの画像は、ページが表示されるときに左から右に正しい位置に拡大されます。
4番目の画面の3つの写真は、ページが表示されたときに中央から両側に正しい位置に拡大されます。
ステップ 1: Fullpage には CSS と JS が含まれており、それらをインポートします。
<script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script> <link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css"> <script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>
2 番目のステップ: HTML で適切な要素を作成する:
<p class = "main"> <p class="section page1"> <img src="/static/imghwm/default1.png" data-src="./images/page1.png" class="lazy" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <p class="section page2"> <p class = "list"> <img src = "./images/page2_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page2_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page2_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <img class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <p class="section page3"> <p class = "list"> <img src = "./images/page3_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page3_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page3_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <img class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <p class="section page4"> <p class = "list"> <img src = "./images/page4_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page4_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img src = "./images/page4_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> <img class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > <img class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" > </p> </p> <p id = "audioBox"> <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio> </p>には、4 つの画面のコンテンツと、音楽を再生するためのオーディオ要素が含まれています。
ステップ 3: fullpage の js を使用して各画面の背景色を実装し、js を使用して音楽を一時停止します
//1.fullpage,由于有四屏,其颜色也一样 $(".main").fullpage({ sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b'] }); //2.控制音频的播放 var audioBox = document.getElementById('audioBox'); var audio = document.getElementById("audio"); audioBox.onclick = function(){ if(audio.paused){ audio.play(); } else { audio.pause(); } }
ステップ 4: CSS を使用してレイアウト:
<style type="text/css"> *{ margin: 0; padding:0; } //设置背景音乐的图标 #audioBox{ width: 45px; height: 45px; position: absolute; background: url(./images/music_on.png) no-repeat center; border-radius: 22px; top: 5%; right: 3%; cursor: pointer; } //让每屏超出的都自动隐藏 .section{ overflow: hidden; } /*设置第一屏的图片,因为第一屏也只有一个图片*/ .page1 img{ width: 50%; margin-left: 30%; } /*从第二屏开始都包含一个class=list的元素块,设置其距离左侧的距离*/ [class *= "page"] .list{ margin-left: 5%; } /*让左边的图片的宽度都为240px*/ [class *= "page"] .list img{ width: 240px; } /*利用属性选择器,选出所有页的背景图片*/ [class *= "page"] .bg{ position: absolute; bottom: 5%; right: 5%; width: 30%; } /*利用属性选择器,选择出所有页的文字图片*/ [class *= "page"] .text{ position: absolute; top: 10%; right: 5%; }4 番目のステップを通過した後の基本的な効果は完成しましたが、最後の点は、4画面の絵に
アニメーション効果が実装されていないことです。
ステップ 5: アニメーション効果を実現します。
アイデア: 不透明度属性を変更して透明度を変更し、トランジションと組み合わせてフェードイン効果を実現します。
.page1 img{ opacity: 0; /*初始状态为全透明*/ /*加上供应商前缀,持续时间为1.5s*/ -moz-transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*当第一页显示的时候触发,当第一页时就会自动加上active类*/ .page1.active img{ opacity: 1; }
3. 2 番目の画面のアニメーションを実装します。ページが表示されたら、ウィンドウを下から上にスライドさせます。 中心的なアイデア: trans
form:translateYとtransitionを使用して実装します。
translateY translation
4. 3番目の画面のアニメーションを実現します
この画面上の2つの画像の初期位置が大きく異なるので、一番左の画像に重ね合わせて、これら2つの画像にそれぞれtranslateXを設定します/*动画的完成时间为1s,初始位置三个图片都处于向下移动到1000像素,即移出屏幕外。*/
.page2 .list img{
transition:1s;
transform: translateY(1000px);
}
/*当第二屏触发时,图片回到原始位置*/
.page2.active .list img{
transform:translateY(0px);
}
/*利用结构化伪类找到每一个图片并设置延时,为了使动画更灵活*/
.page2 .list img:nth-child(1){
transition-delay: 0.5s;
}
.page2 .list img:nth-child(2){
transition-delay: 0.8s;
}
.page2 .list img:nth-child(3){
transition-delay: 1s;
}
5. 5番目の画面のアニメーションを設定します。
5番目の画面のアニメーションは、左側の3枚の絵が最初に中央の絵に重なって、トリガーされると元の位置に戻るというものです。
① 上記の考え方に従って、tanslateX を使用することで実現できます。.page .list img{ /设置动画持续时间为1s,动画开始时延迟0.5s/ transition: 1s 0.5s; }② css3 のアニメーションプロパティを使用することもできます:
keyframes
.page .list img:nth-child(2){ /向左移动了250px刚好与第一个重叠/ transform:translateX(-250px); } .page .list img:nth-child(3){ /向左移动了500px刚好与第一个重叠/ transform:translateX(-500px); } /设置触发时的动画,让所有的img归位/ .page3.active .list img{ transform:translateX(0px); }
キーフレームのパラメータについては、マニュアルを確認して慣れてください。
.page4 .list img{ transition: 1s 0.5s; } /*设置第一个和第三个的初始位置处于中间的位置上*/ .page4 .list img:nth-child(1){ transform:translateX(250px); } .page4 .list img:nth-child(3){ transform:translateX(-250px); } /*触发时归位*/ .page4.active .list img{ transform:translateX(0px); }【関連推奨事項】1.
無料CSSオンラインビデオチュートリアル
2.php.cn Dugu Jiijian (2)-cssビデオチュートリアル
以上がCSS3+fullPage.js は全画面スクロール効果コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

先日、この質問がありました。私の最初の考えは、奇妙な質問です!特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか?

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

CSSやJavaScript(および画像とフォントなど)などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか?名前などのように。それはまさにそのためのものです。たくさんあります

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています(その名前とURLが大好きです!)。私はこれまでスイスに行ったことがないので、興奮しています

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

メモ帳++7.3.1
使いやすく無料のコードエディター
