├── hero.jpg
├── index.html
├── ring.png
├── script.js
└── style.css
/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Landing-Page-Concept-Using-TimelineMax/1309dff5ea5e0eec48b3db03f01d7996002a5794/hero.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Files Fiddle
8 |
9 |
10 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
45 |
47 |
48 | GET IN TOUCH
49 |
50 |
51 |
52 |
73 |
74 | +0.00001db
75 |
76 | © 2019 by Codegrid. All rights reserved.
77 |
78 |
79 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/ring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Landing-Page-Concept-Using-TimelineMax/1309dff5ea5e0eec48b3db03f01d7996002a5794/ring.png
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 |
2 | TweenMax.to(".loading-screen", 4, {
3 | delay: 6.6,
4 | top: "-110%",
5 | ease: Expo.easeInOut
6 | });
7 |
8 | TweenMax.from(".logo", 3, {
9 | delay: 8.4,
10 | opacity: 0,
11 | y: 20,
12 | ease: Expo.easeInOut
13 | });
14 |
15 | TweenMax.from(".contact", 3, {
16 | delay: 8.5,
17 | opacity: 0,
18 | y: 20,
19 | ease: Expo.easeInOut
20 | });
21 |
22 | TweenMax.from(".options", 3, {
23 | delay: 8.4,
24 | opacity: 0,
25 | y: 20,
26 | ease: Expo.easeInOut
27 | });
28 |
29 | TweenMax.from(".bottom-text", 3, {
30 | delay: 8.7,
31 | opacity: 0,
32 | y: 20,
33 | ease: Expo.easeInOut
34 | });
35 |
36 | TweenMax.from(".copyright", 3, {
37 | delay: 8.9,
38 | opacity: 0,
39 | y: 20,
40 | ease: Expo.easeInOut
41 | });
42 |
43 | TweenMax.staggerFrom(".media ul li", 2, {
44 | delay: 8.7,
45 | opacity: 0,
46 | y: 20,
47 | ease: Power3.easeInOut
48 | }, 0.1);
49 |
50 | TweenMax.from(".menu", 3, {
51 | delay: 8.8,
52 | opacity: 0,
53 | y: 20,
54 | ease: Expo.easeInOut
55 | });
56 |
57 | TweenMax.from(".p1", 3, {
58 | delay: 9,
59 | opacity: 0,
60 | y: 20,
61 | ease: Expo.easeInOut
62 | });
63 |
64 | TweenMax.from(".p2", 3, {
65 | delay: 9.2,
66 | opacity: 0,
67 | y: 20,
68 | ease: Expo.easeInOut
69 | });
70 |
71 | TweenMax.from("#one", 3, {
72 | delay: 9.4,
73 | opacity: 0,
74 | y: 20,
75 | ease: Expo.easeInOut
76 | });
77 |
78 | TweenMax.from("#two", 3, {
79 | delay: 9.7,
80 | opacity: 0,
81 | y: 20,
82 | ease: Expo.easeInOut
83 | });
84 |
85 | var t1 = new TimelineMax();
86 |
87 | t1.from(".ringOne", 4, {
88 | delay: 0.4,
89 | opacity: 0,
90 | y:40,
91 | ease: Expo.easeInOut
92 | }).from(".ringTwo", 4, {
93 | delay: 0.9,
94 | opacity: 0,
95 | y: 40,
96 | ease: Expo.easeInOut
97 | }, "-=5").to(".ringOne", 4, {
98 | delay: 0.4,
99 | x: 40,
100 | ease: Expo.easeInOut
101 | }).to(".ringTwo", 4, {
102 | delay: 0.9,
103 | x: 40,
104 | ease: Expo.easeInOut
105 | },"-=5");
106 |
107 | var textWrapper = document.querySelector('.ml7 .letters');
108 | textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "$& ");
109 |
110 | anime.timeline({loop: false})
111 | .add({
112 | targets: '.ml7 .letter',
113 | translateY: ["1.1em", 0],
114 | translateX: ["0.55em", 0],
115 | translateZ: 0,
116 | rotateZ: [180, 0],
117 | duration: 750,
118 | easing: "easeOutExpo",
119 | delay: function(el, i) {
120 | return 9000 + 50 * i;
121 | }
122 | });
123 |
124 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0%;
3 | padding: 0%;
4 | width: 100%;
5 | height: 100vh;
6 | background: #121212;
7 | }
8 |
9 | body {
10 | background: url(hero.jpg) no-repeat 50% 50%;
11 | background-size: cover;
12 | }
13 |
14 | img {
15 | width: 100%;
16 | }
17 |
18 | .logo {
19 | position: fixed;
20 | font-family: Poppins;
21 | line-height: 80px;
22 | margin-left: 2em;
23 | color: #fff;
24 | font-size: 15px;
25 | letter-spacing: 3px;
26 | font-weight: bold;
27 | text-transform: uppercase;
28 | z-index: 1;
29 | }
30 |
31 | .logo ion-icon {
32 | color: #6adb9d;
33 | margin-right: 7px;
34 | position: relative;
35 | top: 1px;
36 | z-index: 1;
37 | }
38 |
39 | .contact {
40 | position: fixed;
41 | color: rgb(124, 124, 124);
42 | font-size: 12px;
43 | letter-spacing: 2px;
44 | font-family: Poppins;
45 | right: 100px;
46 | line-height: 80px;
47 | z-index: 1;
48 | }
49 |
50 | .menu{
51 | position: fixed;
52 | color: #6adb9d;
53 | right: 2em;
54 | top: 4px;
55 | line-height: 80px;
56 | z-index: 1;
57 | }
58 |
59 | .menu ion-icon {
60 | font-size: 24px;
61 | }
62 |
63 | .header {
64 | position: absolute;
65 | top: 46%;
66 | left: 32%;
67 | transform: translate(-50%, -50%);
68 | z-index: 1;
69 | }
70 |
71 | .ml7 {
72 | position: relative;
73 | font-weight: 900;
74 | font-size: 3.7em;
75 | }
76 |
77 | .ml7 .text-wrapper {
78 | position: relative;
79 | display: inline-block;
80 | padding-top: 0.2em;
81 | padding-right: 0.05em;
82 | padding-bottom: 0.1em;
83 | overflow: hidden;
84 | }
85 |
86 | .ml7 .letter {
87 | transform-origin: 0 100%;
88 | display: inline-block;
89 | line-height: 1em;
90 | }
91 |
92 | h1 {
93 | color: #fff;
94 | font-family: "Roboto";
95 | font-weight: bolder !important;
96 | font-size: 46px !important;
97 | margin-bottom: 0px;
98 | text-transform: uppercase !important;
99 | }
100 |
101 | #tagline {
102 | width: 640px;
103 | }
104 |
105 | p {
106 | color: rgb(95, 95, 95);
107 | font-weight: 200;
108 | font-family: "Roboto";
109 | line-height: 28px;
110 | margin-top: 0;
111 | margin-bottom: 0;
112 | }
113 |
114 | .buttons {
115 | margin-top: 40px;
116 | }
117 |
118 | button {
119 | margin-right: 10px !important;
120 | padding: 14px 30px;
121 | border: none;
122 | color: #fff;
123 | font-size: 12px !important;
124 | letter-spacing: 4px;
125 | font-weight: 300;
126 | }
127 |
128 | #one {
129 | background: none;
130 | border: .3pt solid rgba(255, 255, 255, 0.3);
131 | }
132 |
133 | #two {
134 | background: linear-gradient(135deg, rgb(106, 219, 157) 0%, rgb(23, 167, 88) 100%);;
135 | }
136 |
137 | .media {
138 | position: absolute;
139 | top: 38%;
140 | z-index: 1;
141 | right: 6%
142 | }
143 |
144 | .media ul {
145 | position: absolute;
146 | list-style: none;
147 | }
148 |
149 | .media ul li {
150 | color: grey;
151 | padding: 12px 0;
152 | display: inline-block !important;
153 | }
154 |
155 | .bottom-text {
156 | position: absolute;
157 | z-index: 1;
158 | color: grey;
159 | font-size: 18px;
160 | font-family: monospace;
161 | margin-left: 2em;
162 | bottom: 40px;
163 | }
164 |
165 | .copyright {
166 | position: absolute;
167 | z-index: 1;
168 | color: grey;
169 | font-size: 15px;
170 | right: 0;
171 | font-family: Roboto;
172 | font-weight: 100;
173 | margin-right: 2em;
174 | bottom: 40px;
175 | }
176 |
177 | .loading-screen {
178 | position: absolute;
179 | width: 100%;
180 | height: 100vh;
181 | background: #0a0a0a;
182 | z-index: 2;
183 | }
184 |
185 | .ring {
186 | margin: 0%;
187 | padding: 0%;
188 | top: 50%;
189 | left: 50%;
190 | transform: translate(-50%, -50%);
191 | position: absolute;
192 | z-index: 2;
193 | width: 40%;
194 | opacity: 0.7;
195 | }
196 |
197 | .ringOne img {
198 | animation: rotateFirstRing 2s linear infinite;
199 | }
200 |
201 | .ringTwo img {
202 | animation: rotateFirstRing 8s linear infinite;
203 | }
204 |
205 | @keyframes rotateFirstRing {
206 | from {
207 | transform: rotate(0deg);
208 | }
209 | to {
210 | transform: rotate(360deg);
211 | }
212 | }
213 |
214 | @media(max-width: 900px) {
215 |
216 | .loading-screen {
217 | display: none;
218 | }
219 | .ring img {
220 | display: none;
221 | }
222 |
223 | .header p, button, .media, h1 {
224 | display: none;
225 | }
226 |
227 | }
228 |
229 |
230 |
231 |
--------------------------------------------------------------------------------
36 |