LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
GSAP
▼ Drag this :)
CSS
html,body,.bg-img{width: 100%;height: 100%;}
body{
  background-color:gray;
  margin:0px; padding:0px;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  background-image:url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
  background-size:350px 250px;
}

.bg-img{
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
}


svg{
  overflow:visible;
  position:absolute;
  left:50%; top:15px;
  -webkit-transform: translate(-50% , 0%);
          transform: translate(-50% , 0%);
}
#roof{
  position:absolute;
  left:0px; top:0px;
  width:100%; height:45px;
  background-color:#444;
}
#roof::before{
  content:'';
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.2)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 100%);
}

#text{
  position:absolute;
  left:50%; top:240px;
  -webkit-transform:translate(-50%,0%);
          transform:translate(-50%,0%);
  font-size:110px;
  white-space: nowrap;
  font-family:'Oswald', tahoma;
  color:rgba(0,0,0,0.7);
  mix-blend-mode: overlay;
}

#links{position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:13px;font-family:tahoma;color:#000;}
#links a{text-decoration:none;font-size:2.3em;color:#000;}
#twitter{position:absolute;bottom:15px;right:20px;}
#pens{position:absolute;bottom:15px;left:20px;}
JS
/*
a Pen by DIACO : twitter.com/Diaco_ml  ||  codepen.io/MAW
powered by GSAP : https://www.greensock.com/
*/
var D=document.createElement('div') ,
    E=Linear.easeNone,F=1,
    tl=new TimelineMax({paused:true})
    .to("#L1",2,{morphSVG:"#L1M",ease:E},0)
    .to("#L2",2,{morphSVG:"#L2M",ease:E},0)
    .to("#LW",2,{morphSVG:"#LWM",ease:E},0)
    .to("#L3",2,{y:170,ease:E},0)
    .to("#LB",2,{y:170,ease:E},0)
    .to("#LI",2,{y:183,scaleY:0.12,ease:E},0);
var W=TweenMax.from("#LB,#LI",0.15,{fill:'#222',repeat:1,paused:true,immediateRender:false});
var V=new TimelineLite({paused:true})
  .to('#lamp',1,{transformOrigin:'center top',rotation:1.7,ease:Sine.easeInOut})
  .to('#lamp',2,{rotation:-1.7,ease:Sine.easeInOut})
  .to('#lamp',12,{rotation:0,ease:Elastic.easeOut})
Draggable.create(D,{
  type:'y',throwProps:true,bounds:{minY:0,maxY:150},
  trigger:"#lamp",edgeResistance:1,minDuration:1,
  onDrag:Update,onThrowUpdate:Update,
  onPress:function(){
    if(F){TweenLite.to('#T',0.5,{opacity:0}); F=0;}
    W.play(0);  V.pause();
  },
  onRelease:function(){V.play(0); W.play(0);},
  ease:Bounce.easeOut,snap:[0,150]
})
function Update(){tl.progress(Math.abs(this.y/150))};
// a Pen by DIACO : twitter.com/Diaco_ml  ||  codepen.io/MAW
Host Instantly Drag and Drop Website Builder

 

Description

a SVG Pendant Lamp with GSAP MorphSVG Plugin
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID