Created
March 9, 2023 19:42
-
-
Save mfrancois3k/d48373b6295db14b84671b602def169c to your computer and use it in GitHub Desktop.
awwwards marquee #JavaScript #effects
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
| https://www.youtube.com/watch?v=qcfXA3uAD30&loop=0 | |
| class LoopingElement { | |
| constructor(element, currentTranslation, speed) { | |
| this.element = element; | |
| this.currentTranslation = currentTranslation; | |
| this.speed = speed; | |
| this.direction = true; | |
| this.scrollTop = 0; | |
| this.metric = 100; | |
| this.lerp = { | |
| current: this.currentTranslation, | |
| target: this.currentTranslation, | |
| factor: 0.2, | |
| }; | |
| this.events(); | |
| this.render(); | |
| } | |
| events() { | |
| window.addEventListener("scroll", (e) => { | |
| let direction = | |
| window.pageYOffset || document.documentElement.scrollTop; | |
| if (direction > this.scrollTop) { | |
| this.direction = true; | |
| this.lerp.target += this.speed * 5; | |
| } else { | |
| this.direction = false; | |
| this.lerp.target -= this.speed * 5; | |
| } | |
| this.scrollTop = direction <= 0 ? 0 : direction; | |
| }); | |
| } | |
| lerpFunc(current, target, factor) { | |
| this.lerp.current = current * (1 - factor) + target * factor; | |
| } | |
| goForward() { | |
| this.lerp.target += this.speed; | |
| if (this.lerp.target > this.metric) { | |
| this.lerp.current -= this.metric * 2; | |
| this.lerp.target -= this.metric * 2; | |
| } | |
| } | |
| goBackward() { | |
| this.lerp.target -= this.speed; | |
| if (this.lerp.target < -this.metric) { | |
| this.lerp.current -= -this.metric * 2; | |
| this.lerp.target -= -this.metric * 2; | |
| } | |
| } | |
| animate() { | |
| this.direction ? this.goForward() : this.goBackward(); | |
| this.lerpFunc(this.lerp.current, this.lerp.target, this.lerp.factor); | |
| this.element.style.transform = `translateX(${this.lerp.current}%)`; | |
| } | |
| render() { | |
| this.animate(); | |
| window.requestAnimationFrame(() => this.render()); | |
| } | |
| } | |
| let elements = document.querySelectorAll(".item"); | |
| new LoopingElement(elements[0], 0, 0.08); | |
| new LoopingElement(elements[1], -100, 0.08); | |
| let imagesArray = document.querySelectorAll(".images-wrapper"); | |
| let newLol = new LoopingElement(imagesArray[0], 0, 0.1); | |
| let highLol = new LoopingElement(imagesArray[1], -100, 0.1) |
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
| @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Poppins"; | |
| background-color: rgb(22, 22, 22); | |
| } | |
| .hero-section { | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| min-height: 75vh; | |
| } | |
| .loop-container { | |
| margin-top: 500px; | |
| white-space: nowrap; | |
| font-weight: 100; | |
| font-size: 9vw; | |
| letter-spacing: 5px; | |
| /* transform: rotate(7deg); */ | |
| } | |
| .item { | |
| position: absolute; | |
| } | |
| /* ----------------------------------------------------- */ | |
| .image-section { | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| min-height: 75vh; | |
| } | |
| .second-loop-container { | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| } | |
| .images-wrapper { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 2rem; | |
| padding-right: 2rem; | |
| position: absolute; | |
| } | |
| .image-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| width: 300px; | |
| height: 440px; | |
| } | |
| .image-container img { | |
| object-fit: cover; | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| .item { | |
| position: absolute; | |
| color: white; | |
| } |
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"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Infinite Looping</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <section class="hero-section"> | |
| <div class="loop-container"> | |
| <div class="item">You know you're in love when you can't fall asleep </div> | |
| <div class="item">because reality is finally better than your dreams. </div> | |
| </div> | |
| </section> | |
| <section class="image-section"> | |
| <div class="second-loop-container"> | |
| <div class="images-wrapper"> | |
| <div class="image-container"><img src="../images/unsplash_1.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_2.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_3.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_4.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_5.jpg" alt="" class="image-class"></div> | |
| </div> | |
| <div class="images-wrapper"> | |
| <div class="image-container"><img src="../images/unsplash_6.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_7.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_8.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_9.jpg" alt="" class="image-class"></div> | |
| <div class="image-container"><img src="../images/unsplash_10.jpg" alt="" class="image-class"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="script.js"></script> | |
| </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
| // lerp.js | |
| export default function lerp(current, target, factor) { | |
| return current * (1 - factor) + target * factor; | |
| } | |
| // script.js | |
| import lerp from "./lerp.js"; | |
| class LoopingElement { | |
| constructor(element, currentTranslation, speed) { | |
| // ... same as before ... | |
| } | |
| events() { | |
| // ... same as before ... | |
| } | |
| goForward() { | |
| // ... same as before ... | |
| } | |
| goBackward() { | |
| // ... same as before ... | |
| } | |
| animate() { | |
| this.direction ? this.goForward() : this.goBackward(); | |
| this.lerp.current = lerp(this.lerp.current, this.lerp.target, | |
| this.lerp.factor); // use imported lerp function | |
| this.element.style.transform = `translateX(${this.lerp.current}%)`; | |
| } | |
| render() { | |
| // ... same as before ... | |
| } | |
| } | |
| let elements = document.querySelectorAll(".item"); | |
| new LoopingElement(elements[0], -1000 / elements.length / 2 + -1000 / elements.length / 2 * (elements.length -1), Math.random()); | |
| new LoopingElement(elements[1], -1000 / elements.length / 2 + -1000 / elements.length / 2 * (elements.length -2), Math.random()); | |
| new LoopingElement(elements[2], -1000 / elements.length / 2 + -1000 / elements.length / 2 * (elements.length -3), Math.random()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment