Question

我无法确定是否存在ScrollMagic插件的不完整功能。

我想要做的是，现在，当用户输入div＆＃34;背景＆＃34;时，它正确地使我的左固定div透明，但我希望当用户离开时让左边的div回来，所以基本上，只有动画左边的div，如果它在div内部＆＃34;背景＆＃34;。

我认为这个问题是我使用Maxtween为其设置动画，将不透明度设置为0但不会将其更改回来。

小提琴：https://jsfiddle.net/jzhang172/7zrfLtLk/

＆＃13;

$(function(){
            
           var theh= $( ".background" ).height();
            console.log(theh);
  var controller = new ScrollMagic.Controller();

    var scene = new ScrollMagic.Scene({triggerElement: ".background", duration:theh})
            .setTween("#left", 0.5, {opacity:"0"}) // trigger a TweenMax.to tween
            .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)*/
            .addTo(controller);
            
            
            });

＆＃13;

#left{
  position:fixed;
  background:black;
  width:200px;
  height:100%;
}
body,html{
margin:0;
padding:0;
height:3000px;
}
.para{
  height:300px;
  widtH:300px;
  background:blue;
  float:right;
}
*{
  box-sizing:border-box;
}
.background{
  height:300px;
  width:100%;
  background:red;
  float:right;
  margin-top:800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>



<div class="para"></div>
<div class="background"></div>
<div id="left"></div>

＆＃13;

我发现了一个解决方案，以防万一有人在看下面这个，在我看来并不是一个完美的解决方案，但请检查一下，让我知道你的想法。 < / p>

Answer 1

我找到的解决方案基本上是在div正下方的元素上触发不透明度。看到更新的小提琴。不确定这是否可行，感觉有点hackey，我宁愿有一个onDestination，恢复正常。

小提琴：https://jsfiddle.net/jzhang172/7zrfLtLk/1/

＆＃13;

$(function(){
        
       var theh= $( ".background" ).height();
        console.log(theh);
  var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({triggerElement: ".background", duration:theh})
        .setTween("#left", 0.5, {opacity:"0"}) // trigger a TweenMax.to tween
        .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)*/
        .addTo(controller);
        
       
var scene = new ScrollMagic.Scene({triggerElement: ".background-2"})
        .setTween("#left", 0.5, {opacity:"1"}) // trigger a TweenMax.to tween
        .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)*/
        .addTo(controller);
        
        
        });

＆＃13;

#left{
  position:fixed;
  background:black;
  width:200px;
  height:100%;
}
body,html{
margin:0;
padding:0;
height:3000px;
}
.para{
  height:300px;
  widtH:300px;
  background:blue;
  float:right;
}
*{
  box-sizing:border-box;
}
.background{
  height:300px;
  width:100%;
  background:red;
  float:right;
  margin-top:800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>



<div class="para"></div>
<div class="background"></div>
<div id="left"></div>

＆＃13;

jQuery插件：Scrollmagic，关于完整功能？

1 个答案: