HTML是一種用于創(chuàng)建網(wǎng)頁(yè)的編程語(yǔ)言，可用于構(gòu)建靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。屏幕滾動(dòng)動(dòng)畫效果是一種非常流行的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，可以增強(qiáng)用戶體驗(yàn)、吸引眼球，并提高網(wǎng)頁(yè)的互動(dòng)性。下面是一些常見(jiàn)的HTML屏幕滾動(dòng)動(dòng)畫效果代碼，希望對(duì)于開(kāi)發(fā)者有所幫助。

/*
垂直滾動(dòng)動(dòng)畫效果
*/
html, body {
overflow: hidden;
height: 100%;
}
.section {
height: 100%;
position: relative;
}
.section h1 {
font-size: 3em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* js代碼 */
$(document).ready(function() {
var $content = $('.section');
var $viewportHeight = $(window).height();
$content.css({'height': $viewportHeight + 'px'});
$(window).scroll(function() {
var $scrollHeight = $(window).scrollTop();
$content.each(function() {
var $sectionOffset = $(this).offset().top;
if (($viewportHeight + $scrollHeight - $sectionOffset) >0) {
$(this).find('h1').addClass('animate');
}
});
});
});
/*
水平滾動(dòng)動(dòng)畫效果
*/
html, body {
overflow: hidden;
height: 100%;
}
.section {
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.section h1 {
font-size: 3em;
margin: 0;
}
/* js代碼 */
window.onload = function() {
var $content = $('.section');
var $viewportWidth = $(window).width();
$content.css({'width': $viewportWidth + 'px'});
$(window).scroll(function() {
var $scrollWidth = $(window).scrollLeft();
$content.each(function() {
var $sectionOffset = $(this).offset().left;
if (($viewportWidth + $scrollWidth - $sectionOffset) >0) {
$(this).find('h1').addClass('animate');
}
});
});
};
/*
淡入淡出動(dòng)畫效果
*/
.slide {
position: relative;
display: inline-block;
height: 400px;
width: 600px;
}
.slide img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/* js代碼 */
$(document).ready(function() {
var $slides = $('.slide img');
var $slideCount = $slides.length;
var $currentSlide = 0;
$slides.eq($currentSlide).css('opacity', 1);
setInterval(function() {
$slides.eq($currentSlide).animate({'opacity': 0}, 1000);
$currentSlide = ($currentSlide + 1) % $slideCount;
$slides.eq($currentSlide).animate({'opacity': 1}, 1000);
}, 3000);
});