HTML 如何使用CSS创建滚动时的弹跳效果

在网页设计中，创建滚动时的弹跳效果可以增加趣味性和吸引力。当用户向下滚动页面时，该效果会创建一个弹跳动画，并在用户向上滚动时反弹。本文将讨论创建此效果的语法和方法，以及至少两个示例和输出图像。

方法1： 使用CSS动画： 这种方法使用关键帧动画来创建弹跳效果。我们可以根据上面的语法定义关键帧动画，然后使用动画属性将其应用于元素。我们还可以使用CSS属性如animation-duration和animation-timing-function来控制动画的持续时间和时序。

语法：

.bounce {
    animation: bounce 1s ease-in-out;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bounce on Scroll</title> 
    <style type="text/css"> 
        @keyframes bounce { 
            0%, 
            20%, 
            50%, 
            80%, 
            100% { 
                transform: translateY(0); 
            } 
  
            40% { 
                transform: translateY(-30px); 
            } 
  
            60% { 
                transform: translateY(-15px); 
            } 
        } 
  
        .scroll-bounce { 
            animation: bounce 2s infinite; 
        } 
  
        .container { 
            height: 2000px; 
            background-color: #f2f2f2; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="scroll-bounce"> 
            <h1 style="color:green"> 
              GeeksforGeeks 
              </h1> 
            Bounce on Scroll 
        </div> 
    </div> 
</body> 
</html>

输出:

HTML 如何使用CSS创建滚动时的弹跳效果

在这个示例中，我们定义了一个名为“bounce”的关键帧动画，它创建了弹跳效果。然后我们将这个动画应用到一个带有“scroll-bounce”类的元素上。当用户向下滚动时，元素将不断上下弹跳。

方法2： 使用JavaScript： 这种方法涉及使用JavaScript来监听滚动事件并对元素应用一个类来触发弹跳动画。我们可以使用CSS定义弹跳动画，然后在用户向下滚动时向元素添加一个类，并在用户向上滚动时移除该类。我们可以使用window.pageYOffset属性来检测滚动位置，使用classList.add()和classList.remove()方法来向元素添加和移除类。

语法：

window.addEventListener("scroll", function () {
    var box = document.getElementById("box");
    var position = box.getBoundingClientRect();
    if (position.top < window.innerHeight && 
    position.bottom >= 0) {
        box.classList.add("bounce");
    } else {
        box.classList.remove("bounce");
    }
});

例子：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bounce on Scroll</title> 
    <style> 
        .box { 
            width: 210px; 
            height: 40px; 
            background-color: #3e3c3c; 
            position: relative; 
            animation: bounce 1s ease-in-out; 
        } 
  
        @keyframes bounce { 
            0%, 
            100% { 
                transform: translateY(0); 
            } 
  
            50% { 
                transform: translateY(-20px); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div class="box"> 
        <h1 style="color:green"> 
          GeeksforGeeks 
          </h1> 
    </div> 
  
    <button onclick="refreshPage()"> 
      Refresh Page 
      </button> 
    <script> 
        function refreshPage() { 
            location.reload(); 
        } 
    </script> 
  
    <script> 
        window.addEventListener('scroll', function () { 
            var box = document.querySelector('.box'); 
            var position = box.getBoundingClientRect(); 
  
            if (position.top < window.innerHeight &&  
            position.bottom >= 0) { 
                box.style.animationPlayState = 'running'; 
            } else { 
                box.style.animationPlayState = 'paused'; 
            } 
        }); 
    </script> 
</body> 
</html>

输出:

HTML 如何使用CSS创建滚动时的弹跳效果

在这个例子中，我们定义了一个名为“box”的CSS类，它创建了一个带有反弹动画的红色框。然后，我们使用JavaScript监听滚动事件，并使用getBoundingClientRect()检查框是否在视图中。如果在视图中，我们将框的animationPlayState属性设置为“running”，这将启动动画。如果不在视图中，我们将animationPlayState属性设置为“paused”，这将停止动画。