Skip to content

Commit e4fb881

Browse files
supragyashresthasupragyashrestha
committed
events testing
1 parent 45605d9 commit e4fb881

File tree

18 files changed

+537
-318
lines changed

18 files changed

+537
-318
lines changed

‎Untitled-1.html‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>A grouped pure CSS parallax demo by Keith Clark</title>
8+
<meta name="description" content="Demonstration of grouping content in pure CSS parallax scrolling website">
9+
<style>
10+
11+
/* Parallax base styles
12+
--------------------------------------------- */
13+
14+
.parallax {
15+
height: 500px; /* fallback for older browsers */
16+
height: 100vh;
17+
overflow-x: hidden;
18+
overflow-y: auto;
19+
-webkit-perspective: 300px;
20+
perspective: 300px;
21+
}
22+
23+
.parallax__group {
24+
position: relative;
25+
height: 500px; /* fallback for older browsers */
26+
height: 100vh;
27+
-webkit-transform-style: preserve-3d;
28+
transform-style: preserve-3d;
29+
}
30+
31+
.parallax__layer {
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
right: 0;
36+
bottom: 0;
37+
}
38+
39+
.parallax__layer--fore {
40+
-webkit-transform: translateZ(90px) scale(.7);
41+
transform: translateZ(90px) scale(.7);
42+
z-index: 1;
43+
}
44+
45+
.parallax__layer--base {
46+
-webkit-transform: translateZ(0);
47+
transform: translateZ(0);
48+
z-index: 4;
49+
}
50+
51+
.parallax__layer--back {
52+
-webkit-transform: translateZ(-300px) scale(2);
53+
transform: translateZ(-300px) scale(2);
54+
z-index: 3;
55+
}
56+
57+
.parallax__layer--deep {
58+
-webkit-transform: translateZ(-600px) scale(3);
59+
transform: translateZ(-600px) scale(3);
60+
z-index: 2;
61+
}
62+
63+
64+
/* Debugger styles - used to show the effect
65+
--------------------------------------------- */
66+
67+
.debug {
68+
position: fixed;
69+
top: 0;
70+
left: .5em;
71+
z-index: 999;
72+
background: rgba(0,0,0,.85);
73+
color: #fff;
74+
padding: .5em;
75+
border-radius: 0 0 5px 5px;
76+
}
77+
.debug-on .parallax__group {
78+
-webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
79+
transform: translate3d(700px, 0, -800px) rotateY(30deg);
80+
}
81+
.debug-on .parallax__layer {
82+
box-shadow: 0 0 0 2px #000;
83+
opacity: 0.9;
84+
}
85+
.parallax__group {
86+
-webkit-transition: -webkit-transform 0.5s;
87+
transition: transform 0.5s;
88+
}
89+
90+
91+
/* demo styles
92+
--------------------------------------------- */
93+
94+
body, html {
95+
overflow: hidden;
96+
}
97+
98+
body {
99+
font: 100% / 1.5 Arial;
100+
}
101+
102+
* {
103+
margin:0;
104+
padding:0;
105+
}
106+
107+
.parallax {
108+
font-size: 200%;
109+
}
110+
111+
/* centre the content in the parallax layers */
112+
.title {
113+
text-align: center;
114+
position: absolute;
115+
left: 50%;
116+
top: 50%;
117+
-webkit-transform: translate(-50%, -50%);
118+
transform: translate(-50%, -50%);
119+
}
120+
121+
122+
123+
/* style the groups
124+
--------------------------------------------- */
125+
126+
#group1 {
127+
z-index: 5; /* slide over group 2 */
128+
}
129+
#group1 .parallax__layer--base {
130+
background: rgb(102,204,102);
131+
}
132+
133+
#group2 {
134+
z-index: 3; /* slide under groups 1 and 3 */
135+
}
136+
#group2 .parallax__layer--back {
137+
background: rgb(123,210,102);
138+
}
139+
140+
#group3 {
141+
z-index: 4; /* slide over group 2 and 4 */
142+
}
143+
#group3 .parallax__layer--base {
144+
background: rgb(153,216,101);
145+
}
146+
147+
#group4 {
148+
z-index: 2; /* slide under group 3 and 5 */
149+
}
150+
#group4 .parallax__layer--deep {
151+
background: rgb(184,223,101);
152+
}
153+
154+
#group5 {
155+
z-index: 3; /* slide over group 4 and 6 */
156+
}
157+
#group5 .parallax__layer--base {
158+
background: rgb(214,229,100);
159+
}
160+
161+
#group6 {
162+
z-index: 2; /* slide under group 5 and 7 */
163+
}
164+
#group6 .parallax__layer--back {
165+
background: rgb(245,235,100);
166+
}
167+
168+
#group7 {
169+
z-index: 3; /* slide over group 7 */
170+
}
171+
#group7 .parallax__layer--base {
172+
background: rgb(255,241,100);
173+
}
174+
175+
176+
/* misc
177+
--------------------------------------------- */
178+
.demo__info {
179+
position: absolute;
180+
z-index:100;
181+
bottom: 1vh;
182+
top: auto;
183+
font-size:80%;
184+
text-align:center;
185+
width: 100%;
186+
}
187+
</style>
188+
</head>
189+
190+
<body>
191+
192+
193+
194+
<div class="parallax">
195+
<div id="group1" class="parallax__group">
196+
<div class="parallax__layer parallax__layer--base">
197+
<div class="title">Base Layer</div>
198+
</div>
199+
</div>
200+
<div id="group2" class="parallax__group">
201+
<div class="parallax__layer parallax__layer--base">
202+
<div class="title">Base Layer</div>
203+
</div>
204+
<div class="parallax__layer parallax__layer--back">
205+
<div class="title">Background Layer</div>
206+
</div>
207+
</div>
208+
<div id="group3" class="parallax__group">
209+
<div class="parallax__layer parallax__layer--fore">
210+
<div class="title">Foreground Layer</div>
211+
</div>
212+
<div class="parallax__layer parallax__layer--base">
213+
<div class="title">Base Layer</div>
214+
</div>
215+
</div>
216+
<div id="group4" class="parallax__group">
217+
<div class="parallax__layer parallax__layer--base">
218+
<div class="title">Base Layer</div>
219+
</div>
220+
<div class="parallax__layer parallax__layer--back">
221+
<div class="title">Background Layer</div>
222+
</div>
223+
<div class="parallax__layer parallax__layer--deep">
224+
<div class="title">Deep Background Layer</div>
225+
</div>
226+
</div>
227+
<div id="group5" class="parallax__group">
228+
<div class="parallax__layer parallax__layer--fore">
229+
<div class="title">Foreground Layer</div>
230+
</div>
231+
<div class="parallax__layer parallax__layer--base">
232+
<div class="title">Base Layer</div>
233+
</div>
234+
</div>
235+
<div id="group6" class="parallax__group">
236+
<div class="parallax__layer parallax__layer--back">
237+
<div class="title">Background Layer</div>
238+
</div>
239+
<div class="parallax__layer parallax__layer--base">
240+
<div class="title">Base Layer</div>
241+
</div>
242+
</div>
243+
<div id="group7" class="parallax__group">
244+
<div class="parallax__layer parallax__layer--base">
245+
<div class="title">Base Layer</div>
246+
</div>
247+
</div>
248+
</div>
249+
250+
251+
252+
</body>
253+
</html>

‎events/.picasa.ini‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[2.JPG]
2+
backuphash=55564
3+
[1.jpg]
4+
backuphash=26077
5+
[3.jpg]
6+
backuphash=50232
7+
[4.jpg]
8+
backuphash=41378

‎events/.picasaoriginals/.picasa.ini‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
[2.JPG]
2+
filters=crop64=1,141e666aedd4c59a;
3+
crop=rect64(141e666aedd4c59a)
4+
moddate=6e95e7a75ff4d501
5+
width=5256
6+
height=3472
7+
textactive=0
8+
[1.jpg]
9+
filters=crop64=1,1d2f44fef4e4b51e;
10+
crop=rect64(1d2f44fef4e4b51e)
11+
moddate=d1b6494263f4d501
12+
width=8000
13+
height=6000
14+
textactive=0
15+
[3.jpg]
16+
filters=crop64=1,149c100bffff898e;
17+
crop=rect64(149c100bffff898e)
18+
moddate=ef24766f63f4d501
19+
width=4000
20+
height=3000
21+
textactive=0
22+
[4.jpg]
23+
filters=crop64=1,168755e3fcd4aca0;
24+
crop=rect64(168755e3fcd4aca0)
25+
moddate=f3d8168063f4d501
26+
width=8000
27+
height=6000
28+
textactive=0

‎events/.picasaoriginals/1.jpg‎

1.92 MB
Loading

‎events/.picasaoriginals/2.JPG‎

1000 KB
Loading

‎events/.picasaoriginals/3.jpg‎

816 KB
Loading

‎events/.picasaoriginals/4.jpg‎

2.16 MB
Loading

‎events/1-1.jpg‎

281 KB
Loading

‎events/1.jpg‎

979 KB
Loading

‎events/2-1.jpg‎

236 KB
Loading

0 commit comments

Comments
 (0)