Skip to content

Commit 6b5abcb

Browse files
crnacuracrnacura
committed
Initial commit
0 parents  commit 6b5abcb

File tree

9 files changed

+490
-0
lines changed

9 files changed

+490
-0
lines changed

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.cache
3+
.parcel-cache
4+
package-lock.json

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Infinite Loop Scrolling
2+
3+
Infinite loop scrolling based on the animation seen on [Bureau DAM](https://www.bureaudam.com/).
4+
5+
![Image Title](https://tympanus.net/codrops/wp-content/uploads/2023/01/loopscroll.jpg)
6+
7+
[Article on Codrops](https://tympanus.net/codrops/?p=66589)
8+
9+
[Demo](http://tympanus.net/Tutorials/LoopScrolling/)
10+
11+
12+
## Installation
13+
14+
Install dependencies:
15+
16+
```
17+
npm install
18+
```
19+
20+
Compile the code for development and start a local server:
21+
22+
```
23+
npm start
24+
```
25+
26+
Create the build:
27+
28+
```
29+
npm run build
30+
```
31+
32+
## Credits
33+
34+
- Images from [Unsplash](https://unsplash.com/)
35+
36+
## Misc
37+
38+
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
39+
40+
## License
41+
[MIT](LICENSE)
42+
43+
Made with :blue_heart: by [Codrops](http://www.codrops.com)
44+
45+
46+
47+
48+

‎css/base.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
font-size: 14px;
9+
--color-text: #fff;
10+
--color-bg: #000;
11+
--color-link: #aaa;
12+
--color-link-hover: #fff;
13+
}
14+
15+
body {
16+
margin: 0;
17+
color: var(--color-text);
18+
background-color: var(--color-bg);
19+
text-transform: uppercase;
20+
font-family: tenon, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+
/* Page Loader */
26+
.js .loading::before,
27+
.js .loading::after {
28+
content: '';
29+
position: fixed;
30+
z-index: 1000;
31+
}
32+
33+
.js .loading::before {
34+
top: 0;
35+
left: 0;
36+
width: 100%;
37+
height: 100%;
38+
background: var(--color-bg);
39+
}
40+
41+
.js .loading::after {
42+
top: 50%;
43+
left: 50%;
44+
width: 60px;
45+
height: 60px;
46+
margin: -30px 0 0 -30px;
47+
border-radius: 50%;
48+
opacity: 0.4;
49+
background: var(--color-link);
50+
animation: loaderAnim 0.7s linear infinite alternate forwards;
51+
52+
}
53+
54+
@keyframes loaderAnim {
55+
to {
56+
opacity: 1;
57+
transform: scale3d(0.5,0.5,1);
58+
}
59+
}
60+
61+
a {
62+
text-decoration: none;
63+
color: var(--color-link);
64+
outline: none;
65+
cursor: pointer;
66+
}
67+
68+
a:hover {
69+
color: var(--color-link-hover);
70+
outline: none;
71+
}
72+
73+
/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
74+
a:focus {
75+
/* Provide a fallback style for browsers
76+
that don't support :focus-visible */
77+
outline: none;
78+
background: lightgrey;
79+
}
80+
81+
a:focus:not(:focus-visible) {
82+
/* Remove the focus indicator on mouse-focus for browsers
83+
that do support :focus-visible */
84+
background: transparent;
85+
}
86+
87+
a:focus-visible {
88+
/* Draw a very noticeable focus style for
89+
keyboard-focus on browsers that do support
90+
:focus-visible */
91+
outline: 2px solid red;
92+
background: transparent;
93+
}
94+
95+
.unbutton {
96+
background: none;
97+
border: 0;
98+
padding: 0;
99+
margin: 0;
100+
font: inherit;
101+
cursor: pointer;
102+
}
103+
104+
.unbutton:focus {
105+
outline: none;
106+
}
107+
108+
.frame {
109+
color: var(--color-title);
110+
padding: 1rem;
111+
display: grid;
112+
grid-template-columns: 100%;
113+
grid-template-areas: 'title' 'prev' 'sponsor';
114+
justify-content: start;
115+
grid-gap: 0.5rem;
116+
align-items: start;
117+
position: fixed;
118+
top: 0;
119+
left: 0;
120+
width: 100%;
121+
justify-items: end;
122+
}
123+
124+
.frame a:not(.frame__title-back) {
125+
white-space: nowrap;
126+
overflow: hidden;
127+
position: relative;
128+
}
129+
130+
.frame a:not(.frame__title-back)::before {
131+
content: '';
132+
height: 1px;
133+
width: 100%;
134+
background: currentColor;
135+
position: absolute;
136+
top: 90%;
137+
transition: transform 0.3s;
138+
transform-origin: 0% 50%;
139+
}
140+
141+
.frame a:not(.frame__title-back):hover::before {
142+
transform: scaleX(0);
143+
transform-origin: 100% 50%;
144+
}
145+
146+
.frame__title {
147+
grid-area: title;
148+
display: flex;
149+
align-items: start;
150+
}
151+
152+
.frame__title-main {
153+
font-size: inherit;
154+
margin: 0;
155+
font-weight: inherit;
156+
}
157+
158+
.frame__title-back {
159+
position: relative;
160+
display: flex;
161+
align-items: flex-end;
162+
}
163+
164+
.frame__title-back span {
165+
display: none;
166+
}
167+
168+
.frame__title-back svg {
169+
fill: currentColor;
170+
}
171+
172+
.frame__prev {
173+
grid-area: prev;
174+
align-self: start;
175+
}
176+
177+
.grid {
178+
display: flex;
179+
flex-direction: column;
180+
gap: 5vh;
181+
}
182+
183+
.grid__item {
184+
height: 100vh;
185+
place-items: center;
186+
display: grid;
187+
}
188+
189+
.grid__item-inner {
190+
display: grid;
191+
gap: 1rem;
192+
place-items: center;
193+
text-align: center;
194+
}
195+
196+
.grid__item--stack {
197+
display: grid;
198+
gap: 2rem;
199+
grid-template-rows: 1fr auto;
200+
}
201+
202+
.grid__item-logo {
203+
padding: 8rem 1rem 0;
204+
}
205+
206+
.grid__item-img {
207+
background-size: cover;
208+
background-position: 50% 50%;
209+
height: 70vh;
210+
aspect-ratio: 1.5;
211+
}
212+
213+
.grid__item-text {
214+
margin: 0;
215+
}
216+
217+
.credits {
218+
margin: 0 0 1.5rem;
219+
font-size: 1rem;
220+
letter-spacing: 0.25em;
221+
word-spacing: 0.75em;
222+
font-weight: 300;
223+
text-align: center;
224+
}
225+
226+
@media screen and (min-width: 53em) {
227+
.frame {
228+
grid-template-columns: auto auto 1fr;
229+
grid-template-rows: auto;
230+
grid-template-areas: 'title prev sponsor';
231+
justify-items: start;
232+
grid-gap: 2rem;
233+
}
234+
.grid__item-logo {
235+
padding: 3rem 1rem 0;
236+
}
237+
.credits {
238+
font-size: 1.4vw;
239+
}
240+
}

‎favicon.ico‎

14.7 KB
Binary file not shown.

‎img/1.jpg‎

108 KB
Loading

‎index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Infinite Loop Scrolling | Codrops</title>
7+
<meta name="description" content="Infinite loop scrolling based on the animation seen on Bureau DAM. " />
8+
<meta name="keywords" content="infinite scrolling, loop scrolling, gsap, lenis" />
9+
<meta name="author" content="Codrops" />
10+
<link rel="shortcut icon" href="favicon.ico">
11+
<link rel="stylesheet" href="https://use.typekit.net/bvo6szq.css">
12+
<link rel="stylesheet" type="text/css" href="css/base.css" />
13+
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
14+
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
15+
</head>
16+
<body class="loading">
17+
<main>
18+
<div class="frame">
19+
<div class="frame__title">
20+
<h1 class="frame__title-main">Loop Scrolling</h1>
21+
<a aria-label="Back to the article" class="frame__title-back" href="https://tympanus.net/codrops/?p=66589">
22+
<span class="oh__inner">Back to the article</span>
23+
<svg width="18px" height="18px" viewBox="0 0 24 24"><path vector-effect="non-scaling-stroke" d="M18.25 15.5a.75.75 0 00.75-.75v-9a.75.75 0 00-.75-.75h-9a.75.75 0 000 1.5h7.19L6.22 16.72a.75.75 0 101.06 1.06L17.5 7.56v7.19c0 .414.336.75.75.75z"></path>
24+
</svg>
25+
</a>
26+
</div>
27+
<a class="frame__prev" href="https://tympanus.net/Tutorials/OnScrollFoldingCardboardBox/">Previous demo</a>
28+
</div>
29+
<div class="grid">
30+
<div class="grid__item grid__item--stack">
31+
<svg class="grid__item-logo" width="100%" height="100%" viewBox="0 0 503 277" preserveAspectRatio="none">
32+
<path d="M56.3 232.3 56.3 193.8C56.3 177.4 54.7 174.1 48.5 165.9 35.4 148.8 17.6 133 8.5 120.8.7 110.3.1 103.7.1 85.6L.1 45.2C.1 14.9 13.5.5 41 .5 68.8.5 79.1 15.3 79.1 45.2L79.1 94.5 56.9 94.5 56.9 48.5C56.9 35 53.5 25.8 40.7 25.8 29.8 25.8 24.1 32.4 24.1 45.2L24.1 85.3C24.1 96.8 25.1 100.1 29.8 106.3 41 121.8 59.1 137.6 68.8 150.4 77.2 161.6 80 169.8 80 193.5L80 232.3C80 260.9 68.8 277 40.4 277 12.3 277 .1 261.5.1 232.3L.1 174.7 22.9 174.7 22.9 228.7C22.9 243.1 26.9 252.3 40.1 252.3 51.6 252.3 56.3 245.1 56.3 232.3ZM176.5 277 101.5 277 101.5.5 127.1.5 127.1 251.8 176.5 251.8 176.5 277ZM290 277 264.5 277 258.4 230.6 217.1 230.6 211 277 186.2 277 224.1.5 254.1.5 290 277ZM218.1 207.1 253.4 207.1C247.7 159.7 241.6 114 236.3 65.3 230.5 114 224.5 159.7 218.1 207.1ZM399.6 277 374 277 326.3 75.1C326.6 117.1 326.6 155.7 326.6 197.7L326.6 277 304.5 277 304.5.5 335 .5 377.4 203.1C377 165.1 377 129.2 377 91.2L377 .5 399.6.5 399.6 277ZM471.5 277 446.3 277 446.3 26.3 415.3 26.3 415.3.5 502.4.5 502.4 26.3 471.5 26.3 471.5 277Z" id="SLANT" fill="#fff"></path>
33+
</svg>
34+
<p class="grid__item-text credits">An infinite scrolling demo based on <a href="https://www.bureaudam.com/">Bureau DAM</a></p>
35+
</div>
36+
<div class="grid__item">
37+
<div class="grid__item-inner">
38+
<div class="grid__item-img" style="background-image:url(img/1.jpg);"></div>
39+
<p class="grid__item-text"><a href="#">View all projects &rarr;</a></p>
40+
</div>
41+
</div>
42+
</div>
43+
</main>
44+
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
45+
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>
46+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
47+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
48+
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
49+
<script src="js/index.js"></script>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)