Question

我遇到的问题是css3动画干扰了我网站上的视差部分。如果将鼠标悬停在图标上，则会触发css3动画并导致视差区域中断。我该如何解决这个问题？

以下是一些代码：D

<div class="parallax" data-type="background" data-speed="2"></div>

.parallax {
    background: url(../img/worldImg.jpg) repeat fixed 50% 0px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 20px #000 inset;
}

// Parallax Scrolling
var $window = $(window); //You forgot this line in the above example

    $('div[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
        $(window).scroll(function() {
        var yPos = -($window.scrollTop() / $bgobj.data('speed'));
        var yPosAdd = 220;
        var yPosFinal = yPos + yPosAdd;
        // Put together our final background position
        var coords = '50%'+ yPosFinal + 'px';
        // Move the background
        $bgobj.css({ backgroundPosition: coords });
    });
});

css3动画

.columns i {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.columns i:hover {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
     transform: rotate(720deg);
}

Answer 1

问题是由.parallax

的相对定位引起的

从中删除相对定位，它可以正常工作。

.parallax {
  background: url(../img/worldImg.jpg) repeat fixed 50% 0px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  box-shadow: 0px 0px 20px #000 inset;
}

我发现了问题，但我不确定为什么会这样。

css3动画导致视差部分出现问题

1 个答案: