2

select image with slot machine animation

I want to create something like a slot machine (something like the picture) that when i click on an image all the images scroll and stop on the selected one (EX. in the picture i clicked on image number 2). I tried to write and use some jQuery samples but i cant do that. Can some body guide me, how to do that?

4

1 回答 1

0

请检查以下解决方案，这是 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

谢谢！

于 2015-07-20T09:17:26.543 回答