Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1485941

Browse files
first commit
0 parents commit 1485941

9 files changed

+218
-0
lines changed
441 KB
Loading[フレーム]

‎img/pexels-luis-dalvan-1770775.jpg

316 KB
Loading[フレーム]

‎img/pexels-lukas-kloeppel-466685.jpg

4.3 MB
Loading[フレーム]

‎img/pexels-taryn-elliott-3889854.jpg

256 KB
Loading[フレーム]
262 KB
Loading[フレーム]
335 KB
Loading[フレーム]

‎index.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
<title>Simple Parallax</title>
15+
</head>
16+
<body>
17+
<section>
18+
<h2>Simple Parallax Effects for the site</h2>
19+
<p>
20+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eaque
21+
dolor, nisi beatae quia at sed dolore iste. Obcaecati officiis
22+
exercitationem odit perferendis adipisci maiores sapiente vitae!
23+
Officia, totam consequuntur. Minima amet quisquam repellendus quam
24+
facere suscipit sit maxime, numquam sequi iste est quaerat consectetur
25+
itaque assumenda necessitatibus perspiciatis vel illum optio libero quae
26+
sapiente. Id aliquid delectus omnis iure. Et, nulla itaque, dolor
27+
possimus minus saepe mollitia nemo cupiditate assumenda quo dolore eius
28+
fuga commodi dolores delectus pariatur! Nemo eius enim voluptate! Porro
29+
aspernatur hic sunt illo ratione optio. Reiciendis, optio. Libero
30+
doloribus voluptatibus, quo explicabo saepe, quidem deleniti
31+
perspiciatis optio illo, dolorem tempore esse quisquam ducimus aliquam
32+
odit tenetur sit expedita cumque delectus nostrum! Dolore qui deserunt
33+
ducimus. Cumque suscipit natus labore amet, architecto nihil provident
34+
enim maxime ad facilis illo et esse soluta deserunt quam ut odio impedit
35+
quis eveniet voluptate culpa dolorum quisquam earum molestias!
36+
Assumenda.
37+
</p>
38+
</section>
39+
<div class="parallax-bg">
40+
<img
41+
src="img/pexels-taryn-elliott-3889854.jpg"
42+
alt="NY pic"
43+
class="parallaxImg1"
44+
45+
/>
46+
<h2>Left</h2>
47+
</div>
48+
<section>
49+
<p>
50+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eaque
51+
dolor, nisi beatae quia at sed dolore iste. Obcaecati officiis
52+
exercitationem odit perferendis adipisci maiores sapiente vitae!
53+
Officia, totam consequuntur. Minima amet quisquam repellendus quam
54+
facere suscipit sit maxime, numquam sequi iste est quaerat consectetur
55+
itaque assumenda necessitatibus perspiciatis vel illum optio libero quae
56+
sapiente. Id aliquid delectus omnis iure. Et, nulla itaque, dolor
57+
possimus minus saepe mollitia nemo cupiditate assumenda quo dolore eius
58+
fuga commodi dolores delectus pariatur! Nemo eius enim voluptate! Porro
59+
aspernatur hic sunt illo ratione optio. Reiciendis, optio. Libero
60+
doloribus voluptatibus, quo explicabo saepe, quidem deleniti
61+
perspiciatis optio illo, dolorem tempore esse quisquam ducimus aliquam
62+
odit tenetur sit expedita cumque delectus nostrum! Dolore qui deserunt
63+
ducimus. Cumque suscipit natus labore amet, architecto nihil provident
64+
enim maxime ad facilis illo et esse soluta deserunt quam ut odio impedit
65+
quis eveniet voluptate culpa dolorum quisquam earum molestias!
66+
Assumenda.
67+
</p>
68+
</section>
69+
<div class="parallax-bg">
70+
<img
71+
src="img/pexels-luis-dalvan-1770775.jpg"
72+
alt="NY pic"
73+
class="parallaxImg2"
74+
/>
75+
<h2>Right</h2>
76+
</div>
77+
<section>
78+
<p>
79+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eaque
80+
dolor, nisi beatae quia at sed dolore iste. Obcaecati officiis
81+
exercitationem odit perferendis adipisci maiores sapiente vitae!
82+
Officia, totam consequuntur. Minima amet quisquam repellendus quam
83+
facere suscipit sit maxime, numquam sequi iste est quaerat consectetur
84+
itaque assumenda necessitatibus perspiciatis vel illum optio libero quae
85+
sapiente. Id aliquid delectus omnis iure. Et, nulla itaque, dolor
86+
possimus minus saepe mollitia nemo cupiditate assumenda quo dolore eius
87+
fuga commodi dolores delectus pariatur! Nemo eius enim voluptate! Porro
88+
aspernatur hic sunt illo ratione optio. Reiciendis, optio. Libero
89+
doloribus voluptatibus, quo explicabo saepe, quidem deleniti
90+
perspiciatis optio illo, dolorem tempore esse quisquam ducimus aliquam
91+
odit tenetur sit expedita cumque delectus nostrum! Dolore qui deserunt
92+
ducimus. Cumque suscipit natus labore amet, architecto nihil provident
93+
enim maxime ad facilis illo et esse soluta deserunt quam ut odio impedit
94+
quis eveniet voluptate culpa dolorum quisquam earum molestias!
95+
Assumenda.
96+
</p>
97+
</section>
98+
<div class="parallax-bg">
99+
<img
100+
src="img/pexels-vlad-alexandru-popa-1402790.jpg"
101+
alt="NY pic"
102+
class="parallaxImg3"
103+
/>
104+
<h2>Up</h2>
105+
</div>
106+
<section>
107+
<p>
108+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eaque
109+
dolor, nisi beatae quia at sed dolore iste. Obcaecati officiis
110+
exercitationem odit perferendis adipisci maiores sapiente vitae!
111+
Officia, totam consequuntur. Minima amet quisquam repellendus quam
112+
facere suscipit sit maxime, numquam sequi iste est quaerat consectetur
113+
itaque assumenda necessitatibus perspiciatis vel illum optio libero quae
114+
sapiente. Id aliquid delectus omnis iure. Et, nulla itaque, dolor
115+
possimus minus saepe mollitia nemo cupiditate assumenda quo dolore eius
116+
fuga commodi dolores delectus pariatur! Nemo eius enim voluptate! Porro
117+
aspernatur hic sunt illo ratione optio. Reiciendis, optio. Libero
118+
doloribus voluptatibus, quo explicabo saepe, quidem deleniti
119+
perspiciatis optio illo, dolorem tempore esse quisquam ducimus aliquam
120+
odit tenetur sit expedita cumque delectus nostrum! Dolore qui deserunt
121+
ducimus. Cumque suscipit natus labore amet, architecto nihil provident
122+
enim maxime ad facilis illo et esse soluta deserunt quam ut odio impedit
123+
quis eveniet voluptate culpa dolorum quisquam earum molestias!
124+
Assumenda.
125+
</p>
126+
</section>
127+
<div class="parallax-bg">
128+
<img
129+
src="img/pexels-vlad-alexandru-popa-1486222.jpg"
130+
alt="NY pic"
131+
class="parallaxImg4"
132+
/>
133+
<h2>Down</h2>
134+
</div>
135+
<section>
136+
<p>
137+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eaque
138+
dolor, nisi beatae quia at sed dolore iste. Obcaecati officiis
139+
exercitationem odit perferendis adipisci maiores sapiente vitae!
140+
Officia, totam consequuntur. Minima amet quisquam repellendus quam
141+
facere suscipit sit maxime, numquam sequi iste est quaerat consectetur
142+
itaque assumenda necessitatibus perspiciatis vel illum optio libero quae
143+
sapiente. Id aliquid delectus omnis iure. Et, nulla itaque, dolor
144+
possimus minus saepe mollitia nemo cupiditate assumenda quo dolore eius
145+
fuga commodi dolores delectus pariatur! Nemo eius enim voluptate! Porro
146+
aspernatur hic sunt illo ratione optio. Reiciendis, optio. Libero
147+
doloribus voluptatibus, quo explicabo saepe, quidem deleniti
148+
perspiciatis optio illo, dolorem tempore esse quisquam ducimus aliquam
149+
odit tenetur sit expedita cumque delectus nostrum! Dolore qui deserunt
150+
ducimus. Cumque suscipit natus labore amet, architecto nihil provident
151+
enim maxime ad facilis illo et esse soluta deserunt quam ut odio impedit
152+
quis eveniet voluptate culpa dolorum quisquam earum molestias!
153+
Assumenda.
154+
</p>
155+
</section>
156+
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.5.1/dist/simpleParallax.min.js"></script>
157+
<script src="js.js"></script>
158+
</body>
159+
</html>

‎js.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var image1 = document.getElementsByClassName('parallaxImg1');
2+
new simpleParallax(image1, {
3+
orientation: "left"
4+
});
5+
var image2 = document.getElementsByClassName('parallaxImg2');
6+
new simpleParallax(image2, {
7+
orientation: "right"
8+
});
9+
var image3 = document.getElementsByClassName('parallaxImg3');
10+
new simpleParallax(image3, {
11+
orientation: "up"
12+
});
13+
var image4 = document.getElementsByClassName('parallaxImg4');
14+
new simpleParallax(image4, {
15+
orientation: "down"
16+
});

‎style.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
section {
8+
padding: 100px;
9+
}
10+
11+
section h2 {
12+
font-size: 3em;
13+
text-transform: uppercase;
14+
letter-spacing: 2px;
15+
font-weight: 800;
16+
margin-bottom: 20px;
17+
}
18+
section p {
19+
line-height: 1.8em;
20+
text-align: justify;
21+
}
22+
img {
23+
width: 1400px;
24+
}
25+
.parallax-bg {
26+
position: relative;
27+
width: 100%;
28+
height: 600px;
29+
overflow: hidden;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
.parallax-bg h2 {
35+
position: absolute;
36+
font-size: 3em;
37+
text-transform: uppercase;
38+
letter-spacing: 2px;
39+
font-weight: 800;
40+
background-color: #fff;
41+
padding: 0 20px;
42+
43+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /