井井客

搜索

CSS3+JQ完成元素进场动画效果

自制的一个小DEMO,动画效果是用CSS3完成,滚动触发是用JQ完成的。感觉现在很多网站专题会做效果~在这里只是用了很少的CSS3,你完全可以自已去定制其它的动画效果。

CSS3+JQ完成元素进场动画效果

CSS3和JQ的代码真实来讲其实不多的,代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3+JQ完成元素进场动画效果</title>
    <style>
        * { padding: 0; margin: 0; border: 0; list-style: none;}
        
        .header,.footer {
            line-height: 1000px;
            text-align: center;
            background: yellow;
        }
        .main {
            width: 1000px;
            margin: 0 auto;
        }
        .warp-img {
            height: 300px;
        }
        .warp-img li {
            float: left;
            width: 46%;
            margin:20px 2% 0;
            height: 80px;
            background: indianred;
        }
        
        .warp-scale {
            margin: 20px;
            height: 200px;
            background: lightgreen;
        }
        
        /* 添加动画效果 */
        .need {
            transition: all 0.8s;
        }
        /* 进场前退场后 */
        .warp-img li:nth-child(1) {
            transform:translateX(-200px) translateY(-50px);
            opacity: 0;
        }
        .warp-img li:nth-child(3) {
            transform:translateX(-200px) translateY(0px);
            opacity: 0;
        }
        .warp-img li:nth-child(5) {
            transform:translateX(-200px) translateY(50px);
            opacity: 0;
        }
        .warp-img li:nth-child(2) {
            transform:translateX(200px) translateY(-50px);
            opacity: 0;
        }
        .warp-img li:nth-child(4) {
            transform:translateX(200px) translateY(0px);
            opacity: 0;
        }
        .warp-img li:nth-child(6) {
            transform:translateX(200px) translateY(50px);
            opacity: 0;
        }
        .scale01 {
            transform:scale(0.5);
            opacity: 0;
        }
        .scale02 {
            transform:scale(1.5);
            opacity: 0;
        }
        /* 最终效果 */
        .warp-img li.active {
            opacity: 1;
            transform:translateX(0px) translateY(0px);
        }
        .scale01.active,.scale02.active {
            opacity: 1;
            transform: scale(1);
        }
        
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="main">
        <div class="warp-scale scale01 need"></div>
        <ul class="warp-img">
            <li class="need"></li>
            <li class="need"></li>
            <li class="need"></li>
            <li class="need"></li>
            <li class="need"></li>
            <li class="need"></li>
        </ul>
        <div class="warp-scale scale02 need"></div>
    </div>
    <div class="footer">尾部</div>
    <script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var $window = $(window);
            // 获取屏幕高度
            var screenHeight = $window.height();
            // 记录需要加样子的节点与相应top值
            var myArr = [];
            $('.need').each(function(){
                var obj = {
                    el:$(this),
                    top:$(this)[0].offsetTop
                }
                myArr.push(obj)
            })
            // 初始化样式
            checkPos()
            // 监听滚动条
            $window.scroll(checkPos)
            // 检测位置的函数
            function checkPos(){
                // 当前滚动条位置
                var thisTop = $window.scrollTop();
                // 循环判断内容是否在屏幕内
                for(var i = 0; i < myArr.length; i++){
                    if(thisTop < myArr[i].top && myArr[i].top < thisTop + screenHeight ){
                        myArr[i]['el'].addClass('active')
                    }else{
                        myArr[i]['el'].removeClass('active')
                    }
                }
            }
        })
    </script>
</body>
</html>

感觉值得一说的就是myArr这个数组,它是由对象组成,对象中记录了两个东西,其一就是用JQ选择器查询到含有need样式的元素,其二则是该元素距离顶部的高度。

这样就能知道myArr对应的其实就是JQ选择器查询到的结果,只是在此基本上面记录了一个高度,用于后期判断该元素是否出现在了屏幕中。

然后说说need样式,预期是带有这个样式的元素都拥有动画效果,看样式写的就知道了。JQ的代码主要实现为这些带need样式的元素添加或删除active样式。

而我们用active样子来控制元素显示效果,比如不带的时候将它设置透明,带的时候设置正常显示。结合transition的效果,这种动画的效果就实现了。

其实我的思路就这些了,CSS3的效果还有很多很多,小伙伴可以自己去定制。另外这种方法考虑到CSS3兼容性,所以整体还是兼容略差,但是好在我的动画样式单独写出来,如果遇到不兼容CSS3的浏览器的话,页面还是能正常显示的。

如果有觉得还能拯救一下或者有不清楚的地方欢迎拍砖~

文章TAG:CSS3,JQ

作者:井井客原创来源:原创
本文标题:CSS3+JQ完成元素进场动画效果
本文链接:/c/25297.html

上一篇:canvas完成贪吃蛇小游戏
下一篇:纯JS实现本页面预览执行代码的效果

文章分类

相关阅读

随便看看