jquery - 画像のスロット マシン アニメーションでスムーズ スクロール div を作成する

Question

画像をクリックすると、すべての画像がスクロールして選択した画像で停止するスロット マシンのようなもの (画像のようなもの) を作成したいと考えています (画像の例では、画像番号 2 をクリックしました)。いくつかの jQuery サンプルを作成して使用しようとしましたが、それはできません。誰かが私を導くことができますか、それを行う方法はありますか?

Answer 1

以下の解決策を確認してください。Diaco によって GSAP フォーラムで提案されたので、これが役立つかもしれません。

HTML:

<div class="box">END</div>
<div class="box">Slide 4</div>
<div class="box">Slide 3</div>
<div class="box">Slide 2</div>
<div class="box">Slide 1</div>

CSS:

body {
  background-color: #333;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.bullets {
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

.bullet {
  width: 10px;
  height: 10px;
  margin: 2px;
  background-color: white;
  display: inline-block;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  font-size: 70px;
  color: white;
  font-family:'Oswald', arial; 
  padding-top: 50px;
}

.box:nth-child(1) {
  background-color: #ff002f;
}

.box:nth-child(2) {
  background-color: #00718b;
}

.box:nth-child(3) {
  background-color: #4a5619;
}

.box:nth-child(4) {
  background-color: #444;
}

.box:nth-child(5) {
  background-color: #ff002f;
}

Javascript:

/* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW
powered by GSAP : http://www.greensock.com/
*/

var box = $(".box") , indx = 0 , Anim ;

box.each(function(){ this.anim = TweenMax.to($(this),1,{yPercent:-100,paused:true,ease:Power4.easeIn}) });

$(window).on("mousewheel DOMMouseScroll", function(event){
  event.stopPropagation();  event.preventDefault(); 

  var Del = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
  turn(Del);
});

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

var Dragger = Draggable.create(D,{trigger:".box",type:'y',minimumMovement:30,cursor:'n-resize',
onDrag:function(){ Del=this.getDirection("start")=='up'?-1:1;  turn(Del);}
});

function turn(Del){
  if(Del==1 && indx>0 ){
    if(Anim == undefined){  Anim = box[box.length-indx].anim.reverse(); indx--; }
    else if(!Anim.isActive()){  Anim = box[box.length-indx].anim.reverse(); indx--; }
    }
    else if(Del==-1 && indx<box.length-1){
    if(Anim == undefined){  Anim = box[(box.length-1)-indx].anim.play();    indx++; }
    else if(!Anim.isActive()){  Anim = box[(box.length-1)-indx].anim.play();    indx++; }
  }
};

/* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW */

上記の JavaScript を実行するには、アニメーションを効率的に処理する方法を提供する Greensock GSAP を含める必要があります。

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js

ありがとう！