この記事では、全画面スクロール効果を実現するための 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="./images/page1.png" 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>ステップ 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%;
}アニメーション効果が実装されていないことです。
ステップ 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;
}.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);
}無料CSSオンラインビデオチュートリアル
2.php.cn Dugu Jiijian (2)-cssビデオチュートリアル
以上がCSS3+fullPage.js は全画面スクロール効果コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
