├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── imgm.jpg
    │   ├── imgm1.png
    │   ├── imgm2.png
    │   ├── imgm3.png
    │   └── imgm4.png
    ├── js
    │   ├── main.js
    │   └── rellax.min.js
    └── scss
    │   └── styles.scss
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Parallax Scrolling Website
 2 | ## [Watch it on youtube](https://youtu.be/JrU6bsuNU7Y)
 3 | ### Parallax Scrolling Website
 4 | 
 5 | - Parallax Scrolling Animation Using HTML CSS JAVASCRIPT
 6 | - Includes CSS animations.
 7 | - Includes parallax animation.
 8 | - Developed first with the Mobile First methodology, then for desktop.
 9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
10 | 
11 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
12 | 
13 | ![preview img](/preview.png)
14 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*===== GOGGLE FONTS =====*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
  3 | /*===== VARIABLES SCSS =====*/
  4 | /*===== VARIABLES CSS =====*/
  5 | /*=== Colores ===*/
  6 | :root {
  7 |   --first-color: #0396A6;
  8 |   --dark-color: #000;
  9 |   --white-color: #F2F2F2;
 10 | }
 11 | 
 12 | /*=== Fuente y tipografia ===*/
 13 | :root {
 14 |   --body-font: 'Open Sans', sans-serif;
 15 |   --biggest-font-size: 3.5rem;
 16 |   --h2-font-size: 1.25rem;
 17 |   --normal-font-size: 0.938rem;
 18 | }
 19 | 
 20 | @media screen and (min-width: 768px) {
 21 |   :root {
 22 |     --biggest-font-size: 7rem;
 23 |     --h2-font-size: 1.5rem;
 24 |     --normal-font-size: 1rem;
 25 |   }
 26 | }
 27 | 
 28 | /*=== z index ===*/
 29 | :root {
 30 |   --z-back: -10;
 31 |   --z-normal: 1;
 32 |   --z-tooltip: 10;
 33 |   --z-fixed: 100;
 34 |   --z-modal: 1000;
 35 | }
 36 | 
 37 | /*===== BASE =====*/
 38 | *, ::before, ::after {
 39 |   -webkit-box-sizing: border-box;
 40 |           box-sizing: border-box;
 41 | }
 42 | 
 43 | html {
 44 |   scroll-behavior: smooth;
 45 | }
 46 | 
 47 | body {
 48 |   margin: 0;
 49 |   font-family: var(--body-font);
 50 | }
 51 | 
 52 | h1, h2, h3, p {
 53 |   margin: 0;
 54 | }
 55 | 
 56 | ul {
 57 |   margin: 0;
 58 |   padding: 0;
 59 |   list-style: none;
 60 | }
 61 | 
 62 | a {
 63 |   text-decoration: none;
 64 | }
 65 | 
 66 | img {
 67 |   max-width: 100%;
 68 |   height: auto;
 69 | }
 70 | 
 71 | /*===== LAYOUT =====*/
 72 | .bd-grid {
 73 |   max-width: 1200px;
 74 |   margin-left: 1rem;
 75 |   margin-right: 1rem;
 76 | }
 77 | 
 78 | .l-header {
 79 |   width: 100%;
 80 |   position: absolute;
 81 |   top: 0;
 82 |   left: 0;
 83 |   background-color: transparent;
 84 |   z-index: var(--z-modal);
 85 | }
 86 | 
 87 | /*===== NAVBAR =====*/
 88 | .nav {
 89 |   height: 3rem;
 90 |   display: -webkit-box;
 91 |   display: -ms-flexbox;
 92 |   display: flex;
 93 |   -webkit-box-pack: justify;
 94 |       -ms-flex-pack: justify;
 95 |           justify-content: space-between;
 96 |   -webkit-box-align: center;
 97 |       -ms-flex-align: center;
 98 |           align-items: center;
 99 |   font-weight: bold;
100 | }
101 | 
102 | @media screen and (max-width: 768px) {
103 |   .nav__menu {
104 |     position: fixed;
105 |     left: 0%;
106 |     top: -100%;
107 |     background-color: rgba(0, 0, 0, 0.9);
108 |     width: 100%;
109 |     height: 40%;
110 |     padding: 2rem;
111 |     text-align: center;
112 |     z-index: var(--z-fixed);
113 |     -webkit-transition: .3s;
114 |     transition: .3s;
115 |   }
116 | }
117 | 
118 | .nav__logo {
119 |   color: var(--white-color);
120 | }
121 | 
122 | .nav__item {
123 |   margin-bottom: 2rem;
124 | }
125 | 
126 | .nav__link {
127 |   color: var(--white-color);
128 | }
129 | 
130 | .nav__toggle {
131 |   font-size: 1.5rem;
132 |   color: var(--white-color);
133 |   cursor: pointer;
134 | }
135 | 
136 | /*=== Show menu ===*/
137 | .show {
138 |   top: 3rem;
139 | }
140 | 
141 | /*===== HOME =====*/
142 | .home {
143 |   height: 100vh;
144 |   overflow: hidden;
145 |   position: relative;
146 | }
147 | 
148 | .home__parallax {
149 |   width: 100%;
150 |   height: 100%;
151 |   position: absolute;
152 |   background-repeat: no-repeat;
153 |   background-size: cover;
154 |   background-position: center;
155 | }
156 | 
157 | .home__parallax-img1 {
158 |   background-image: url("/assets/img/imgm1.png");
159 |   z-index: var(--z-normal);
160 | }
161 | 
162 | .home__parallax-img2 {
163 |   background-image: url("/assets/img/imgm2.png");
164 |   z-index: var(--z-tooltip);
165 | }
166 | 
167 | .home__parallax-img3 {
168 |   background-image: url("/assets/img/imgm3.png");
169 |   z-index: var(--z-fixed);
170 | }
171 | 
172 | .home__parallax-img4 {
173 |   background-image: url("/assets/img/imgm4.png");
174 |   z-index: var(--z-fixed);
175 | }
176 | 
177 | .home__title, .home__subtitle {
178 |   position: absolute;
179 |   width: 100%;
180 |   display: -webkit-box;
181 |   display: -ms-flexbox;
182 |   display: flex;
183 |   -webkit-box-pack: center;
184 |       -ms-flex-pack: center;
185 |           justify-content: center;
186 |   color: var(--white-color);
187 | }
188 | 
189 | .home__title {
190 |   top: 32%;
191 |   font-size: var(--biggest-font-size);
192 |   z-index: var(--z-normal);
193 | }
194 | 
195 | .home__subtitle {
196 |   top: 44%;
197 |   font-size: var(--h2-font-size);
198 |   font-weight: bold;
199 |   z-index: var(--z-tooltip);
200 | }
201 | 
202 | .home__scroll {
203 |   position: absolute;
204 |   bottom: 2.5rem;
205 |   width: 100%;
206 |   display: -webkit-box;
207 |   display: -ms-flexbox;
208 |   display: flex;
209 |   -webkit-box-pack: center;
210 |       -ms-flex-pack: center;
211 |           justify-content: center;
212 |   font-size: 1.5rem;
213 |   z-index: var(--z-modal);
214 | }
215 | 
216 | .home__scroll .bx-mouse {
217 |   color: var(--white-color);
218 | }
219 | 
220 | /*===== SECTION =====*/
221 | .l-section {
222 |   background-color: var(--dark-color);
223 | }
224 | 
225 | .section {
226 |   height: 100vh;
227 |   max-width: 950px;
228 |   margin-left: 1rem;
229 |   margin-right: 1rem;
230 |   padding: 2rem 0;
231 |   color: var(--white-color);
232 |   display: -webkit-box;
233 |   display: -ms-flexbox;
234 |   display: flex;
235 |   -webkit-box-orient: vertical;
236 |   -webkit-box-direction: normal;
237 |       -ms-flex-direction: column;
238 |           flex-direction: column;
239 |   -webkit-box-pack: space-evenly;
240 |       -ms-flex-pack: space-evenly;
241 |           justify-content: space-evenly;
242 |   -webkit-box-align: center;
243 |       -ms-flex-align: center;
244 |           align-items: center;
245 | }
246 | 
247 | .section__data {
248 |   margin-bottom: 3rem;
249 | }
250 | 
251 | .section__title {
252 |   font-size: var(--h2-font-size);
253 |   color: var(--first-color);
254 |   margin-bottom: 1rem;
255 | }
256 | 
257 | .section__img {
258 |   width: 285px;
259 |   border-radius: .5rem;
260 | }
261 | 
262 | /*===== MEDIA QUERIES =====*/
263 | @media screen and (min-width: 760px) {
264 |   .nav {
265 |     height: 4rem;
266 |   }
267 |   .nav__list {
268 |     display: -webkit-box;
269 |     display: -ms-flexbox;
270 |     display: flex;
271 |   }
272 |   .nav__item {
273 |     margin-right: 3rem;
274 |     margin-bottom: 0;
275 |   }
276 |   .nav__toggle {
277 |     display: none;
278 |   }
279 |   .home__title {
280 |     top: 27%;
281 |   }
282 |   .home__subtitle {
283 |     top: 50%;
284 |   }
285 |   .section {
286 |     -webkit-box-orient: horizontal;
287 |     -webkit-box-direction: normal;
288 |         -ms-flex-direction: row;
289 |             flex-direction: row;
290 |     margin-left: auto;
291 |     margin-right: auto;
292 |   }
293 |   .section__text {
294 |     padding-right: 4rem;
295 |   }
296 |   .section__img {
297 |     width: 470px;
298 |   }
299 | }
300 | 
301 | @media screen and (min-width: 1200px) {
302 |   .bd-grid {
303 |     margin-left: auto;
304 |     margin-right: auto;
305 |   }
306 | }
307 | 


--------------------------------------------------------------------------------
/assets/img/imgm.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/assets/img/imgm.jpg


--------------------------------------------------------------------------------
/assets/img/imgm1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/assets/img/imgm1.png


--------------------------------------------------------------------------------
/assets/img/imgm2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/assets/img/imgm2.png


--------------------------------------------------------------------------------
/assets/img/imgm3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/assets/img/imgm3.png


--------------------------------------------------------------------------------
/assets/img/imgm4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/assets/img/imgm4.png


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | /*====== MENU =====*/
 2 | const showMenu = (toggleId,navId) =>{
 3 |     const toggle = document.getElementById(toggleId),
 4 |     nav = document.getElementById(navId)
 5 | 
 6 |     if(toggle && nav){
 7 |         toggle.addEventListener('click', ()=>{
 8 |             nav.classList.toggle('show')
 9 |         })
10 |     }
11 | }
12 | showMenu('nav-toggle','nav-menu')
13 | 
14 | /*====== RELLAX =====*/
15 | var rellax = new Rellax('.parallax');
16 | 
17 | 
18 | /*====== ANIMATE GSAP ======*/
19 | /*Navbar*/
20 | gsap.from('.nav__logo', {opacity:0, duration: 3, delay: .5, y: 30, ease:'expo.out'});
21 | gsap.from('.nav__toggle', {opacity:0, duration: 3, delay: .7, y: 30, ease:'expo.out'});
22 | gsap.from('.nav__item', {opacity: 0, duration: 3, delay: .7, y: 35, ease:'expo.out', stagger: .2})
23 | 
24 | /*Text*/
25 | gsap.from('.home__title', {opacity:0, duration: 3, delay: 1.3, y: 35, ease:'expo.out'});
26 | gsap.from('.home__subtitle', {opacity:0, duration: 3, delay: 1.1 , y: 35, ease:'expo.out'});
27 | 
28 | /*Scroll*/
29 | gsap.from('.home__scroll', {opacity:0, duration: 3, delay: 1.5, y: 25, ease:'expo.out'});
30 | 
31 | 
32 | /*====== SCROLL REVEAL SECTION ======*/
33 | const sr = ScrollReveal({
34 |     duration: 2500,
35 |     reset: true
36 | });
37 | 
38 | /*Data*/
39 | sr.reveal('.section__data',{origin: 'left',distance: '70px'}); 
40 | 
41 | /*Imgs*/
42 | sr.reveal('.section__img',{origin: 'left',distance: '90px',delay: 200}); 
43 | 


--------------------------------------------------------------------------------
/assets/js/rellax.min.js:
--------------------------------------------------------------------------------
 1 | (function(q,g){"function"===typeof define&&define.amd?define([],g):"object"===typeof module&&module.exports?module.exports=g():q.Rellax=g()})("undefined"!==typeof window?window:global,function(){var q=function(g,u){function C(){if(3===a.options.breakpoints.length&&Array.isArray(a.options.breakpoints)){var f=!0,c=!0,b;a.options.breakpoints.forEach(function(a){"number"!==typeof a&&(c=!1);null!==b&&a<b&&(f=!1);b=a});if(f&&c)return}a.options.breakpoints=[576,768,1201];console.warn("Rellax: You must pass an array of 3 numbers in ascending order to the breakpoints option. Defaults reverted")}
 2 | var a=Object.create(q.prototype),l=0,v=0,m=0,n=0,d=[],w=!0,A=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){return setTimeout(a,1E3/60)},p=null,x=!1;try{var k=Object.defineProperty({},"passive",{get:function(){x=!0}});window.addEventListener("testPassive",null,k);window.removeEventListener("testPassive",null,k)}catch(f){}var D=window.cancelAnimationFrame||window.mozCancelAnimationFrame||
 3 | clearTimeout,E=window.transformProp||function(){var a=document.createElement("div");if(null===a.style.transform){var c=["Webkit","Moz","ms"],b;for(b in c)if(void 0!==a.style[c[b]+"Transform"])return c[b]+"Transform"}return"transform"}();a.options={speed:-2,verticalSpeed:null,horizontalSpeed:null,breakpoints:[576,768,1201],center:!1,wrapper:null,relativeToWrapper:!1,round:!0,vertical:!0,horizontal:!1,verticalScrollAxis:"y",horizontalScrollAxis:"x",callback:function(){}};u&&Object.keys(u).forEach(function(d){a.options[d]=
 4 | u[d]});u&&u.breakpoints&&C();g||(g=".rellax");k="string"===typeof g?document.querySelectorAll(g):[g];if(0<k.length){a.elems=k;if(a.options.wrapper&&!a.options.wrapper.nodeType)if(k=document.querySelector(a.options.wrapper))a.options.wrapper=k;else{console.warn("Rellax: The wrapper you're trying to use doesn't exist.");return}var F,B=function(){for(var f=0;f<d.length;f++)a.elems[f].style.cssText=d[f].style;d=[];v=window.innerHeight;n=window.innerWidth;f=a.options.breakpoints;F=n<f[0]?"xs":n>=f[0]&&n<
 5 | f[1]?"sm":n>=f[1]&&n<f[2]?"md":"lg";H();for(f=0;f<a.elems.length;f++){var c=void 0,b=a.elems[f],e=b.getAttribute("data-rellax-percentage"),y=b.getAttribute("data-rellax-speed"),t=b.getAttribute("data-rellax-xs-speed"),g=b.getAttribute("data-rellax-mobile-speed"),h=b.getAttribute("data-rellax-tablet-speed"),k=b.getAttribute("data-rellax-desktop-speed"),l=b.getAttribute("data-rellax-vertical-speed"),m=b.getAttribute("data-rellax-horizontal-speed"),p=b.getAttribute("data-rellax-vertical-scroll-axis"),
 6 | q=b.getAttribute("data-rellax-horizontal-scroll-axis"),u=b.getAttribute("data-rellax-zindex")||0,x=b.getAttribute("data-rellax-min"),A=b.getAttribute("data-rellax-max"),C=b.getAttribute("data-rellax-min-x"),D=b.getAttribute("data-rellax-max-x"),E=b.getAttribute("data-rellax-min-y"),L=b.getAttribute("data-rellax-max-y"),r=!0;t||g||h||k?c={xs:t,sm:g,md:h,lg:k}:r=!1;t=a.options.wrapper?a.options.wrapper.scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;a.options.relativeToWrapper&&
 7 | (t=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)-a.options.wrapper.offsetTop);var z=a.options.vertical?e||a.options.center?t:0:0,I=a.options.horizontal?e||a.options.center?a.options.wrapper?a.options.wrapper.scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft:0:0;t=z+b.getBoundingClientRect().top;g=b.clientHeight||b.offsetHeight||b.scrollHeight;h=I+b.getBoundingClientRect().left;k=b.clientWidth||b.offsetWidth||b.scrollWidth;
 8 | z=e?e:(z-t+v)/(g+v);e=e?e:(I-h+n)/(k+n);a.options.center&&(z=e=.5);c=r&&null!==c[F]?Number(c[F]):y?y:a.options.speed;l=l?l:a.options.verticalSpeed;m=m?m:a.options.horizontalSpeed;p=p?p:a.options.verticalScrollAxis;q=q?q:a.options.horizontalScrollAxis;y=J(e,z,c,l,m);b=b.style.cssText;r="";if(e=/transform\s*:/i.exec(b))r=b.slice(e.index),r=(e=r.indexOf(";"))?" "+r.slice(11,e).replace(/\s/g,""):" "+r.slice(11).replace(/\s/g,"");d.push({baseX:y.x,baseY:y.y,top:t,left:h,height:g,width:k,speed:c,verticalSpeed:l,
 9 | horizontalSpeed:m,verticalScrollAxis:p,horizontalScrollAxis:q,style:b,transform:r,zindex:u,min:x,max:A,minX:C,maxX:D,minY:E,maxY:L})}K();w&&(window.addEventListener("resize",B),w=!1,G())},H=function(){var d=l,c=m;l=a.options.wrapper?a.options.wrapper.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset;m=a.options.wrapper?a.options.wrapper.scrollLeft:(document.documentElement||document.body.parentNode||document.body).scrollLeft||window.pageXOffset;
10 | a.options.relativeToWrapper&&(l=((document.documentElement||document.body.parentNode||document.body).scrollTop||window.pageYOffset)-a.options.wrapper.offsetTop);return d!=l&&a.options.vertical||c!=m&&a.options.horizontal?!0:!1},J=function(d,c,b,e,g){var f={};d=100*(g?g:b)*(1-d);c=100*(e?e:b)*(1-c);f.x=a.options.round?Math.round(d):Math.round(100*d)/100;f.y=a.options.round?Math.round(c):Math.round(100*c)/100;return f},h=function(){window.removeEventListener("resize",h);window.removeEventListener("orientationchange",
11 | h);(a.options.wrapper?a.options.wrapper:window).removeEventListener("scroll",h);(a.options.wrapper?a.options.wrapper:document).removeEventListener("touchmove",h);p=A(G)},G=function(){H()&&!1===w?(K(),p=A(G)):(p=null,window.addEventListener("resize",h),window.addEventListener("orientationchange",h),(a.options.wrapper?a.options.wrapper:window).addEventListener("scroll",h,x?{passive:!0}:!1),(a.options.wrapper?a.options.wrapper:document).addEventListener("touchmove",h,x?{passive:!0}:!1))},K=function(){for(var f,
12 | c=0;c<a.elems.length;c++){var b=d[c].verticalScrollAxis.toLowerCase(),e=d[c].horizontalScrollAxis.toLowerCase();f=-1!=b.indexOf("x")?l:0;b=-1!=b.indexOf("y")?l:0;var g=-1!=e.indexOf("x")?m:0;e=-1!=e.indexOf("y")?m:0;f=J((f+g-d[c].left+n)/(d[c].width+n),(b+e-d[c].top+v)/(d[c].height+v),d[c].speed,d[c].verticalSpeed,d[c].horizontalSpeed);e=f.y-d[c].baseY;b=f.x-d[c].baseX;null!==d[c].min&&(a.options.vertical&&!a.options.horizontal&&(e=e<=d[c].min?d[c].min:e),a.options.horizontal&&!a.options.vertical&&
13 | (b=b<=d[c].min?d[c].min:b));null!=d[c].minY&&(e=e<=d[c].minY?d[c].minY:e);null!=d[c].minX&&(b=b<=d[c].minX?d[c].minX:b);null!==d[c].max&&(a.options.vertical&&!a.options.horizontal&&(e=e>=d[c].max?d[c].max:e),a.options.horizontal&&!a.options.vertical&&(b=b>=d[c].max?d[c].max:b));null!=d[c].maxY&&(e=e>=d[c].maxY?d[c].maxY:e);null!=d[c].maxX&&(b=b>=d[c].maxX?d[c].maxX:b);a.elems[c].style[E]="translate3d("+(a.options.horizontal?b:"0")+"px,"+(a.options.vertical?e:"0")+"px,"+d[c].zindex+"px) "+d[c].transform}a.options.callback(f)};
14 | a.destroy=function(){for(var f=0;f<a.elems.length;f++)a.elems[f].style.cssText=d[f].style;w||(window.removeEventListener("resize",B),w=!0);D(p);p=null};B();a.refresh=B;return a}console.warn("Rellax: The elements you're trying to select don't exist.")};return q});
15 | 


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
  1 | /*===== GOGGLE FONTS =====*/
  2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
  3 | 
  4 | /*===== VARIABLES SCSS =====*/
  5 | $header-height: 3rem;
  6 | 
  7 | /*===== VARIABLES CSS =====*/
  8 | 
  9 | /*=== Colores ===*/
 10 | :root{
 11 |     --first-color: #0396A6;
 12 |     --dark-color: #000;
 13 |     --white-color: #F2F2F2;
 14 | }
 15 | 
 16 | /*=== Fuente y tipografia ===*/
 17 | :root{
 18 |     --body-font: 'Open Sans', sans-serif;
 19 | 
 20 |     --biggest-font-size: 3.5rem;
 21 |     --h2-font-size: 1.25rem;
 22 |     --normal-font-size: 0.938rem;
 23 | 
 24 |     @media screen and (min-width: 768px){
 25 |         --biggest-font-size: 7rem;
 26 |         --h2-font-size: 1.5rem;
 27 |         --normal-font-size: 1rem;
 28 |     }
 29 | }
 30 | 
 31 | /*=== z index ===*/
 32 | :root{
 33 |     --z-back: -10;
 34 |     --z-normal: 1;
 35 |     --z-tooltip: 10;
 36 |     --z-fixed: 100;
 37 |     --z-modal: 1000;
 38 | }
 39 | 
 40 | /*===== BASE =====*/
 41 | *,::before,::after{
 42 |     box-sizing: border-box;
 43 | }
 44 | html{
 45 |     scroll-behavior: smooth;
 46 | }
 47 | body{
 48 |     margin: 0;
 49 |     font-family: var(--body-font);
 50 | }
 51 | h1,h2,h3,p{
 52 |     margin: 0;  
 53 | }
 54 | ul{
 55 |     margin: 0;
 56 |     padding: 0;
 57 |     list-style: none;
 58 | }
 59 | a{
 60 |     text-decoration: none;
 61 | }
 62 | img{
 63 |     max-width: 100%;
 64 |     height: auto;
 65 | }
 66 | /*===== LAYOUT =====*/
 67 | .bd-grid{
 68 |     max-width: 1200px;
 69 |     margin-left: 1rem;
 70 |     margin-right: 1rem;
 71 | }
 72 | 
 73 | .l-header{
 74 |     width: 100%;
 75 |     position: absolute;
 76 |     top: 0;
 77 |     left: 0;
 78 |     background-color: transparent;
 79 |     z-index: var(--z-modal);
 80 | }
 81 | /*===== NAVBAR =====*/
 82 | .nav{
 83 |     height: $header-height;
 84 |     display: flex;
 85 |     justify-content: space-between;
 86 |     align-items: center;
 87 |     font-weight: bold;
 88 | 
 89 |     &__menu{
 90 |         @media screen and(max-width: 768px){
 91 |             position: fixed;
 92 |             left: 0%;
 93 |             top: -100%;
 94 |             background-color: rgba(0, 0, 0, 0.9);;
 95 |             width: 100%;
 96 |             height: 40%;
 97 |             padding: 2rem;
 98 |             text-align: center;
 99 |             z-index: var(--z-fixed);
100 |             transition: .3s;
101 |         }
102 |     }
103 |     &__logo{
104 |         color: var(--white-color);
105 |     }
106 |     &__item{
107 |         margin-bottom: 2rem;
108 |     }
109 |     &__link{
110 |         color: var(--white-color);
111 |     }
112 |     &__toggle{
113 |         font-size: 1.5rem;
114 |         color: var(--white-color);
115 |         cursor: pointer;
116 |     }
117 | }
118 | /*=== Show menu ===*/
119 | .show{
120 |     top: $header-height;
121 | }
122 | 
123 | /*===== HOME =====*/
124 | .home{
125 |     height: 100vh;
126 |     overflow: hidden;
127 |     position: relative;
128 | 
129 |     &__parallax{
130 |         width: 100%;
131 |         height: 100%;
132 |         position: absolute;
133 |         background-repeat: no-repeat;
134 |         background-size: cover;
135 |         background-position: center;
136 | 
137 |         &-img1{
138 |             background-image: url('/assets/img/imgm1.png');
139 |             z-index: var(--z-normal);
140 |         }
141 |         &-img2{
142 |             background-image: url('/assets/img/imgm2.png');
143 |             z-index: var(--z-tooltip);
144 |         }
145 |         &-img3{
146 |             background-image: url('/assets/img/imgm3.png');
147 |             z-index: var(--z-fixed);
148 |         }
149 |         &-img4{
150 |             background-image: url('/assets/img/imgm4.png');
151 |             z-index: var(--z-fixed);
152 |         }
153 |     }
154 | 
155 |     &__title,&__subtitle{
156 |         position: absolute;
157 |         width: 100%;
158 |         display: flex;
159 |         justify-content: center;
160 |         color: var(--white-color);
161 |     }
162 |     &__title{
163 |         top: 32%;
164 |         font-size: var(--biggest-font-size);
165 |         z-index: var(--z-normal);
166 |     }
167 |     &__subtitle{
168 |         top: 44%;
169 |         font-size: var(--h2-font-size);
170 |         font-weight: bold;
171 |         z-index: var(--z-tooltip);
172 |     }
173 |     &__scroll{
174 |         position: absolute;
175 |         bottom: 2.5rem;
176 |         width: 100%;
177 |         display: flex;
178 |         justify-content: center;
179 |         font-size: 1.5rem;
180 |         z-index: var(--z-modal);
181 | 
182 |         & .bx-mouse{
183 |             color: var(--white-color);
184 |         }
185 |     }
186 | }
187 | 
188 | /*===== SECTION =====*/
189 | .l-section{
190 |     background-color: var(--dark-color); 
191 | }
192 | 
193 | .section{
194 |     height: 100vh;
195 |     max-width: 950px;
196 |     margin-left: 1rem;
197 |     margin-right: 1rem;
198 |     padding: 2rem 0;
199 |     color: var(--white-color);
200 |     display: flex;
201 |     flex-direction: column;
202 |     justify-content: space-evenly;
203 |     align-items: center;
204 | 
205 |     &__data{
206 |         margin-bottom: 3rem;
207 |     }
208 |     &__title{
209 |         font-size: var(--h2-font-size);
210 |         color: var(--first-color);
211 |         margin-bottom: 1rem;
212 |     }
213 |     &__img{
214 |         width: 285px;
215 |         border-radius: .5rem;
216 |     }
217 | 
218 | }
219 | 
220 | /*===== MEDIA QUERIES =====*/
221 | @media screen and(min-width: 760px){
222 |     .nav{
223 |         height: $header-height + 1rem;
224 | 
225 |         &__list{
226 |             display: flex;
227 |         }
228 |         &__item{
229 |             margin-right: 3rem;
230 |             margin-bottom: 0;
231 |         }
232 |         &__toggle{
233 |             display: none;
234 |         }
235 |     }
236 |     .home{
237 |         &__title{
238 |             top: 27%;
239 |         }
240 |         &__subtitle{
241 |             top: 50%;
242 |         }
243 |     }
244 | 
245 |     .section{
246 |         flex-direction: row;
247 |         margin-left: auto;
248 |         margin-right: auto;
249 | 
250 |         &__text{
251 |             padding-right: 4rem;
252 |         }
253 | 
254 |         &__img{
255 |             width: 470px;
256 |         }
257 |     }
258 | }
259 | @media screen and (min-width: 1200px){
260 |     .bd-grid{
261 |         margin-left: auto;
262 |         margin-right: auto;
263 |     }
264 | }
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |         <title>Parallax responsive landing page</title>
 7 | 
 8 |         <link rel="stylesheet" href="assets/css/styles.css">
 9 | 
10 |         <!-- ICONS BOXICONS -->
11 |         <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
12 |     </head>
13 |     <body>
14 |         <!-- ===== HEADER =====-->
15 |         <header class="l-header">
16 |             <nav class="nav bd-grid">
17 |                 <a href="#" class="nav__logo">Mountain</a>
18 | 
19 |                 <div class="nav__toggle" id="nav-toggle">
20 |                     <i class='bx bx-menu-alt-right'></i>
21 |                 </div>
22 | 
23 |                 <div class="nav__menu" id="nav-menu">
24 |                     <ul class="nav__list">
25 |                         <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
26 |                         <li class="nav__item"><a href="#" class="nav__link">Explore</a></li>
27 |                         <li class="nav__item"><a href="#" class="nav__link">Aventure</a></li>
28 |                         <li class="nav__item"><a href="#" class="nav__link">Discover</a></li>
29 |                     </ul>
30 |                 </div>
31 |             </nav>
32 |         </header>
33 | 
34 |         <main>
35 |             <!-- ===== HOME =====-->
36 |             <div class="home">
37 |                 <div class="parallax home__parallax home__parallax-img1" data-rellax-speed="-9"></div>
38 |                 <div class="parallax home__parallax home__parallax-img2" data-rellax-speed="-7"></div>
39 |                 <div class="parallax home__parallax home__parallax-img3" data-rellax-speed="-6"></div>
40 |                 <div class="parallax home__parallax home__parallax-img4" data-rellax-speed="-3"></div>
41 | 
42 |                 <h1 class="parallax home__title" data-rellax-speed="-6">Mountain</h1>
43 |                 <span class="parallax home__subtitle" data-rellax-speed="-5">Mountain explore</span> 
44 | 
45 |                 <div class="home__scroll">
46 |                    <a href="#section"><i class='bx bx-mouse'></i></a>
47 |                 </div>
48 |             </div>
49 | 
50 |             <!-- ===== SECTION =====-->
51 |             <section class="l-section" id="section">
52 |                 <div class="section">
53 |                     <div class="section__data">
54 |                         <h2 class="section__title">Scaling mountains</h2>
55 |                         <p class="section__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, laboriosam. Esse ipsum culpa laboriosam, totam hic quidem recusandae eos, numquam iusto aliquid expedita est sapiente quaerat inventore voluptatem corporis aliquam.</p>
56 |                     </div>
57 |         
58 |                     <img src="assets/img/imgm.jpg" alt="" class="section__img">
59 |                 </div>
60 |             </section>
61 |         </main>
62 | 
63 |         <!-- RELLAX JS -->
64 |         <script src="assets/js/rellax.min.js"></script>
65 | 
66 |         <!-- GSAP -->
67 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
68 | 
69 |         <!-- SCROLL REVEAL -->
70 |         <script src="https://unpkg.com/scrollreveal"></script>
71 | 
72 |         <!-- MAIN JS -->
73 |         <script src="assets/js/main.js"></script>
74 | 
75 |     </body>
76 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/parallax-scrolling-website/bf91c927a4b4afb1425e7320968a21172ddde07d/preview.png


--------------------------------------------------------------------------------