Last active
December 22, 2020 16:38
-
-
Save phinton2/73bb0941cc0e5ce1391d8790266b8fd2 to your computer and use it in GitHub Desktop.
Project 2 - Burning Embers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**Project 2 - Burning Embers*/ | |
| /* Inspiration for the project as well as references taken from AntociAlinGeorgin's Parallax-Star-Background code published to WebDevSHORTS on GitHub; tutorial video of his project here: https://www.youtube.com/watch?v=aywzn9cf-_U */ | |
| /* To-Do List: | |
| 1. Add more frames to smooth ember floating animation | |
| 2. Test if :after is necessary (intention: less code, cleaner management) | |
| 3. Add wider range of colors to embers | |
| 4. Consider addition of mountains in background (optional) | |
| 5. May change radial gradient color to match that of evening afterglow; REFERENCE ---> https://get.pxhere.com/photo/sea-horizon-cloud-sky-sunrise-sunset-morning-dawn-atmosphere-dusk-evening-glow-afterglow-republic-of-the-philippines-in-the-dark-red-sky-at-morning-1081401.jpg */ | |
| /*=================================== | |
| BODY | |
| =====================================*/ | |
| html { | |
| height: 100%; | |
| overflow: hidden; | |
| background: radial-gradient(ellipse at bottom, rgb(2,25,45), rgb(5,5,5)); | |
| } | |
| img { | |
| position: absolute; | |
| left: 550px; | |
| -webkit-fill-color: transparent; | |
| height: 300px; | |
| } | |
| h1 { | |
| position: absolute; | |
| text-align: center; | |
| letter-spacing: 15px; | |
| font-family: 'the dead saloon'; | |
| top: 40%; | |
| left: 600px; | |
| background: linear-gradient(gold,crimson,maroon); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /*Use the following colors for embers: rgb(255,83,73), rgb(255,165,0), rgb(223, 136, 59), rgb(134, 46, 23), */ | |
| .ember1 { | |
| width: 2px; | |
| height: 4px; | |
| background: transparent; | |
| animation: embersfly1 7s linear infinite; | |
| box-shadow: 500px 840px #FFA500, 200px 800px #9f1010, 400px 1000px #FF4500, 434px 750px #ff4e00, 450px 600px #c70004, 524px 750px #b23600, 580px 1100px #FFA500; | |
| } | |
| .ember2 { | |
| width: 3px; | |
| height: 6px; | |
| background: transparent; | |
| animation: embersfly1 4s linear infinite; | |
| box-shadow: 1250px 1000px #FFA500, 1200px 900px #800000, 1100px 800px #EEE8AA, 1275px 845px #FFD700, 1220px 1300px #ff4e00; | |
| } | |
| .pulsating-light { | |
| width: 1300px; | |
| height: 200px; | |
| opacity: 0.6 | |
| box-shadow: 0px 100px 200px 100px orangered; | |
| position: absolute; | |
| left: 100px; | |
| bottom: -200px; | |
| border-radius: 50%; | |
| background: orangered; | |
| animation: pulsinglight 5s linear infinite alternate; | |
| } | |
| @keyframes pulsinglight { | |
| 0% {box-shadow: 50px 80px 175px 80px orangred;} | |
| 25% {box-shadow: 120px 140px 200px 100px red;} | |
| 50% {box-shadow: 160px 140px 240px 160px orangered;} | |
| 75% {box-shadow: 120px 200px 280px 190px #FF8C00;} | |
| 100% {box-shadow: 80px 150px 190px 120px orangered;} | |
| } | |
| /* | |
| .ember1:after { | |
| content: ''; | |
| position: absolute; | |
| top: 2000px; | |
| width: 2px; | |
| height: 4px; | |
| background:transparent; | |
| box-shadow: 500px 1000px #FFA500, 200px 1000px #9f1010, 400px 1000px #EEA63D; | |
| }*/ | |
| /* | |
| .ember2 { | |
| background:transparent; | |
| animation: embersfly2 10s linear infinite; | |
| width:3px; | |
| height: 6px; | |
| box-shadow: 400px 1000px #EEA63D; | |
| } | |
| .ember2:after { | |
| content: ''; | |
| position: absolute; | |
| top: 1000px; | |
| background: transparent; | |
| width: 3px; | |
| height: 6px; | |
| box-shadow: 400px 1000px #EEA63D; | |
| } | |
| .ember3 {} | |
| .ember3:after {}*/ | |
| @keyframes embersfly1 { | |
| 0% { | |
| transform: translateY(0px) translateX(-10px); | |
| } | |
| 10% { | |
| transform: translateY(-200px) TranslateX(-70px); | |
| } | |
| 20% { | |
| transform: translateY(-400px) translateX(-90px); | |
| } | |
| 30% { | |
| transform: translateY(-600px) translateX(-120px); | |
| } | |
| 40% { | |
| transform: translateY(-800px) translateX(-80px); | |
| } | |
| 50% { | |
| transform: translateY(-1000px) translateX(-100px); | |
| } | |
| 60% { | |
| transform: translateY(-1200px) translateX(-110px); | |
| } | |
| 70% { | |
| transform: translateY(-1400px) translateX(-100px); | |
| } | |
| 80%{ | |
| transform: translateY(-1600px) translateX(-130px); | |
| } | |
| 90%{ | |
| transform: translateY(-1800px) translateX(-150px); | |
| } | |
| 100% { | |
| transform: translateY(-2000px) translateX(-130px); | |
| } | |
| } | |
| } | |
| @keyframes embersfly2 {} | |
| @keyframes embersfly3 {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-compatible" content="ie=edge"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link rel="stylesheet" type="text/css" href="https://www.dafont.com/nashville.font"> | |
| <head> | |
| </head> | |
| <body> | |
| <img src=""> | |
| <h1> | |
| <span>PURE CSS</span> | |
| <br> | |
| <span>PARALLAX BURNING EMBERS</span> | |
| </h1> | |
| <section class="wrapper"> | |
| <div class="ember1"></div> | |
| <div class="ember2"></div> | |
| <div class="ember3"></div> | |
| <div class="ember4"></div> | |
| <div class="ember5"></div> | |
| <div class="ember6"></div> | |
| <div class="pulsating-light"></div> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $("").addClass("animated "); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment