Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var flashlight = document.getElementById('illuminate'); flashlight.onmousemove = function(event) { this.style.backgroundPosition = (event.clientX-300) + 'px ' + (event.clientY-300) + 'px'; } TweenMax.to('#secondhand', 60, {rotation:360, ease:Linear.easeNone, repeat:-1, svgOrigin:"165 107"}) TweenMax.to('#minutehand', 60*60, {rotation:360, ease:Linear.easeNone, repeat:-1, svgOrigin:"165 107"}) TweenMax.to('#hourhand', 60*60*60, {rotation:360, ease:Linear.easeNone, repeat:-1, svgOrigin:"165 107"}) TweenMax.fromTo('#steam1', 4, {y: 40}, {y: -10, opacity: 0, repeat: -1}); TweenMax.fromTo('#steam2', 3, {y: 30}, {y: -10, opacity: 0, repeat: -1}); TweenMax.fromTo('#steam3', 2, {y: 6}, {y: -10, opacity: 0, repeat: -1}); TweenMax.to("#start", .5, {morphSVG:{shape:"#end", shapeIndex:1}, y:15, repeat: -1, yoyo: true, ease: Power0.easeInOut}); TweenMax.fromTo("#start", 10.5, {x: -1000}, {x: 1000, repeat: -1, yoyo: false, ease: Power0.easeInOut, repeatDelay:3.5});
CSS
body { vertical-align: bottom; background-color: #f2f2b0; } svg.scene { left: 50%; bottom: 0; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 50%; max-height: 600px; position: absolute; } svg.scene #Zebra g { opacity: .25; } #end { visibility: hidden; } svg.cats { -webkit-filter: blur(1px); filter: blur(1px); position: fixed; bottom: 0; left: 0; height: auto; width: 100%; } .illuminate { z-index: 100; width: 100%; height: 100%; padding: 300px; position: fixed; top: 0; left: 0; background-repeat: no-repeat; background: -webkit-radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center; background: radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center; background: -webkit-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center; background: -ms-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center; }
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