妙招分享：让图片随屏幕滚动滑入滑出，原来如此简单

2024-01-17 10:39:09

当今时代，网站设计和开发人员不断探索新的方法来吸引用户并提高用户体验。其中，图片随屏幕滚动滑入滑出的效果已成为一种流行趋势。这种效果可以增加网站的视觉吸引力，并有助于突出重要信息或图像。

本篇文章将指导您如何使用CSS3和JavaScript实现图片随屏幕滚动滑入滑出的效果。我们将首先了解这种效果的原理，然后逐步介绍如何编写代码来实现它。最后，我们将提供一些额外的技巧和建议，帮助您进一步优化这种效果。

原理

图片随屏幕滚动滑入滑出的效果是通过使用CSS3的“滚动动画”属性实现的。滚动动画属性允许您定义元素在屏幕上滚动时的动画效果。在我们的案例中，我们将使用滚动动画属性来设置图片在进入和离开屏幕时的动画效果。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="image.jpg" alt="Image">
    </div>

    <script src="script.js"></script>
</body>
</html>

.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

img {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: auto;
    animation: slide-in 1s ease-in-out both;
}

@keyframes slide-in {
    0% {
        top: -100%;
    }

    100% {
        top: 0;
    }
}

const image = document.querySelector('img');

window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset;
    const imageTop = image.getBoundingClientRect().top;

    if (scrollTop + window.innerHeight >= imageTop) {
        image.classList.add('show');
    } else {
        image.classList.remove('show');
    }
});