Skip to content

Commit 3045868

Browse files
frankpaganfrankpagan
committed
format html
1 parent a6826ff commit 3045868

File tree

2 files changed

+507
-178
lines changed

2 files changed

+507
-178
lines changed

‎demo/index.html

Lines changed: 174 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,182 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Parallax | CoCreateJS</title>
5-
6-
<!-- CoCreate Favicon -->
7-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8-
<!-- CoCreate CSS CDN -->
9-
<link rel="stylesheet" href="https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.css" type="text/css" />
10-
<link rel="manifest" href="/manifest.webmanifest">
11-
</head>
12-
<body>
13-
14-
<!-- Avatar -->
15-
<div localstorage-get="user_id" localstorage-key="userId" localstorage-target=".avatar-wrapper"></div>
16-
<div class="avatar-wrapper margin:5px_0px margin-right:10px">
17-
<a class="avatar round" actions="pass, openModal" modal-src="render.html" pass-collection="modules" pass-document_id="5dd010bccbc25f0cdb1a4d9f" pass_to="render" modal-width="300px" modal-height="375px" modal-color="#229954">
18-
<span collection="users" document_id="{{userId}}" name="name" class="width:12px avatar-name">B</span>
19-
<span collection="users" document_id="{{userId}}" name="profile_image" class="avatar-image">
20-
<img src="/_static/Velazquez.jpg" onerror="this.style.display='none'"/>
21-
</span>
22-
</a>
23-
<div class="avatar-status off"></div>
24-
</div>
25-
</div>
3+
<head>
4+
<title>Parallax | CoCreateJS</title>
265

27-
<div content_id="content">
28-
29-
<div class="parallax height:300px" parallax-src="https://www.w3schools.com/howto/img_parallax.jpg" >
30-
<div class="caption">
31-
<span class="border">SCROLL DOWN</span>
6+
<!-- CoCreate Favicon -->
7+
<link
8+
rel="icon"
9+
href="https://cdn.cocreate.app/favicon.ico"
10+
type="image/ico"
11+
sizes="16x16" />
12+
<!-- CoCreate CSS CDN -->
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.cocreate.app/parallax/latest/CoCreate-parallax.min.css"
16+
type="text/css" />
17+
<link rel="manifest" href="/manifest.webmanifest" />
18+
</head>
19+
<body>
20+
<!-- Avatar -->
21+
<div
22+
localstorage-get="user_id"
23+
localstorage-key="userId"
24+
localstorage-target=".avatar-wrapper"></div>
25+
<div class="avatar-wrapper margin:5px_0px margin-right:10px">
26+
<a
27+
class="avatar round"
28+
actions="pass, openModal"
29+
modal-src="render.html"
30+
pass-collection="modules"
31+
pass-document_id="5dd010bccbc25f0cdb1a4d9f"
32+
pass_to="render"
33+
modal-width="300px"
34+
modal-height="375px"
35+
modal-color="#229954">
36+
<span
37+
collection="users"
38+
document_id="{{userId}}"
39+
name="name"
40+
class="width:12px avatar-name"
41+
>B</span
42+
>
43+
<span
44+
collection="users"
45+
document_id="{{userId}}"
46+
name="profile_image"
47+
class="avatar-image">
48+
<img
49+
src="/_static/Velazquez.jpg"
50+
onerror="this.style.display='none'" />
51+
</span>
52+
</a>
53+
<div class="avatar-status off"></div>
3254
</div>
33-
</div>
34-
35-
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
36-
<h3 style="text-align:center;">Parallax Demo</h3>
37-
<p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
38-
</div>
39-
40-
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg" parallax-height="300px">
41-
<div class="caption">
42-
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">LESS HEIGHT</span>
43-
</div>
44-
</div>
45-
46-
<div style="position:relative;">
47-
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
48-
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
49-
</div>
50-
</div>
51-
52-
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg" parallax-height="300px">
53-
<div class="caption">
54-
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
55-
</div>
56-
</div>
57-
58-
<div style="position:relative;">
59-
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
60-
<p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p>
61-
</div>
62-
</div>
63-
64-
<div class="parallax" parallax-src="https://www.w3schools.com/howto/img_parallax.jpg" parallax-height="300px">
65-
<div class="caption">
66-
<span class="border">COOL!</span>
55+
56+
<div content_id="content">
57+
<div
58+
class="parallax height:300px"
59+
parallax-src="https://www.w3schools.com/howto/img_parallax.jpg">
60+
<div class="caption">
61+
<span class="border">SCROLL DOWN</span>
62+
</div>
63+
</div>
64+
65+
<div
66+
style="
67+
color: #777;
68+
background-color: white;
69+
text-align: center;
70+
padding: 50px 80px;
71+
text-align: justify;
72+
">
73+
<h3 style="text-align: center">Parallax Demo</h3>
74+
<p>
75+
Parallax scrolling is a web site trend where the background
76+
content is moved at a different speed than the foreground
77+
content while scrolling. Nascetur per nec posuere turpis,
78+
lectus nec libero turpis nunc at, sed posuere mollis
79+
ullamcorper libero ante lectus, blandit pellentesque a,
80+
magna turpis est sapien duis blandit dignissim. Viverra
81+
interdum mi magna mi, morbi sociis. Condimentum dui ipsum
82+
consequat morbi, curabitur aliquam pede, nullam vitae eu
83+
placerat eget et vehicula. Varius quisque non molestie
84+
dolor, nunc nisl dapibus vestibulum at, sodales tincidunt
85+
mauris ullamcorper, dapibus pulvinar, in in neque risus
86+
odio. Accumsan fringilla vulputate at quibusdam sociis
87+
eleifend, aenean maecenas vulputate, non id vehicula lorem
88+
mattis, ratione interdum sociis ornare. Suscipit proin magna
89+
cras vel, non sit platea sit, maecenas ante augue etiam
90+
maecenas, porta porttitor placerat leo.
91+
</p>
92+
</div>
93+
94+
<div
95+
class="parallax"
96+
parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg"
97+
parallax-height="300px">
98+
<div class="caption">
99+
<span
100+
class="border"
101+
style="
102+
background-color: transparent;
103+
font-size: 25px;
104+
color: #f7f7f7;
105+
"
106+
>LESS HEIGHT</span
107+
>
108+
</div>
109+
</div>
110+
111+
<div style="position: relative">
112+
<div
113+
style="
114+
color: #ddd;
115+
background-color: #282e34;
116+
text-align: center;
117+
padding: 50px 80px;
118+
text-align: justify;
119+
">
120+
<p>
121+
Scroll up and down to really get the feeling of how
122+
Parallax Scrolling works.
123+
</p>
124+
</div>
125+
</div>
126+
127+
<div
128+
class="parallax"
129+
parallax-src="https://www.w3schools.com/howto/img_parallax2.jpg"
130+
parallax-height="300px">
131+
<div class="caption">
132+
<span
133+
class="border"
134+
style="
135+
background-color: transparent;
136+
font-size: 25px;
137+
color: #f7f7f7;
138+
"
139+
>SCROLL UP</span
140+
>
141+
</div>
142+
</div>
143+
144+
<div style="position: relative">
145+
<div
146+
style="
147+
color: #ddd;
148+
background-color: #282e34;
149+
text-align: center;
150+
padding: 50px 80px;
151+
text-align: justify;
152+
">
153+
<p>
154+
Scroll up and down to really get the feeling of how
155+
Parallax Scrolling works.
156+
</p>
157+
</div>
158+
</div>
159+
160+
<div
161+
class="parallax"
162+
parallax-src="https://www.w3schools.com/howto/img_parallax.jpg"
163+
parallax-height="300px">
164+
<div class="caption">
165+
<span class="border">COOL!</span>
166+
</div>
167+
</div>
67168
</div>
68-
</div>
69169

70-
</div>
71-
72-
<div id="menuL" class="cocreate-sidenav bg-medium-light-gray" content_id="content" sidenav_default_desktop="offCanvas" sidenav_default_tablet="offCanvas">
73-
74-
<div resize="right"></div>
75-
</div>
170+
<div
171+
id="menuL"
172+
class="cocreate-sidenav bg-medium-light-gray"
173+
content_id="content"
174+
sidenav_default_desktop="offCanvas"
175+
sidenav_default_tablet="offCanvas">
176+
<div resize="right"></div>
177+
</div>
76178

77-
78-
<!--<script src="../dist/CoCreate-parallax.js"></script>-->
79-
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
80-
</body>
179+
<!--<script src="../dist/CoCreate-parallax.js"></script>-->
180+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
181+
</body>
81182
</html>

0 commit comments

Comments
 (0)