Question

您好我试图在此页面http://cuberto.com上复制转场使用TweenMax。

var slides=document.querySelectorAll('.slide');
var tl=new TimelineLite({paused:true});

for(var i=slides.length;i--;){

    var D=document.createElement('div');   

        D.className='Dot'; 

        D.id='Dot'+i;

    D.addEventListener('click',function(){ tl.seek(this.id).pause() });

    document.getElementById('Dots').appendChild(D);

    tl.add('Dot'+i)





    if(i>0){
        if(i!=slides.length-1)
        {
            tl.addPause()
        }

        tl  .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"})
            .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut})
            .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0)
            .set(slides[i],{ background: "none"})
            .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3)
            .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
        .set(slides[i],{zIndex:1-i})
            .set(slides[i-1],{zIndex:slides.length})
            .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6)
            .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6)
    };
};

可以找到代码集中的完整代码here

我基本上尝试使用滑动动画在一堆滑块之间进行切换，我已经交替使用黑色或粉色的每张幻灯片上的元素进行转换，以便我可以看到动画。

我似乎可以将动画与当前幻灯片隔离开 - 本质上我希望左手div增长到100％，然后向右移动页面，然后切换到下一个滑块并为左手潜水设置动画从最初的0开始，宽度为50％。我相信这就是Cuberto网站正在做的事情。

如果我在所有幻灯片上发布动画的滚动事件，我怎么会陷入可怕的混乱。

我对vanilla javascript并不是特别称职，但想在有或没有jQuery的情况下尝试这个。

我试过了pagepiling.js和fullpage.js，但这并没有达到我想要的效果。

我真的可以做一个我可以去我的客户的决议，或者至少我可以进入的方向。

由于

Answer 1

你可以使用animate.css。你可以使用任何你想要的动画。

<强>演示

function onNextClick() {
  var button = document.getElementById('next'),
    index = button.getAttribute('index'),
    divs = document.getElementsByClassName('main-div')[0].getElementsByTagName('div');
  index++;
  if (index == 3) {
    index = 0;
  }
  for (var i = 0; i < divs.length; i++) {
    divs[i].classList.remove('show');
    divs[i].classList.add('hide');
  }
  divs[index].classList.remove('hide');
  divs[index].classList.add('show');
  button.setAttribute('index', index);

}

.main-div {
  width: 100%;
  display: inline-block;
}

.next {
  background: transparent;
  border: 0px;
  color: blue;
  font-size: 28px;
  text-transform: capitalize;
  text-decoration: underline;
  margin: 15px;
}

.main-div div {
  width: 100%;
  height: 250px;
  color: #3c3c3c;
  font-size: 56px;
  text-align: center;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.div-one {
  background: pink;
}

.div-two {
  background: green;
}

.div-three {
  background: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div class="main-div">
  <div class="div-one show animated bounceInRight">
    1
  </div>
  <div class="div-two hide animated bounceInRight">
    2
  </div>
  <div class="div-three hide animated bounceInRight">
    3
  </div>
  <button id="next" onclick="onNextClick()" index="0" class="next">next</button>
</div>

滑块通过GSAP和滚动进行过渡

1 个答案: