├── README.md ├── app.js ├── img ├── 0.png ├── 1.png ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.jpg └── logo.jpg ├── index.html ├── project.png └── style.css /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Youtube Lun Dev 3 | 4 | Free code HTML CSS Javascript and Free learning web developer 5 | 6 | 7 | ![Logo](https://yt3.googleusercontent.com/LnD0yL5NAb8yvZu2d25qLZ-oAehUISz9tfe3aN36syGqTKbs4irbPeVUJfNlmVFRzel7KHV3-uo=s88-c-k-c0x00ffffff-no-rj) 8 | 9 | ## Image in project 10 | 11 | ![Alt text](project.png "Lun Dev") 12 | - [Detailed instructions on this project](https://www.youtube.com/@lundeveloper/featured) 13 | 14 | 15 | ## Follow me for more free codes 16 | 17 | - [Youtube Lun Dev](https://www.youtube.com/results?search_query=lun+dev) 18 | - [Tiktok Lun Dev](https://www.tiktok.com/@lun.dev) 19 | - [Website Lun Dev Web](https://lundevweb.com) 20 | 21 | 22 | ## Built By 23 | 24 | This project is built and shared by 25 | 26 | - Lun Dev Youtube 27 | 28 | 29 | ## Feedback 30 | 31 | If you have any feedback, please reach out to us at hohoang.dev@gmail.com 32 | 33 | 34 | ## Tags 35 | 36 | Free code HTML CSS Javascript and Free learning web developer, html code, css code, javascript code tutorial 37 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let listBg = document.querySelectorAll('.bg'); 2 | let listTab = document.querySelectorAll('.tab'); 3 | let titleBanner = document.querySelector('.banner h1'); 4 | window.addEventListener("scroll", (event) => { 5 | /*scrollY is the web scrollbar position (pixel)*/ 6 | let top = this.scrollY; 7 | /*index is the order of classes bg (0,1,2,3,4,5,6,7,8) 8 | When scrolling the web, the classes bg scroll down, 9 | the bigger the index, the faster the movement 10 | */ 11 | listBg.forEach((bg, index) => { 12 | if(index != 0 && index != 8){ 13 | bg.style.transform = `translateY(${(top*index/2)}px)`; 14 | }else if(index == 0){ 15 | bg.style.transform = `translateY(${(top/3)}px)`; 16 | } 17 | }) 18 | titleBanner.style.transform = `translateY(${(top*4/2)}px)`; 19 | 20 | /* parallax scroll in tab 21 | when tab's position is less than 550 px 22 | from scrollbar position add active class to animate 23 | and vice versa 24 | */ 25 | listTab.forEach(tab =>{ 26 | if(tab.offsetTop - top < 550){ 27 | tab.classList.add('active'); 28 | }else{ 29 | tab.classList.remove('active'); 30 | } 31 | }) 32 | }); -------------------------------------------------------------------------------- /img/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/0.png -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/1.png -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/12.jpg -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/8.png -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/9.jpg -------------------------------------------------------------------------------- /img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/img/logo.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 23 | 24 |
25 |

Lu Dev

26 | 27 |

28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque rem obcaecati libero eaque veniam est necessitatibus consectetur commodi non rerum, sapiente distinctio dignissimos! Dolorem eaque velit quam tenetur sapiente, qui veniam iste beatae officiis facilis aut expedita commodi, voluptatibus ullam voluptates! Explicabo, nisi. Odit, neque aliquid maiores minima cumque iusto? 29 |

30 | 31 |
32 | 33 |
34 |
35 | 36 |

Image Name

37 |
38 |
39 | 40 |

Image Name

41 |
42 |
43 | 44 |

Image Name

45 |
46 |
47 | 48 |

Image Name

49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HoanghoDev/parallax_scroll/a4be94eeb7a9eb3e6fc5cd6d712122e7cd07317e/project.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); 2 | body{ 3 | margin :0; 4 | background-color: #210002; 5 | font-family: Poppins; 6 | font-size: 15px; 7 | } 8 | .banner{ 9 | height: 100vh; 10 | position: relative; 11 | overflow: hidden; 12 | } 13 | .banner .bg{ 14 | position: absolute; 15 | left: 0; 16 | bottom: 0; 17 | width: 100%; 18 | height: 100%; 19 | background-size: auto 100%; 20 | background-position: center bottom; 21 | transition: 0.1s; 22 | } 23 | .banner .bg-1{ 24 | background-image: url('img/0.png'); 25 | } 26 | .banner .bg-2{ 27 | background-image: url('img/1.png'); 28 | } 29 | .banner .bg-3{ 30 | background-image: url('img/2.png'); 31 | } 32 | .banner .bg-4{ 33 | background-image: url('img/3.png'); 34 | } 35 | .banner .bg-5{ 36 | background-image: url('img/4.png'); 37 | } 38 | .banner .bg-6{ 39 | background-image: url('img/5.png'); 40 | } 41 | .banner .bg-7{ 42 | background-image: url('img/6.png'); 43 | } 44 | .banner .bg-8{ 45 | background-image: url('img/7.png'); 46 | } 47 | .banner .bg-9{ 48 | background-image: url('img/8.png'); 49 | } 50 | .banner h1{ 51 | position: absolute; 52 | top: 20%; 53 | left: 0; 54 | width: 100%; 55 | text-align: center; 56 | font-size: 11rem; 57 | font-family: 'Pacifico', cursive; 58 | color: #fff; 59 | } 60 | .intro{ 61 | min-height: 50vh; 62 | color: #eee; 63 | display: flex; 64 | flex-direction: column; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | .intro img{ 69 | width: 130px; 70 | height: 130px; 71 | border-radius: 50%; 72 | } 73 | .intro p{ 74 | width: 700px; 75 | max-width: 100%; 76 | text-align: center; 77 | } 78 | .intro button{ 79 | background-color: #FD0003; 80 | padding: 10px 50px; 81 | border: 1px solid #591F1D; 82 | border-radius: 5px; 83 | color: #fff; 84 | font-family: Poppins; 85 | font-weight: 500; 86 | } 87 | .animation-show{ 88 | transform: translateY(50px); 89 | opacity: 0; 90 | transition: 0.7s; 91 | } 92 | .active .animation-show{ 93 | transform: translateY(0); 94 | opacity: 1; 95 | } 96 | .animation-show:nth-child(2){ 97 | transition-delay: 0.3s; 98 | } 99 | .animation-show:nth-child(3){ 100 | transition-delay: 0.6s; 101 | } 102 | .animation-show:nth-child(4){ 103 | transition-delay: 0.9s; 104 | } 105 | .library{ 106 | margin-top: 50px; 107 | display: grid; 108 | grid-template-columns: repeat(4, 1fr); 109 | text-align: center; 110 | color: #fff; 111 | } 112 | .library img{ 113 | width: 90%; 114 | height: 500px; 115 | object-fit: cover; 116 | } 117 | @media screen and (max-width: 768px){ 118 | .banner h1{ 119 | font-size: 5rem; 120 | } 121 | .library{ 122 | grid-template-columns: repeat(2, 1fr); 123 | } 124 | .library img{ 125 | height: 300px; 126 | } 127 | } --------------------------------------------------------------------------------