Skip to content

Commit 88696de

Browse files
crnacuracrnacura
committed
initial commit
0 parents  commit 88696de

26 files changed

+2125
-0
lines changed

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Page Loading Effects
2+
=========
3+
4+
Modern ways of revealing new content using SVG animations.
5+
6+
[Article on Codrops](http://tympanus.net/codrops/?p=18880)
7+
8+
[Demo](http://tympanus.net/Development/PageLoadingEffects/)
9+
10+
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
11+
12+
Read more here: [License](http://tympanus.net/codrops/licensing/)
13+
14+
15+
[© Codrops 2014](http://www.codrops.com)

‎css/component.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.container {
2+
display: none;
3+
}
4+
5+
.container.show {
6+
display: block;
7+
}
8+
9+
.pageload-overlay svg {
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
pointer-events: none;
14+
}
15+
16+
.pageload-overlay svg path {
17+
fill: #fff;
18+
}
19+
20+
.pageload-overlay::after,
21+
.pageload-overlay::before {
22+
content: '';
23+
position: fixed;
24+
width: 20px;
25+
height: 20px;
26+
top: 50%;
27+
left: 50%;
28+
margin: -10px 0 0 -10px;
29+
border-radius: 50%;
30+
visibility: hidden;
31+
opacity: 0;
32+
z-index: 1000;
33+
-webkit-transition: opacity 0.15s, visibility 0s 0.15s;
34+
transition: opacity 0.15s, visibility 0s 0.15s;
35+
}
36+
37+
.pageload-overlay::after {
38+
background: #6cc88a;
39+
-webkit-transform: translateX(-20px);
40+
transform: translateX(-20px);
41+
-webkit-animation: moveRight 0.6s linear infinite alternate;
42+
animation: moveRight 0.6s linear infinite alternate;
43+
}
44+
45+
.pageload-overlay::before {
46+
background: #4fc3f7;
47+
-webkit-transform: translateX(20px);
48+
transform: translateX(20px);
49+
-webkit-animation: moveLeft 0.6s linear infinite alternate;
50+
animation: moveLeft 0.6s linear infinite alternate;
51+
}
52+
53+
@-webkit-keyframes moveRight {
54+
to { -webkit-transform: translateX(20px); }
55+
}
56+
57+
@keyframes moveRight {
58+
to { transform: translateX(20px); }
59+
}
60+
61+
@-webkit-keyframes moveLeft {
62+
to { -webkit-transform: translateX(-20px); }
63+
}
64+
65+
@keyframes moveLeft {
66+
to { transform: translateX(-20px); }
67+
}
68+
69+
.pageload-loading.pageload-overlay::after,
70+
.pageload-loading.pageload-overlay::before {
71+
opacity: 1;
72+
visibility: visible;
73+
-webkit-transition: opacity 0.3s;
74+
transition: opacity 0.3s;
75+
}
76+
77+
.pageload-loading.pageload-overlay svg {
78+
pointer-events: auto;
79+
}

‎css/demo.css

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);*/
2+
@font-face {
3+
font-weight: normal;
4+
font-style: normal;
5+
font-family: 'codropsicons';
6+
src:url('../fonts/codropsicons/codropsicons.eot');
7+
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
8+
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
9+
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
10+
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
11+
}
12+
13+
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
14+
.clearfix:before, .clearfix:after { content: ''; display: table; }
15+
.clearfix:after { clear: both; }
16+
17+
html, body, .pagewrap {
18+
height: 100%;
19+
}
20+
21+
body {
22+
background: #4fc3f7;
23+
color: #fff;
24+
font-size: 16px;
25+
font-weight: 300;
26+
line-height: 1.25;
27+
font-family: 'Lato', Arial, sans-serif;
28+
}
29+
30+
.container {
31+
min-height: 100%;
32+
}
33+
34+
a {
35+
color: rgba(0,0,0,0.25);
36+
font-weight: bold;
37+
text-shadow: 0 0 rgba(0,0,0,0);
38+
text-decoration: none;
39+
outline: none;
40+
}
41+
42+
a:hover, a:focus {
43+
color: rgba(0,0,0,0.6);
44+
}
45+
46+
.codrops-header {
47+
margin: 0 auto;
48+
padding: 2em;
49+
text-align: center;
50+
}
51+
52+
.codrops-header h1 {
53+
margin: 0;
54+
font-weight: 300;
55+
font-size: 2.5em;
56+
}
57+
58+
.codrops-header h1 span {
59+
display: block;
60+
padding: 0 0 0.6em 0.1em;
61+
font-size: 0.6em;
62+
opacity: 0.7;
63+
}
64+
65+
/* To Navigation Style */
66+
.codrops-top {
67+
width: 100%;
68+
text-transform: uppercase;
69+
font-weight: 700;
70+
font-size: 0.69em;
71+
line-height: 2.2;
72+
}
73+
74+
.codrops-top a {
75+
display: inline-block;
76+
padding: 0 1em;
77+
text-decoration: none;
78+
letter-spacing: 1px;
79+
}
80+
81+
.codrops-top span.right {
82+
float: right;
83+
}
84+
85+
.codrops-top span.right a {
86+
display: block;
87+
float: left;
88+
}
89+
90+
.codrops-icon:before {
91+
margin: 0 4px;
92+
text-transform: none;
93+
font-weight: normal;
94+
font-style: normal;
95+
font-variant: normal;
96+
font-family: 'codropsicons';
97+
line-height: 1;
98+
speak: none;
99+
-webkit-font-smoothing: antialiased;
100+
}
101+
102+
.codrops-icon-drop:before {
103+
content: "\e001";
104+
}
105+
106+
.codrops-icon-prev:before {
107+
content: "\e004";
108+
}
109+
110+
section {
111+
padding: 3em 1em 10em;
112+
text-align: center;
113+
clear: both;
114+
}
115+
116+
section h2 {
117+
font-size: 2.6em;
118+
font-weight: 300;
119+
padding: 4em 0 0.4em;
120+
}
121+
122+
section p {
123+
font-size: 1.5em;
124+
line-height: 1.5;
125+
margin-top: 0;
126+
}
127+
128+
.related > a {
129+
border: 1px solid rgba(0,0,0,0.3);
130+
display: inline-block;
131+
text-align: center;
132+
margin: 20px 10px;
133+
padding: 25px;
134+
}
135+
136+
.related a:hover {
137+
border-color: #fff;
138+
color: #fff;
139+
}
140+
141+
.related a img {
142+
max-width: 100%;
143+
opacity: 0.8;
144+
-webkit-transition: opacity 0.3s;
145+
transition: opacity 0.3s;
146+
}
147+
148+
.related a:hover img,
149+
.related a:active img {
150+
opacity: 1;
151+
}
152+
153+
.related a h3 {
154+
margin: 0;
155+
padding: 0.5em 0 0.3em;
156+
max-width: 300px;
157+
text-align: left;
158+
}
159+
160+
.columns {
161+
max-width: 1200px;
162+
margin: 0 auto;
163+
text-align: left;
164+
}
165+
166+
.column {
167+
width: 50%;
168+
padding: 0 2em;
169+
float: left;
170+
}
171+
172+
/* Demo links */
173+
.codrops-demos {
174+
text-align: right;
175+
}
176+
177+
.codrops-demos a {
178+
text-transform: uppercase;
179+
letter-spacing: 1px;
180+
margin: 15px;
181+
padding: 0 0 5px;
182+
display: inline-block;
183+
border-bottom: 3px solid rgba(0,0,0,0.25);
184+
}
185+
186+
.codrops-demos a:hover,
187+
.codrops-demos a:focus,
188+
.codrops-demos a.current-demo {
189+
color: #fff;
190+
border-color: #fff;
191+
}
192+
193+
.pageload-link {
194+
padding: 13px 20px;
195+
color: #fff;
196+
background: rgba(0,0,0,0.25);
197+
text-transform: uppercase;
198+
letter-spacing: 1px;
199+
font-size: 0.6em;
200+
white-space: nowrap;
201+
}
202+
203+
.pageload-link:hover {
204+
color: #fff;
205+
background: rgba(0,0,0,0.2);
206+
}
207+
208+
#page-2 {
209+
background: #6cc88a;
210+
}
211+
212+
@media screen and (max-width: 40em) {
213+
214+
.column {
215+
width: 100%;
216+
float: none;
217+
padding: 2em;
218+
text-align: center;
219+
}
220+
221+
.codrops-demos {
222+
text-align: center;
223+
}
224+
225+
}
226+
227+
@media screen and (max-width: 25em) {
228+
229+
.codrops-icon span {
230+
display: none;
231+
}
232+
233+
}

‎css/normalize.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fonts/codropsicons/codropsicons.eot

2.19 KB
Binary file not shown.

‎fonts/codropsicons/codropsicons.svg

Lines changed: 24 additions & 0 deletions
Loading

‎fonts/codropsicons/codropsicons.ttf

2.01 KB
Binary file not shown.

‎fonts/codropsicons/codropsicons.woff

2.02 KB
Binary file not shown.

‎fonts/codropsicons/license.txt

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
2+
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
3+
4+
5+
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
6+
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/

‎img/preloader.gif

19.5 KB
Loading

0 commit comments

Comments
 (0)