├── README.md
├── css
    └── styles.css
├── demo
    ├── 1.png
    ├── 2.png
    ├── 3.png
    └── 4.png
├── index.html
└── js
    └── main.js


/README.md:
--------------------------------------------------------------------------------
 1 | # Parallax Landing Page
 2 | 
 3 | Parallax Landing Page is a web page with parallax effects utilized by Rellax.js.
 4 | 
 5 | <br />
 6 | 
 7 | ## Demo
 8 | 
 9 | This is how this app looks :
10 | 
11 | <img src="https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/master/demo/1.png" width="90%"></img> <br><br>
12 | 
13 | Actuallyou will see parallax effects when scrolling down this app. <br>
14 | 
15 | <img src="https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/master/demo/2.png" width="90%"></img>
16 | <img src="https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/master/demo/3.png" width="90%"></img>
17 | <img src="https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/master/demo/4.png" width="90%"></img>
18 | 
19 | <br />
20 | 
21 | ## Reference
22 | 
23 | - [Traversy Media - Parallax Landing Page using Rellax.js](https://www.youtube.com/watch?v=aAxt0Z7IXIo)
24 | 
25 | <br />
26 | 
27 | ![Hello !](https://api.visitorbadge.io/api/VisitorHit?user=kevinadhiguna&repo=parallax-landing-page&label=thanks%20for%20dropping%20in%20!&labelColor=%23000000&countColor=%23FFFFFF)
28 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  2 | 
  3 | :root {
  4 |     --primary-color: #2d2254;
  5 |     --secondary-color: #f5c42f;
  6 |     --text-color: #c5bbec;
  7 | }
  8 | 
  9 | * {
 10 |     box-sizing: border-box;
 11 |     margin: 0;
 12 |     padding: 0;
 13 | }
 14 | 
 15 | body {
 16 |    font-family: 'Montserrat', sans-serif;
 17 |    background: var(--primary-color);
 18 |    color: #fff;
 19 |    line-height: 1.6; 
 20 | }
 21 | 
 22 | h1,
 23 | h2,
 24 | h3,
 25 | p {
 26 |     margin-bottom: 10px;
 27 | }
 28 | 
 29 | a {
 30 |     text-decoration: none;
 31 |     color: #fff;
 32 | }
 33 | 
 34 | ul {
 35 |     list-style: none;
 36 | }
 37 | 
 38 | .btn {
 39 |     display: inline-block;
 40 |     border: 0;
 41 |     background: var(--secondary-color);
 42 |     color: #fff;
 43 |     border-radius: 20px;
 44 |     padding: 8px 30px;
 45 |     text-transform: uppercase;
 46 |     font-weight: bold;
 47 |     font-size: 16px;
 48 |     margin-top: 10px;
 49 | }
 50 | 
 51 | .btn:hover {
 52 |     transform: scale(0.98);
 53 | }
 54 | 
 55 | .primary-text {
 56 |     color: var(--primary-color);
 57 | }
 58 | 
 59 | .secondary-text {
 60 |     color: var(--secondary-color);
 61 | }
 62 | 
 63 | .section {
 64 |     position: relative;
 65 |     padding: 0 20px;
 66 | }
 67 | 
 68 | /* Section Top */
 69 | .section-top {
 70 |     min-height: 500px;
 71 |     background: url('https://i.ibb.co/PhVR2Vh/bg1.png') 
 72 |         no-repeat center center/cover;
 73 | }
 74 | 
 75 | .section-top h1 {
 76 |     font-size: 70px;
 77 |     line-height: 1.3;
 78 | }
 79 | 
 80 | .section-top .content {
 81 |     position: absolute;
 82 |     top: 100px;
 83 |     right: 20px;
 84 |     width: 55%;
 85 | }
 86 | 
 87 | /* Sectionn Stream */
 88 | .section-stream {
 89 |     min-height: 700px;
 90 |     background: url('https://i.ibb.co/bsX6RV0/bg2.png') 
 91 |         no-repeat center center/cover;
 92 | }
 93 | 
 94 | .section-stream h2 {
 95 |     font-size: 35px;
 96 | }
 97 | 
 98 | .section-stream .play {
 99 |     width: 27%;
100 |     position: absolute;
101 |     top: 100px;
102 |     left: 50px;
103 | }
104 | 
105 | .section-stream .content {
106 |     position: absolute;
107 |     width: 50%;
108 |     top: 130px;
109 |     right: 70px;
110 | }
111 | 
112 | .section-stream .content > div,
113 | .section-grid > div {
114 |     background: rgba(255, 255, 255, 0.1);
115 |     padding: 20px;
116 |     margin-bottom: 20px;
117 |     border-radius: 10px;
118 | }
119 | 
120 | /* Section  Grid */
121 | .section-grid {
122 |     display: grid;
123 |     grid-template-columns: repeat(3, 1fr);
124 |     grid-gap: 30px;
125 |     text-align: center;
126 | }
127 | 
128 | .section-grid p {
129 |     color: var(--text-color);
130 | }
131 | 
132 | .section-grid .dot {
133 |     font-size: 40px;
134 |     padding-left: 2px;
135 | }
136 | 
137 | /* Footer */
138 | .footer {
139 |     border-top: var(--text-color) 1px solid;
140 |     padding: 30px;
141 |     margin-top: 20px;
142 | }
143 | 
144 | .footer ul {
145 |     display:flex;
146 |     align-items: center;
147 |     justify-content: space-around;
148 |     text-align: center;
149 | }
150 | 
151 | /* Mobile */
152 | @media(max-width: 700px) {
153 |     .section-top .content,
154 |     .section-stream .play,
155 |     .section-stream .content {
156 |         position: static;
157 |         width: 100%;
158 |     }
159 | 
160 |     .section-top {
161 |         min-height: 200px;
162 |         padding-top: 20px;
163 |     }
164 | 
165 |     .section-top .content {
166 |         text-align: center;
167 |     }
168 | 
169 |     .section-top .content h1 {
170 |         font-size: 45px;
171 |     }
172 | 
173 |     .section-stream {
174 |         min-height: 400px;
175 |     }
176 | 
177 |     .section-stream .play {
178 |         width: 50%;
179 |         display: block;
180 |         margin-top: 30px auto;
181 |     }
182 | 
183 |     .section-grid {
184 |         display: block;
185 |         margin-top: 0;
186 |     }
187 | 
188 |     .footer ul {
189 |         display: block;
190 |     }
191 | }
192 | 


--------------------------------------------------------------------------------
/demo/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/922db2f0b67308b3b13da72a9650642131a4ff5d/demo/1.png


--------------------------------------------------------------------------------
/demo/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/922db2f0b67308b3b13da72a9650642131a4ff5d/demo/2.png


--------------------------------------------------------------------------------
/demo/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/922db2f0b67308b3b13da72a9650642131a4ff5d/demo/3.png


--------------------------------------------------------------------------------
/demo/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kevinadhiguna/parallax-landing-page/922db2f0b67308b3b13da72a9650642131a4ff5d/demo/4.png


--------------------------------------------------------------------------------
/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 |     <link 
  7 |         rel="stylesheet" 
  8 |         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" 
  9 |         crossorigin="anonymous" 
 10 |     />
 11 |     <link rel="stylesheet" href="css/styles.css">
 12 |     <title>Parallax Landing Page</title>
 13 | </head>
 14 | <body>
 15 |     <!-- 
 16 |         'data-rellax-speed' sets the speed of a '.rellax' element 
 17 |         to something other than the default value (which is -2).
 18 |         Docs : https://dixonandmoe.com/rellax/
 19 | 
 20 |         'data-rellax-xs-speed' is similar to 'data-rellax-speed' 
 21 |         but intended for mobilephone whose screen size is very small (xs = extra small).
 22 |      -->
 23 |     <section class="section section-top">
 24 |         <div class="content rellax" data-rellax-speed="5">
 25 |             <h1>Community Based Driven Video</h1>
 26 |             <a href="#" class="btn btn-primary">Learn More</a>
 27 |         </div>
 28 |     </section>
 29 | 
 30 |     <section class="section section-stream">
 31 |         <img 
 32 |             src="https://i.ibb.co/TvdbMhQ/play-button.png" 
 33 |             alt="Play-Button" 
 34 |             class="play rellax"
 35 |             data-rellax-speed="-1"
 36 |             data-rellax-xs-speed="-5"
 37 |         >
 38 |         <div class="content rellax" data-rellax-speed="10">
 39 |             <div>
 40 |                 <h2 class="secondary-text">Stream Everything</h2>
 41 |                 <p>
 42 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem rerum vel sequi explicabo quas quia ipsa quos alias, reiciendis ullam.
 43 |                 </p>
 44 |             </div>
 45 |             <div>
 46 |                 <h2 class="secondary-text">Short is the new long</h2>
 47 |                 <p>
 48 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem rerum vel sequi explicabo quas quia ipsa quos alias, reiciendis ullam.
 49 |                 </p>
 50 |             </div>            
 51 |         </div>
 52 |     </section>
 53 | 
 54 |     <section class="section section-grid">
 55 |         <div class="rellax" data-rellax-speed="1" data-rellax-xs-speed="3">
 56 |             <i class="fas fa-video fa-3x secondary-text"></i>
 57 |             <h2>
 58 |                 Watch
 59 |                 <span class="secondary-text dot">.</span>
 60 |             </h2>
 61 |             <p>
 62 |                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia tempora est incidunt, maxime eos nihil fugiat similique atque maiores consequatur!
 63 |             </p>
 64 |         </div>
 65 |         <div class="rellax" data-rellax-speed="4" data-rellax-xs-speed="3">
 66 |             <i class="fas fa-users fa-3x secondary-text"></i>
 67 |             <h2>
 68 |                 Share
 69 |                 <span class="secondary-text dot">.</span>
 70 |             </h2>
 71 |             <p>
 72 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at eveniet reprehenderit provident dicta quidem hic nisi excepturi veniam error.
 73 |             </p>
 74 |         </div>
 75 |         <div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="3">
 76 |             <i class="fas fa-book fa-3x secondary-text"></i>
 77 |             <h2>
 78 |                 Learn
 79 |                 <span class="secondary-text dot">.</span>
 80 |             </h2>
 81 |             <p>
 82 |                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam cum minus sint! Nam voluptates doloribus maxime esse eaque quisquam consectetur.
 83 |             </p>
 84 |         </div>
 85 |     </section>
 86 | 
 87 |     <footer class="footer">
 88 |         <ul>
 89 |             <li>
 90 |                 <a href="#">FaQ</a>
 91 |             </li>
 92 |             <li>
 93 |                 <a href="#">Terms of Use</a>
 94 |             </li>
 95 |             <li>
 96 |                 <a href="#">Privacy Notice</a>
 97 |             </li>
 98 |             <li>
 99 |                 <a href="#">Contact Us</a>
100 |             </li>
101 |             <li>
102 |                 <a href="#">About Us</a>
103 |             </li>
104 |         </ul>
105 |     </footer>
106 | 
107 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha512-f5HTYZYTDZelxS7LEQYv8ppMHTZ6JJWglzeQmr0CVTS70vJgaJiIO15ALqI7bhsracojbXkezUIL+35UXwwGrQ==" crossorigin="anonymous"></script>
108 |     <script src="js/main.js"></script>
109 | </body>
110 | </html>
111 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | // Init Rellax library
2 | let rellax = new Rellax('.rellax'); // apply on class='rellax'
3 | 


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