[HTML + CSS + JS] 单向滑动出现效果实现
KONGJUNE / / 前端 / 阅读量

这是一种网页多用的动画效果,当网页滑动到该元素的位置时,这个元素逐渐出现并向上滑动。比如我的个人主页。向任何方向的滑动都是一样的原理,这篇文章就会聚焦于如何使用 HTML、CSS、Javascript 三大金刚来实现这个效果。

本文的 Javascript 部分使用了 JQuery 框架来对代码进行简化。

动画原理简介

首先这个动画很好理解,出现效果即为透明度从 0 逐渐变为 1,向上滑动效果就是简单的位移。在 CSS 中透明度由 opacity 属性来设置,位移效果通过 transform 的 translate() 函数来实现。为了让两个效果发生变化,我们需要自定义一个动画效果。当满足条件时播放这个动画即可。

我们的需求是当网页滑动到这个元素时,这个元素播放向上滑动效果。所以我们需要使用 Javascript 来监听浏览器的滚动行为(scroll),当滚动到该元素顶部时,播放动画。

控制动画的播放也较容易,只需要定义一个 class,该 class 定义播放动画,当满足条件时,为元素增加这个 class。

现在我们来尝试实现这个效果!

效果实现

首先我们先不管 Javascript 部分,来实现一下动画的效果。

在 CSS 中,我们使用 @keyframs 关键字来定义一个自定义动画,在这里我们将这个动画命名为 fadeInUp。我们预计的效果是:透明度从 0 逐渐变为 1,并进行向上的位移。具体代码如下:

@keyframes fadeUpIn {
    from {
        transform: translate(0, 50px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}
  • translate(x, y):定义位移,其中 x 为正表示将该元素相对于原位置向右移动 x 距离,y 为正表示将钙元素相对于原位置向左移动 y 距离。

    由于我们这里只用到了 Y 轴上的移动,所以这个属性我们也可以更改为 translateY(y) 函数。

在定义自定义动画时,我们可以使用 fromto,也可以使用具体的百分比,比如这段可以改写成:

@keyframes fadeUpIn {
    0% {
        transform: translate(0, 50px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

接下来,我们定义一个 class 来播放这个动画:

.fadeUpIn {
    animation: fadeUpIn .8s;
}

我们现在来看看动画效果如何,点击下边的按钮可以播放动画:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nemo atque amet, ducimus, quod sed eum quibusdam laboriosam nostrum consequatur dolor animi obcaecati beatae cumque unde esse cupiditate magnam dolorum?

可以看到动画正常进行了。

接下来我们尝试实现对滚动行为的监听。滚动行为是属于浏览器的,所以我们需要为 window 对象进行监听 scroll 行为。通过 $(window).scrollTop() 来获取当前滚动的高度,当满足一定条件时为需要执行动画的元素增加 fadeUpIn class。

$(window).scroll(function() {
    var top = $(window).scrollTop();
    var toFadeInUp = $(".toFadeInUp");

    toFadeInUp.each(function() {
        if(top > $(this).offset().top - $(window).height() - 50) {
            $(this).addClass("fadeUpIn");
        } else {
            $(this).removeClass("fadeUpIn");
        }
    })
})

这里面的 if 条件句 top > $(this).offset().top - $(window).height() - 50,其中 top 为 $(window).scrollTop() 获取的窗口滚动高度,它其实是当前页面上方已经滚动的部分的高度。$(window).height() 为浏览器视窗高度。而 $(this).offset().top 为目标元素到页面最顶端的高度,如果没有减去 $(window).height(),则会变成目标元素滑动到页面上端的时候执行动画了。另外的 -50 是对动画播出位置的微调,你可以根据自己的需求进行一定的更改。

我们来现在看一下动画的效果(你需要先向上滑动页面让这部分内容不被显示再滑动下来才能播放动画):

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nemo atque amet, ducimus, quod sed eum quibusdam laboriosam nostrum consequatur dolor animi obcaecati beatae cumque unde esse cupiditate magnam dolorum?

完成!

扩展

监听浏览器的滚动是现在网页中很常用的一种方法。浏览器的滚动监听还可以结合元素的放大、缩放、旋转、层次变化等一系列内容。

推荐浏览一下翁天信的个人主页,网页各种元素效果对滚动的监听做的十分完善。

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章