CSS動畫是一種讓網頁更加生動、更有趣的方式。在網頁開發中，滾動動畫是其中一種廣泛應用的動畫效果。它可以為用戶創造一種新的體驗，吸引更多的用戶，幫助用戶更好地理解網頁的內容。本文將從多個方面介紹CSS滾動動畫的使用方法和效果。
一、js滾動動畫
JS滾動動畫是一種常見的滾動動畫效果，通過編寫JavaScript腳本並結合CSS代碼，可以實現更加複雜的動畫效果。下面是一個使用JavaScript實現的滾動動畫的示例：
.animated {
transition: transform .5s ease-out;
}
.active {
transform: translateX(0);
}
.title {
transform: translateX(-500px);
}
.description {
transform: translateX(500px);
}
window.onscroll = function() {
var title = document.querySelector('.title');
var description = document.querySelector('.description');
if (isScrolledIntoView(title)) {
title.classList.add('active');
}
if (isScrolledIntoView(description)) {
description.classList.add('active');
}
}
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
在這個例子中，我們使用了CSS3的transform屬性，以平移的方式控制元素的動畫效果，同時使用JavaScript編寫滾動監聽器實現動畫的觸發。
二、ppt滾動動畫
在製作PPT時，我們通常需要使用滾動動畫來讓PPT更加生動。CSS滾動動畫同樣可以用於PPT中的滾動動畫效果。下面是一個在PPT中常用的示例：
.animated {
opacity: 0;
}
.active {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.title {
transition-delay: 0.2s;
}
.description {
transition-delay: 0.4s;
}
.cta {
transition-delay: 0.6s;
transform: scale(0.8);
}
.cta.active {
transform: scale(1);
}
window.onscroll = function() {
var title = document.querySelector('.title');
var description = document.querySelector('.description');
var cta = document.querySelector('.cta');
if (isScrolledIntoView(title)) {
title.classList.add('active');
}
if (isScrolledIntoView(description)) {
description.classList.add('active');
}
if (isScrolledIntoView(cta)) {
cta.classList.add('active');
}
}
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
在這個例子中，我們使用了CSS3的transition屬性和transform屬性實現滾動動畫效果。同時，我們延遲了某些元素的動畫效果，以創建更加豐富的PPT滾動動畫。
三、小球滾動動畫
小球滾動動畫是一種常見的動畫，通過CSS和JavaScript，我們可以輕鬆實現這種動畫效果。
.ball {
position: fixed;
bottom: calc(-100% + 50px);
left: 50%;
transform: translateX(-50%) rotateY(45deg);
width: 50px;
height: 50px;
background: #f7df1e;
border-radius: 50%;
animation: ball 2s infinite;
}
@keyframes ball {
0% {
transform: translateX(-50%) rotateY(45deg) translateY(0) scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
opacity: 1;
}
50% {
transform: translateX(-50%) rotateY(45deg) translateY(-50px) scale(0.5);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
opacity: 0.5;
}
100% {
transform: translateX(-50%) rotateY(45deg) translateY(-100px) scale(1);
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.1);
opacity: 0;
}
}
window.onscroll = function() {
var ball = document.querySelector('.ball');
if (isScrolledIntoView(ball)) {
ball.classList.add('active');
}
else {
ball.classList.remove('active');
}
}
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
在這個例子中，我們使用了CSS3的animation屬性實現小球滾動動畫效果。同時，我們使用了JavaScript編寫滾動監聽器，以觸發動畫效果。
四、數字滾動動畫
數字滾動動畫是一種常見的動畫效果，在數據展示和計數場景中廣泛使用。通過CSS和JavaScript的結合，我們可以實現數字滾動動畫。下面是一個示例：
.count {
font-size: 40px;
font-weight: bold;
color: #007bff;
}
.count-wrapper {
font-size: 20px;
text-align: center;
margin-top: 20px;
}
window.onscroll = function() {
var count = document.querySelector('.count');
if (isScrolledIntoView(count)) {
startCount(count);
}
}
function startCount(el) {
var start = 0;
var end = el.getAttribute('data-target');
var duration = 2000;
var range = end - start;
var current = start;
var increment = end > start ? 1 : -1;
var step = Math.abs(Math.floor(duration / range));
var timer = setInterval(function() {
current += increment;
el.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
return isVisible;
}
在這個例子中，我們使用了JavaScript編寫數字滾動動畫的核心邏輯，以及滾動監聽器來觸發動畫效果。同時，我們使用了data-attributes來保存需要滾動的數字值。
五、PPT動畫循環滾動
循環滾動是一種常見的PPT動畫，可以使用CSS動畫輕鬆實現。下面是一個在PPT中常用的循環滾動示例：
.wrapper {
overflow: hidden;
}
.slider {
display: flex;
animation: slide-infinite 10s infinite;
}
.slide {
width: 100%;
height: 400px;
flex-shrink: 0;
background-size: cover;
background-position: center center;
}
.slide-1 {
background-image: url('slide-1.jpg');
}
.slide-2 {
background-image: url('slide-2.jpg');
}
.slide-3 {
background-image: url('slide-3.jpg');
}
@keyframes slide-infinite {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300%);
}
}
在這個例子中，我們使用了CSS3的animation屬性實現PPT動畫循環滾動效果。同時，我們使用了容器元素的overflow屬性來隱藏動畫幻燈片的溢出部分。
六、滾動的天空動畫
滾動的天空動畫是一種常見的動畫效果，適用於模擬天氣場景等情形。下面是一個使用CSS和JavaScript結合編寫的滾動的天空動畫示例：
.parallax {
position: relative;
height: 400px;
background-size: cover;
background-position: center center;
overflow: hidden;
}
.parallax:before {
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
z-index: 1;
}
.parallax .layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.layer:nth-child(1) {
background-image: url('cloud.png');
background-size: contain;
animation: cloud1 10s infinite linear;
}
.layer:nth-child(2) {
background-image: url('cloud.png');
background-size: contain;
animation: cloud2 10s infinite linear;
}
.layer:nth-child(3) {
background-image: url('sun.png');
background-size: contain;
animation: sun 20s infinite linear;
}
@keyframes cloud1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
@keyframes cloud2 {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}
@keyframes sun {
0% {
transform: translateY(0) rotate(0);
}
100% {
transform: translateY(200px) rotate(360deg);
}
}
window.onscroll = function() {
var parallax = document.querySelector('.parallax');
var topDistance = parallax.offsetTop - window.pageYOffset;
var layers = parallax.querySelectorAll('.layer');
layers.forEach(function(layer, i) {
var divider = i / 100;
var bottomDistance = (topDistance * divider) - 50;
var posX = '50%';
var posY = bottomDistance + 'px';
var transform = 'translate(' + posX + ', ' + posY + ')';
layer.style.transform = transform;
});
}
在這個例子中，我們使用了CSS3的animation屬性實現天空動畫效果，同時使用JavaScript編寫滾動監聽器，以根據滾動位置和元素深度調整動畫層的位置和動畫效果。
總結
本文介紹了多個方面的CSS
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/279220.html
微信掃一掃 
支付寶掃一掃 