响应式乐高

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var animData = {
		wrapper: document.querySelector('#animationWindow'),
		animType: 'svg',
		loop: true,
		prerender: true,
		autoplay: false,
		path: '//www.jq22.com/gxwj/responsive_lego_003.json'
	};

var anim = bodymovin.loadAnimation(animData);
anim.setSpeed(1);

var snapValue,
    maxX,
    tl,
    handle = document.querySelector('.handle'), 
    numStages,
    handleTextArray = [1,2,4,6,8,10,12,14,16],
    dimpleArray = [
     [{x:416, y:310}],
     [{x:418, y:280}],
     [{x:413, y:305}, {x:437, y:281}],
     [{x:425, y:314}, {x:452, y:293}],
     [{x:438, y:321}, {x:464, y:302}],
     [{x:451, y:332}, {x:478, y:312}],
     [{x:462, y:339}, {x:489, y:319}],
     [{x:474, y:349}, {x:499, y:328}],
     [{x:486, y:358}, {x:512, y:338}]
    ],
    brickColorArray = [
     {side:'#DE002E', top:'#E42F3F', front:'#CD0022'},
     {side:'#F65F23', top:'#F99859', front:'#EC4518'},
     {side:'#9AC43D', top:'#A1D039', front:'#749426'},
     {side:'#5CAFCD', top:'#73D6F2', front:'#3787A8'},
     {side:'#F7E143', top:'#F8E944', front:'#E3B537'},
     {side:'#DE519B', top:'#F271AC', front:'#B1005E'}
                      ],
    handleText = document.querySelector('.handleText'),
    pop = document.querySelector('#pop'),
    dimple = document.querySelector('#dimple'),
    sliderSVG = document.querySelector('.sliderSVG'),
    allRects = document.querySelectorAll('.swatch rect')

TweenMax.set(handle, {
 x:0
})
TweenMax.set(dimple, {
 transformOrigin:'50% 50%'
})
anim.addEventListener("DOMLoaded", onLoaded);

function dragUpdate(){
 
 var posX = handle._gsTransform.x;
 var posY = handle._gsTransform.y;
 var id = (posX/maxX)*numStages;
 handleText.textContent = handleTextArray[id];

var dragPercent = (posX/maxX);

var playhead = dragPercent * (tl.duration()-(2));

TweenMax.to(tl,1, {
    time:(playhead <= 0 ) ? 0 : playhead,
    ease:(playhead <= 0 ) ? Elastic.easeOut.config(0.1,1) : Elastic.easeOut.config(1,0.7)
    //ease:Elastic.easeOut.config(1.7,0.7)
   })
 
 TweenMax.fromTo('#animationWindow', 0.6, {
  //rotation:3
 },{
  rotation:0,
  ease:Elastic.easeOut.config(0.5, 0.6)
 })
 
 var c = pop.cloneNode(true);
 sliderSVG.appendChild(c);
 TweenMax.fromTo(c, 2, {
  x:posX,
  attr:{
   r:20
  },
  alpha:1
  //y:posY
 },{
  x:posX,
  attr:{
   r:60
  },
  alpha:0,
  //stroke:'#E3000B',
  onComplete:removePop,
  onCompleteParams:[c],
  ease:Expo.easeOut
  //y:posY
 })
 
 var d, dtl = new TimelineMax();
 for(var i = 0; i < dimpleArray[id].length; i++){
  
  d = dimple.cloneNode(true);
  sliderSVG.appendChild(d);
  var tween = TweenMax.fromTo(d, 1.7, {
   x:dimpleArray[id][i].x,
   y:dimpleArray[id][i].y-6,
   attr:{
    r:10
   },
   alpha:1,
   skewX:50,
   rotation:-20
  },{
   attr:{
    r:35
   },
   alpha:0,
   //stroke:'#E3000B',
   onComplete:removePop,
   onCompleteParams:[d],
   ease:Expo.easeOut
   //y:posY
  })
  
  dtl.add(tween, i/20)
  
 }

}

function removePop(c){
 sliderSVG.removeChild(c)
}

Draggable.create(handle, {
  type:'x',
  cursor:'pointer',
  //throwProps:true,
  //snap:getSnap(),
  liveSnap:function(endValue){
   
   return Math.round(endValue / snapValue) * snapValue;
  },
  bounds:{minX:0, maxX:maxX},
  onDrag:dragUpdate  
  
 })
 
 dragUpdate();
 
 //console.log(anim.totalFrames * Math.abs(anim.frameModifier))
 //console.log(Math.round(anim.totalFrames/ anim.frameRate))
 changeColour({currentTarget:allRects[3]})
}

function changeColour(e){
 var id = parseInt(e.currentTarget.getAttribute('fill-data'));
 TweenMax.set('#dimple', {
  stroke:brickColorArray[id].front
 })
 TweenMax.set('svg:first-child g path', {
  fill:brickColorArray[id].front
 })
 //console.log(parseInt(e.currentTarget.getAttribute('fill-data')))
 TweenMax.set('.sideFace path', {
  fill:brickColorArray[id].side
 })
 TweenMax.set('.topFace path', {
  fill:brickColorArray[id].top
 })
 TweenMax.set('.frontFace path', {
  fill:brickColorArray[id].front
 })
 
TweenMax.staggerTo(allRects, 0.15, {
 cycle:{
  
  scaleY:function(i, target){
   return (e.currentTarget == target) ? 1.3 : 1
  }
 },
 transformOrigin:'50% 100%'
},0) 
}

function getSnap() {
  var t = function(endValue) {
    return Math.round(endValue / snapValue) * snapValue;
  }
  return t;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg