jq动态模块加载效果

weixin_48791929

于 2020-06-19 15:07:24 发布

阅读量154

点赞数

分类专栏：前端常用文件文章标签： javascript jquery css css3

本文链接：https://blog.csdn.net/weixin_48791929/article/details/106856663

版权

前端常用文件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用jQuery和CSS实现动态模块加载效果。主要内容包括为需要动画效果的模块添加特定的yc_animate类名，通过判断滚动位置来动态添加或删除class，从而控制模块的显示和隐藏。主要涉及的技术栈有JavaScript、jQuery和CSS3。

摘要由CSDN通过智能技术生成

css部分

.yc_animate{opacity: 0;-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);}
  .mainTitleOn {
  	-webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;}

js部分

function gom() {

        $('.yc_animate').each(function () {
			
            var _this = $(this);
            var h = _this.offset().top - $(window).height()*0.8;
            if ($(window).scrollTop() >= h) {
                _this.addClass('mainTitleOn');
            } else {
                _this.removeClass('mainTitleOn');
            }

        })

    }
    $(window).scroll(function () {
        gom();
    });