图片出现在可视区域时实现翻转效果-优快云博客

本文介绍了一个使用CSS和jQuery实现的网页元素动画案例。该案例中，一个带有图片的区块(.cc)在用户滚动页面到特定位置时触发动画效果，通过rotateY变换及透明度变化来吸引用户注意。此外，还介绍了如何利用JavaScript监听窗口滚动事件并计算元素位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .aa,.dd{
            height:1000px;;
        }
        .cc{
            width: 300px;
            padding:50px 0;
            margin:20px auto;
            background:#00cc00;
            text-align:center;

        }
        .cc-act img{
            animation:skewIn 1s linear 0.5s
        }

        @keyframes skewIn{
            0%{
                transform: perspective(400px) rotateY(-90deg);
                opacity: 0;
            }
            40%{
                transform:perspective(400px) rotateY(-10deg);
            }
            70%{
                transform:perspective(400px) rotateY(10deg);
            }
            100%{
                transform:perspective(400px) rotateY(0deg);
                opacity: 1;
            }
        }
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(window).scroll(function () {
            var $cc=$(".cc"),clientH = $(window).height(),$scroll = $(window).scrollTop();
            if($cc.offset().top-$scroll > 0 && $cc.offset().top-$scroll<clientH){
                $cc.addClass("cc-act")
            }else{
                $cc.removeClass("cc-act")
            }
        });
    </script>
</head>
<body>
<div class="aa"></div>
    <div class="cc">
        <img src="img/index-by.jpg"/>
    </div>
<div class="dd"></div>
</body>
</html>