CSS滚动动画

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