Question

我对css动画很新，但我的页面看起来我想要的除了这一个小故障。我有一个滚动动画使用scrollspy.js，当它击中某个div图像slideinleft或slideinright进入页面。

然而，当你按下控制+ mwheel时，它不会像我希望的那样从浏览器窗口外部启动动画。我使用的是1920x1080 res，供参考。

基本上，在页面加载时它看起来很好：

但是再次，当使用ctrl + mwheel向下时，它变成了这个丑陋的页面：

我需要它来扩展。任何css大师都知道我做错了什么？

HTML：

<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
    <div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
        <div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
            <div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">

                <div class="sow-image-container phone">
                    <img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
                    <img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
                </div>

            </div>
        </div>
    </div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
    <div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
        <div id="pl-w5973cd6d9c123" class="panel-layout">
            <div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
                <div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
                    <div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
                        <div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
                            <div class="so-widget-sow-editor so-widget-sow-editor-base">
                                <div class="siteorigin-widget-tinymce textwidget">
                                    <h4>
                                        STREAMING<br>
                                        MARKETPLACE
                                    </h4>
                                    <h3>Streamlist</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>

CSS：

    .can-transform3d .active.has-bg:before,
  .can-transform3d .active.has-bg:after,
  .can-transform3d .past-active.has-bg:before,
  .can-transform3d .past-active.has-bg:after {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    /*transform: translate3d(328px, 0, 0);*/
     transform: translate3d(0px, 0, 0);
  }

.has-bg {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.has-bg:before,
.has-bg:after {
  content: '';
  position:absolute;
  display: block;
  opacity: 0;
  -webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  transition: all 750ms cubic-bezier(0,0.5,0.25,1);
  -webkit-transition-delay: .25s; /* Safari */
  transition-delay: .25s;
  z-index: 1;
  visibility: visible;
  background-repeat: no-repeat;
  background-attachment: scroll;
  clear: both;
  /*width: 100%;*/
}

.past-active:before,
.past-active:after,
.active:before,
.active:after {
  opacity: 1 !important;
}

.page {
    height: auto;
    width: 100%;
    position: relative;
    text-align: center;
    /*padding-top: 60px;*/
    z-index: 1;
}

   .can-transform3d .left-phone:before,
  .can-transform3d .left-phone:before,
  .can-transform3d .left-phone:after,
  .can-transform3d .left-phone:after {
    -webkit-transform: translate3d(150px , 0, 0);
    -moz-transform: translate3d(150px , 0, 0);
    -o-transform: translate3d(150px , 0, 0);
    -ms-transform: translate3d(150px , 0, 0);
    /*transform: translate3d(682px , 0, 0);*/
    transform: translate3d(150px , 0, 0);
  }

 .left-phone:before,
.left-phone:after {
  margin-left: 0;
  /*right: 0;*/
}

.active .phone .screen-left, .active .phone .screen-right, 
.past-active .phone .screen-left, .past-active .phone .screen-right {
    opacity: 1;
}

.phone .screen-left, .phone .screen-right {
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.phone .screen-left {
    position: absolute;
    top: 12.06656%;
    left: 22.37791%;
    /*width: 75.460123%;*/
}

.layer {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

  .feed:before, .discover:before {
  background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
  /*top: -150px;*/
  height: 564px;
  width: 330px;
  /*right: -425px;*/
  right: -425px;
  /*background-position: right center;*/
}

.feed:after, .discover:after {
  background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
  height: 260px;
  width: 260px;
  bottom: 0;
  /*right: 15%;*/
  right: -6%;
  /*background-position: 70% center;*/
}

滚动间谍功能：

//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){ 
   $('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
    wow.addBox(this);
}).scrollSpy();

$('#pgc-4-1-2').on('scrollSpy:enter',function(){
    $(this).removeClass('animated');
    $('.panel-row-style-for-4-1')
    .removeClass('past-active')
    .addClass('active')
    .removeClass('animated')
    .css({
        'animation-name' : 'slideInLeft'
    })
    wow.addBox(this);
}).scrollSpy();

当分辨率改变时，背景图像不会停留在页面的两侧

0 个答案: