码迷,mamicode.com
首页 > 移动开发 > 详细

图片鼠标移动缓慢运动效果

时间:2018-05-25 16:53:22      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:use   flow   动效   find   attach   chm   ack   ges   function   

$(function(){
    


        $(".parallax-true").each(function() {
            var b = $(this),
                c = b.attr("data-direction");
            if(c === "horizontal_mouse" || c === "vertical_mouse" || c === "both_axis_mouse") {
                var d = c === "vertical_mouse",
                    e = c === "horizontal_mouse",
                    f = c === "both_axis_mouse";
                if(f === true) {
                    e = true;
                    d = true
                }
                var g = b;
                var h = g.find(".parallax-layer");
                var i = -.004;
                var j = 50;
                var k = 50;
                g.on("mousemove", function(a) {
                    var b = g.offset();
                    var c = e ? a.clientX - b.left - g.width() * .5 : 0;
                    var f = d ? a.pageY - b.top - g.height() * .5 : 0;
                    TweenLite.to(h, 3, {
                        scale: 1.2
                    });
                    TweenLite.to(h, 1, {
                        x: c * j * i,
                        y: f * k * i
                    })
                });
                g.on("mouseleave", function() {
                    TweenLite.to(h, 60, {
                        x: 0,
                        y: 0,
                        scale: 1
                    })
                })
        }     else {
              var b = $(this).find(".bg-layer"),
                  l = b.offset();
               
              b.css("position", "absolute");
              setTimeout(function () {
                 b.each(function () {
                        console.log("1");
                       $(this).parallaxScroll({
                            speed: .2,
                            direction: c
                        })
                 })
             }, 1000)
          }
        })
        
        
})

<div class="cooperative-partner parallax-true" data-intro-effect="false" data-direction="horizontal_mouse">
<div class="partner-bg bg-layer">
<div class="partner-scroll parallax-layer" data-invert="true" style="background-image:url(/templates/common/images/wimg06.jpg);"></div>
</div>

.cooperative-partner { position: relative; overflow: hidden; padding: 35px 0; }

.partner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.partner-bg .partner-scroll { position: absolute; top: 0; left: 0; width: 130%; height: 100%; background-position: center 0; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; -webkit-transition: all ease 0.7s; -o-transition: all ease 0.7s; -moz-transition: all ease 0.7s; transition: all ease 0.7s; background-attachment: scroll; }
.partner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.partner-bg .partner-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center 0; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; }
  


 

</div>

 

图片鼠标移动缓慢运动效果

标签:use   flow   动效   find   attach   chm   ack   ges   function   

原文地址:https://www.cnblogs.com/aimyfly/p/9089134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!