判断元素在可视范围内并根据页面滚动条滚动慢慢显示

最新推荐文章于 2024-05-27 17:10:53 发布

偶像小之慧咿呀咿呀

最新推荐文章于 2024-05-27 17:10:53 发布

阅读量343

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_56362386/article/details/128219511

版权

先将内容设置隐藏 visibility: hidden; opacity: 0;
定义一个显示动画

  @keyframes lin {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

3.写js将内容根据页面滚动条滚动判断元素是否在可视区域内，在就显示出来，下面直接贴代码，我有点懒，不想打字了的😅，贴的是一个案例的代码

 <script type="text/javascript">
   
           $(function () {
   
               function isElementInViewport(el) {
                   //获取元素是否在可视区域
                   var rect = el.getBoundingClientRect();
                   return (
                       rect.top >= 0 &&
                       rect.left >= 0 &&
                       rect.bottom <=
                       (window.innerHeight || document.documentElement.clientHeight) &&
                       rect.right <=
                       (window.innerWidth || document.documentElement.clientWidth)
                   );
               }
              
                   window.addEventListener('scroll', () => {
                       $('img').each((i, x) => {
                        if (isElementInViewport(x)) {
                           x.style['visibility'] = 'visible'
                           x.style['animation'] = 'lin 2s linear 1'
                           x.addEventListener('animationend', () => {
                               x.style['opacity'] = 1
                           })
                       }
                       })
   
                   })
              
   
           })
   
   
       </script>