Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
TweenMax.ticker.fps(60); var $gear = $("#gear"), $fanEmpty = $("#fan-empty"), $fanFull = $("#fan-full_1_"), $bellows = $("#bellows"), $bigLtBase = $("#light-base_1_"), $bigLtBulb = $("#bulb_1_"), $smLtBase = $("#light-base"), $smLtBulb = $("#bulb"), $filament = $("#filament"), $faucet = $("#faucet"), $bigLtBulb = $("#bulb_1_"), $smGlow = $("#glow"), $firefly1 = $("#firefly"), $firefly2 = $("#firefly_1_"), $firefly3 = $("#firefly_2_"); TweenMax.set("#firefly, #firefly_1_, #firefly_2_, #glow, #big-glow", { visibility:"visible" }); // the first scene function sceneOne() { var tl = new TimelineLite(); tl.add( "start") .to($smLtBase, 1, {fill:"rgb(108, 115, 103)", ease:Power2.easeOut}, "start+=1.5") .to($smLtBulb, 1, {fill:"rgb(191, 191, 131)", ease:Power2.easeOut}, "start+=1.5") .to($filament, 1, {fill:"rgb(242, 224, 138)", ease:Power2.easeOut}, "start+=1.5") .to($smGlow, 1, {opacity:0.5, ease:Circ.easeOut}, "start+=1.5") .to($smGlow, 4, {opacity:0.8, ease:Circ.easeOut}, "start+=3") .to($firefly1, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3") .to($firefly1, 6, { bezier:{ type:"soft", values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}], autoRotate:true }, ease:Linear.easeNone, repeat:-1}, "start+=3") .to($firefly2, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3.5") .to($firefly2, 6, { bezier:{ type:"soft", values:[{x:30, y:10}, {x:60, y:40}, {x:50, y:30}, {x:40, y:20}, {x:30, y:10}], autoRotate:true }, ease:Linear.easeNone, repeat:-1}, "start+=3.5") .to($firefly3, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=4") .to($("#big-glow"), 1.5, {opacity:0.5, ease:Elastic.easeOut}, "start+=4") .to($firefly3, 6, { bezier:{ type:"soft", values:[{x:-10, y:5}, {x:-20, y:40}, {x:-50, y:30}, {x:-40, y:0}, {x:-10, y:5}], autoRotate:true }, ease:Linear.easeNone, repeat:-1}, "start+=4") .to($bigLtBase, 2.5, {fill:"rgba(191, 191, 131, 0.3)", ease:SlowMo.easeOut}, "start+=3.5") .to($bigLtBulb, 2, {fill:"rgb(191, 191, 131)", ease:SlowMo.easeOut}, "start+=3.5") .fromTo($bellows, 2, {scale:1, ease:Back.easeOut}, {scaleY:0.75, y:10, repeat:-1, ease:Circ.easeIn}, "start") .to($gear, 4, {rotation:-360, repeat:-1, ease:Linear.easeNone, transformOrigin:"50% 50%"}, "start") .to($fanEmpty, 4, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"60% 53%"}, "start") .to($fanFull, 2, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"58% 50%"}, "start"); return tl; } var master = new TimelineLite(); master.add(sceneOne(), "sceneOne"); //master.seek("scene1+=4");
CSS
html { background: #6c7367; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #6c7367), color-stop(77%, #3f3b40), color-stop(100%, #261f26)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #6c7367 0%, #3f3b40 77%, #261f26 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c7367', endColorstr='#261f26',GradientType=1 ); width: 100vw; height: 100vh; } .container { width: 100vw; height: 300px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/sd-bk4.svg") repeat-x; } svg { position: relative; opacity: 0.8; margin: 10px auto; display: table; width: 400px; } .no-svg .container { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/steampunk5.png"); width: 472px; height: 374px; margin: 0 auto; display: table; } #firefly, #firefly_1_, #firefly_2_, #glow, #big-glow { visibility: hidden; opacity: 0; } .s0 { stop-color: #FFFFFF; } .s1 { stop-color: #FCEE91; stop-opacity: 0; } .s2 { stop-color: #FEFBE4; stop-opacity: 0.8; } .s3 { stop-color: #FDF5C0; stop-opacity: 0.6; } .s4 { stop-color: #FDF1A6; stop-opacity: 0.4; } .s5 { stop-color: #FCEF97; stop-opacity: 0.2; } #faucet { animation: faucet 4s linear infinite; transform-origin: 50% 50%; } .ff-glow { animation: stutter 4s linear infinite; } @keyframes faucet { 25% { transform: scaleX(0); transform-origin: 50% 50%; } 50% { transform: scaleX(1); transform-origin: 50% 50%; } 75% { transform: scaleX(0); transform-origin: 50% 50%; } } @keyframes stutter { 20% { opacity: 0.3; } 30% { opacity: 1; } 40% { opacity: 0.4; } 50% { opacity: 0.7; } 70% { opacity: 0.1; } 80% { opacity: 0.5; } }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email