Happy Halloween!

HTML
<svg class="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100" height="100"> <circle r="30" fill="#fff" cx="70" cy="70" /> </svg> <div class="back ground"></div> <div class="mid ground"></div> <div class="frontmid ground"></div> <div class="front ground"></div> <div class="horseman"></div> <svg class="pumpkin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 426 426"> <defs> <radialGradient id="radial-gradient" cx="213.02" cy="213.02" r="213.02" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#f69449"/> <stop offset="0.7" stop-color="#e99623" stop-opacity="0.8"/> <stop offset="1" stop-color="#d7ba95" stop-opacity="0"/> </radialGradient> </defs> <title>pumpkin</title> <g id="pumpkin"> <circle id="back-area" cx="213" cy="213" r="213" opacity="0.75" fill="url(#radial-gradient)"/> <path id="p-back" d="M329.5,132.4c-29.4-27.7-58.5-32-74.9-31.6s-25.5,9.8-32.1,16.5c-1.9,1.9-6.7,3.4-12.8,4.6a31.3,31.3,0,0,1-2.8-3.7c-5.8-9.4-15.2-19.2-14.3-25.5s34.8-2.2,42.4-5.4,1.4-18.3,16.5-21.4,25.3-10.6,39.2-24.5S328.6.9,328.6.9,291.4,23.2,275,23.2s-28,8.9-36.1,15.2-19.6-.3-28.6,13.4-.6,19.5-12.5,22.7-8.4,6.7-28.9,2.7c-10.5-2.1-20.1,0-28.3,3.6-3.1-3.8-13.3-14.6-28.3-17.4C94,59.8,76.6,66,68.1,73.6S50.4,100.9,49,129.4s2.6,45,12,53.9S74.8,194,74.8,194l.6-1.6c-10.1,26.8-7.9,58.2-1.5,75.9C82.9,293.3,119,317,119,317s48.1,22.2,67.8,25.3c7,1.1,18.2,1.7,30.9,1.3l1.1.9v-.9c22.6-.7,49.6-4.2,65.6-12.3,25.3-12.8,68.2-50.9,73.1-74.5S358.8,160.1,329.5,132.4Zm-235,30.8a74.4,74.4,0,0,0-17.6,25.7l4.2-10.5S59.7,168.9,61,134.2s11.2-49,22.3-54.8,27.3-9.8,35.3-4,10.2,9.4,10.2,9.4l6.7-1.4a93.7,93.7,0,0,0-14.2,9.9C111,101.7,96.7,116.5,99.4,128s.9,15.5,9.4,17.3,29.4-12.8,31.2-16.4,3.6-31.7,3.6-31.7,11.2-3.6,18.3,1.8,8,15.7,4.5,24.1c-.6,1.4-1.3,2.9-2.1,4.3l-3.7.6C145.7,130.7,124.7,135.1,94.5,163.2ZM132.8,120c-4.5,7.6-7.5,10.6-11.5,10.6a9.5,9.5,0,0,1-6.3-2.1s-6.1-3.6,1.3-14.7,16.9-11.6,16.9-11.6S137.2,112.4,132.8,120Z" fill="#010101" fill-rule="evenodd"/> <g id="face"> <path d="M147.5,248.8s.4-36.7,6.3-44.6c0,0,20.4,28.1,41,29.5,0,0-19.5,10.7-31.6,15.2S147.5,248.8,147.5,248.8Z" fill="#f8951d" fill-rule="evenodd"/> <path d="M233.1,259.1s4-37.1,6.7-40.2,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z" fill="#f8951d" fill-rule="evenodd"/> <path d="M295.1,215.8s.4-43.7-1.3-51.2c0,0,21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z" fill="#f8951d" fill-rule="evenodd"/> <path d="M327.7,218.9c-5.4,11.2-4,22.3-7.6,24.1s-8.9-6.7-11.2,1.8-3.6,15.6-3.6,15.6-15.2-2.1-15.2,3.6-4,12.4-4,12.4-10.7-7.6-15.2-3.6-5.7,12.5-11.1,9.8-15.6.4-17.4,2.7-11.6,4-13.4-2.2-12.1,7.1-14.3,7.1-7.1-4-13.8-5.8-11.5,7.6-11.5,7.6l-8.5-17s-7.6,13.4-14.7,11.6S148,271,148,271s13.4,25.4,21.4,25.9,13.4,9.4,16.5,12.1,14.6-2.2,17.8-.4,6.7,14.7,13.4,11.2,6.7-11.2,17.9-6.3,20.2,12.5,23.7,3.6,22.2-10.7,26.2-12.1.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8S327.7,218.9,327.7,218.9Z" fill="#f8951d" fill-rule="evenodd"/> <path d="M327.7,218.9s-.9,22.8,1.3,30.8-12.1,15.2-15.6,21.8-6.3,14.7-17,18.8-7.6,13.4-11.6,14.7-22.8,3.1-26.2,12.1c-1.9,5-5.6,4.8-10.5,2.8-4.4,2.5-12-3.1-21-7.1-4.3.9-5.9,4.7-10.1,6.9-2.5,1.4-4.6.3-6.4-1.5l-1.4.9c-6,3.2-9.5-6.9-12.4-10.3-4.3.8-9.1,1.9-10.9.3,3.7-1,8.2-2.1,10-1.1,3.9,4.2,7.4,14.4,13.4,11.2l1.4-.9c5.2-3.6,6.1-9.5,15.4-5.8s17.6,10,22,7.5a6.5,6.5,0,0,0,2.7-3.5c3.5-8.9,22.2-10.7,26.2-12.1s.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8a37.3,37.3,0,0,1-1-6.1c-2.1,1.1-4.6-1-6.8-1.7a3,3,0,0,1-1.2,1.1,3.1,3.1,0,0,1-2.4,0,2.7,2.7,0,0,1,3.6-1.2c2.2.7,4.7,2.8,6.6,1.8C323.6,240.9,322.4,229.9,327.7,218.9Z" fill="#d9c98e" fill-rule="evenodd"/> <path d="M151.3,210.1a18.7,18.7,0,0,1,2.4-5.9s20.4,28.1,41,29.5c0,0-19.5,10.7-31.6,15.2-7.9,2.9-12.1,2-14.1,1.1a33.3,33.3,0,0,0,6.3-1.7c12.1-4.5,31.6-15.2,31.6-15.2C172.8,232,158.7,218.5,151.3,210.1Z" fill="#d9c98e" fill-rule="evenodd"/> <path d="M233.1,259.1l.4-3.3c9.7-3.2,25-8.4,28.3-10.8s-12.9-17.7-22.9-24.1a6.3,6.3,0,0,1,.9-2c2.7-3.1,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z" fill="#d9c98e" fill-rule="evenodd"/> <path d="M295.1,215.8V204.1c4.7-6.7,10-14.6,10.9-17.5s-5.6-10-11.6-15.4a47.7,47.7,0,0,0-.7-6.7s21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z" fill="#d9c98e" fill-rule="evenodd"/> </g> </g> </svg> <a href="http://www.cesarnogueira.tech" target="_blank"><h1>Happy halloween</h1></a>
SCSS
//*------------------------------ //looks best full screen //*------------------------------ body, html { width: 100%; height: 100%; min-height: 700px; background: rgb(4,30,43); /* Old browsers */ background: -moz-linear-gradient(top, rgba(4,30,43,1) 0%, rgba(64,120,134,1) 41%, rgba(212,219,219,1) 69%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 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'); animation: splashit 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; transform: translateZ(0); backface-visibility: hidden; 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; 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; 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; 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; animation: bk 100s -5s linear infinite; } @keyframes splashit { 100% { background-position: 0 -1848px; } } @keyframes bk { 100% { background-position: -300% 0; } }
JAVASCRIPT
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");
Expand for more options Login