Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
function sceneOne() { var tl = new TimelineMax(); tl.add("begin", "+=1"); tl.fromTo(".pumpkin", 2, { scale: 0, x: 0, y: 0, rotation: 180 }, { scale: 1, bezier: { type: "soft", values: [{ x: 400, y: 175 }, { x: 30, y: 250 }], autoRotate: false }, rotation: 0, ease: Circ.easeInOut }, "begin+=1"); tl.to("#face, #back-area", 1, { opacity: 0.5, yoyo: true, repeatDelay: 0.65, repeat: -1, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false}) }, "begin+=3"); tl.from("h1", 2, { opacity: 0, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false}) }, "begin+=3"); tl.from("h1", 1, { rotationX: 180, ease: Sine.easeOut }, "begin+=3"); return tl; } //add it all to master timeline var master = new TimelineMax(); master.add(sceneOne(), "first");
CSS
body, html { width: 100%; height: 100%; min-height: 700px; background: #041e2b; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(top, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#041e2b', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ font-family: 'Freckle Face', cursive; } #foreground { height: 600px; position: absolute; margin-top: -200px; overflow-y: hidden; } h1 { position: absolute; top: 550px; width: 100%; text-align: center; font-size: 45px; color: orange; white-space: pre; margin-left: 20px; } span { letterspacing: 200px; } .moon { left: 25%; position: absolute; top: 100px; } .horseman { width: 184px; height: 123px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/horse-hallow5.svg"); -webkit-animation: horsemove 0.7s steps(15) infinite; animation: horsemove 0.7s steps(15) infinite; position: absolute; left: 50%; margin-left: -100px; top: 300px; } .pumpkin { position: absolute; left: 50%; margin-left: -100px; top: 300px; } .ground { width: 151%; height: 697px; position: absolute; background-size: 800px 716px; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; } .front { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowfront4.svg") repeat-x; background-size: 1000px 871px; top: -100px; -webkit-animation: bk 20s -5s linear infinite; animation: bk 20s -5s linear infinite; } .frontmid { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmidfront2.svg") repeat-x; background-size: 1000px 871px; top: -100px; -webkit-animation: bk 50s -5s linear infinite; animation: bk 50s -5s linear infinite; } .mid { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmid2.svg") repeat-x; background-size: 1000px 871px; top: -100px; -webkit-animation: bk 100s -5s linear infinite; animation: bk 100s -5s linear infinite; } .back { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowback2.svg") repeat-x; background-size: 1000px 871px; top: -100px; -webkit-animation: bk 100s -5s linear infinite; animation: bk 100s -5s linear infinite; } @-webkit-keyframes horsemove { 100% { background-position: 0 -1848px; } } @keyframes horsemove { 100% { background-position: 0 -1848px; } } @-webkit-keyframes bk { 100% { background-position: -200% 0; } } @keyframes bk { 100% { background-position: -200% 0; } }
HTML
pumpkin
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