Question

所以基本上我有一个浮动对象，这是通过parallaxify js插件完成的。它增加了translatex＆amp; y值到我的对象。

现在，当我触发事件时，我希望对象飞出屏幕。为此，我使用负翻译值和一些过渡。

这里的问题是，有时当物体飞出窗外时物体会卡住。很确定这是因为同时添加了正x值和负x值。

在尝试触发事件之前，我尝试将过渡设置为无，而不是正常工作。 data-parallaxify-range也是如此，它指定了对象在屏幕上移动的范围。如果设置为0，则对象不会移动。但是，如果我完全删除此属性，则对象仍在移动。我也理解这一点，因为parallaxify在页面加载时是实例化的，所以它需要页面刷新才能工作，但这也不起作用。

那么，我该如何解决这个问题呢？我真的希望这两种效果都能实现。

谢谢

/ E：

HTML：

<img id="ufo" src="<?php bloginfo('template_directory'); >/images/blank.gif" data-parallaxify-range="30"></img>

CSS：

 #ufo {  z-index: 2; width: 25%; height:     25%;background:url('../images/ufo.svg') bottom left no-repeat;position: absolute; top: 50%; left:10%; -webkit-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1); -webkit-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365);  -moz-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); -o-transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); transition: all 1000ms cubic-bezier(0.490, 0.585, 0.505, 1.365); -webkit-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1); -webkit-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); -moz-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); -o-transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365); transition-timing-function: cubic-bezier(0.490, 0.585, 0.505, 1.365);   }

CSS-notransition：

.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}

jQuery，在Scroll上被触发：

$('#ufo').addClass('notransition');
$('#ufo').removeClass('notransition');
$('#ufo').removeAttr("data-parallaxify-range");
$('#ufo').css({ 'transform' : 'translate(-'+ 150 +'%, 0px)'});
$('#ufo').attr("data-parallaxify-range", "30");

Answer 1

我刚想通了！我发现我可以禁用parallaxify。我正在使用单页滚动插件，其中包含用于离开当前页面的事件，以及下一页的索引和索引。

由于视差仅在第一页，＆＃34;标题＆＃34;，我现在正在使用：

  onLeave: function(index, nextIndex, direction){
   if(index == 1 && nextIndex == 2){
   $('#background').parallaxify('destroy');
       $('#ufo').css({
         'transform' : 'translate(-'+ 150 +'%, 0px)'
       });
   } else if(index == 2 && nextIndex == 1){
    $('#ufo').css({
        '-webkit-transform' : 'translate('+ 0 +'%, 0px)'
      });
      setTimeout(function(){
        $('#background').parallaxify({
                positionProperty: 'transform',
                responsive: true,
                motionType: 'natural',
                mouseMotionType: 'gaussian',
                motionAngleX: 80,
                motionAngleY: 80,
                alphaFilter: 0.5,
                adjustBasePosition: true,
                alphaPosition: 0.025,
         });
      }, 1000);

页面滚动的持续时间是1秒，如果我从第2页到第一页，我会以1秒的超时激活视差。没有超时，飞行物体在页面滚动时卡住。

像魅力一样。

感谢您的帮助！

在应用新变换之前停止所有变换

1 个答案: