智能滑块

下载代码

html

css

分享到微信朋友圈

html

<g clip-path="url(#mainMask)">
  <g clip-path="url(#panelMask)">
  <use class="gradPanel" xlink:href="#panel" y="103"  fill="url(#panelGrad)"/>
   
  </g>   
 <rect class="draggerShadow" x="125" y="334" width="34" height="35" fill="url(#draggerGrad)"/> 
   <text x="290" y="294" class="sliderProp sliderLabel">Tint</text>
       <rect class="dragger" x="158" y="334" width="30" height="35" fill="#FFFCF9"/>
  <text x="45%" y="400" class="valueProp sliderLabel">0%</text>
  </g>

</svg>

css

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    onPressTl = new TimelineMax({paused:true}),
    onReleaseTl = new TimelineMax({paused:true}),
    tintTl = new TimelineMax({paused:true}),
    menuPos = {y:0},
    sliderPos = 0,
    maxDragPosX = 470,
    dragger = select('.dragger'),
    draggerShadow = select('.draggerShadow'),
    track = select('.track'),
    iconFill = select('.iconFill'),
    panelMask = select('.panelMask'),
    gradPanel = select('.gradPanel'),
    iconRing = select('.iconRing'),
    iconGroup = select('.iconGroup'),
    bgPanel = select('.bgPanel'),
    valueProp = select('.valueProp'),
    draggerPos = TweenMax.set('.dragger', {x:'+=0'}).target[0]._gsTransform

TweenMax.set('svg', {
  visibility: 'visible'
})

onPressTl.to([dragger, draggerShadow,  '.track'], 0.6,{
	attr:{
  	height:138
	},
  y:-103,
  ease:Elastic.easeOut.config(0.3,0.9)
 })
.staggerTo(['.sliderProp', '.valueProp'], 0.6,{
 cycle:{
  y:[-71, -84]
 },
  ease:Elastic.easeOut.config(0.3,0.9)
},0.05,0)
.to('.iconGroup', 0.4, {
 y:18,
 //scale:1.2,
 transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.3,0.9)
},0)
.to('.icon', 1, {
 scale:1.42,
 transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.8,0.29)
},0)

.to(iconRing, 0.02, {
 alpha:0
},0)

.to(gradPanel, 0.6, {
 attr:{
  y:0
 },
  ease:Elastic.easeOut.config(0.3,0.9)
},0)

onReleaseTl.to([dragger, draggerShadow, '.track'],0.3,{
  attr:{
	 height:35
	},
  y:0  
 })
.to(['.sliderProp', '.valueProp'], 0.6,{
 y:-0,
  ease:Elastic.easeOut.config(0.3,0.9)
},'-=0.3')
.to('.iconGroup', 0.4, {
 y:0,
  scale:1,
  ease:Elastic.easeOut.config(0.3,0.9)
},0)
.to(iconRing, 0.4, {
 alpha:1
},0)
.to(gradPanel, 0.3, {
 attr:{
  y:103
 }
},0)
.to('.icon', 1, {
 scale:1,
 transformOrigin:'50% 50%',
  ease:Elastic.easeOut.config(0.8,0.29)
},0)

tintTl.to([bgPanel,track,iconFill],1, {
 fill:'#DF2548',
 ease:Linear.easeNone
})

function onPress(){

onReleaseTl.kill();
 onPressTl.play(0)
 
}
function onRelease(){
 onPressTl.kill();
 
console.log((track.style.fill))
 onReleaseTl.play(0)
}

function onDragUpdate(){
 
 sliderPos = dragger._gsTransform.x/maxDragPosX;
 valueProp.textContent = ~~(sliderPos * 100) + '%';
 
 TweenMax.set([draggerShadow,panelMask], {
  x:dragger._gsTransform.x
 })
 
 tintTl.progress(sliderPos)

}
function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
Draggable.create(dragger, {
 type:'x',
 bounds:{minX:0, maxX:maxDragPosX},
 onPress:onPress,
 onRelease:onRelease,
 onDrag:onDragUpdate,
 throwProps:true,
 onThrowUpdate:onDragUpdate,
	overshootTolerance:0
})

var tl = new TimelineMax();

//ScrubGSAPTimeline(tl);

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