-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
executable file
·130 lines (127 loc) · 7.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>One Element Scroll | Codrops</title>
<meta name="keywords" content="scroll animation" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/klj1rev.css">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="loading">
<main>
<div class="frame font-cap">
<h3 class="frame__title">One Element Scroll</h3>
<div class="frame-wrap">
<a class="frame__back" href="https://tympanus.net/codrops/?p=82884">Article</a>
<a class="frame__archive" href="https://tympanus.net/codrops/demos">All demos</a>
<a class="frame__github" href="https://github.com/codrops/OneElementScroll">GitHub</a>
<nav class="tags">
<a href="https://tympanus.net/codrops/demos/?tag=scroll">#scroll</a>
<a href="https://tympanus.net/codrops/demos/?tag=layout">#layout</a>
</nav>
</div>
</div>
<section class="content content--inital">
<div class="one" style="background-image:url(img/main.jpg)"></div>
</section>
<section class="content content--center content--blend">
<div data-step class="content__img"></div>
<h1 class="content__title font-alt"><span>Seraph</span><br><span>Kamos</span></h1>
</section>
<section class="content content--column">
<div class="content__img" style="background-image:url(img/1.jpg)"></div>
<div class="content__img" style="background-image:url(img/2.jpg)"></div>
<div data-step class="content__img content__img--mid"></div>
<div class="content__img" style="background-image:url(img/3.jpg)"></div>
<div class="content__img" style="background-image:url(img/4.jpg)"></div>
</section>
<section class="content content--lines">
<h2 class="content__title content__title--medium font-alt"><span>Natural</span> <div data-step class="content__img"></div><span>Garments</span></h2>
<h2 class="content__title content__title--medium font-alt"><span>Crafted with</span> <div class="content__img" style="background-image:url(img/5.jpg)"></div> <span>love</span> </h2>
<h2 class="content__title content__title--medium font-alt"><span>with</span> <div class="content__img" style="background-image:url(img/4.jpg)"></div> <span>respect</span></h2>
</section>
<section class="content content--sides">
<div data-step class="content__img"></div>
<div class="content__text">
<p><strong>Welcome to Seraph Kamos</strong> where time meets the eternal.
We believe in crafting more than garments—we create connections. Connections to the earth, to human hands, and to the moments that matter. Our designs are born from natural fabrics, each fiber carrying the whispers of its origin: the rustle of flax in a summer breeze, the soft strength of organic cotton, the warmth of wool from sheep raised with care.</p>
</div>
</section>
<section class="content content--center content--center-tall">
<div data-step class="content__img"></div>
<div class="content__text content__text--large">
<p>We honor the hands that touch every thread, partnering with artisans and communities to ensure fairness, respect, and dignity at every step. No shortcuts, no exploitation—just honest, thoughtful craftsmanship. Every piece you wear carries a story, one rooted in sustainability, transparency, and timeless design.</p>
</div>
</section>
<section class="content content--grid">
<div class="content__img" style="background-image:url(img/13.jpg)"></div>
<div data-step class="content__img"></div>
<div class="content__img" style="background-image:url(img/12.jpg)"></div>
<div class="content__img" style="background-image:url(img/9.jpg)"></div>
<div class="content__img" style="background-image:url(img/7.jpg)"></div>
<div class="content__img" style="background-image:url(img/11.jpg)"></div>
<div class="content__img" style="background-image:url(img/8.jpg)"></div>
<div class="content__img" style="background-image:url(img/10.jpg)"></div>
<div class="content__img" style="background-image:url(img/6.jpg)"></div>
</section>
<section class="outro">
<h2 class="outro__title font-alt">More you might like</h2>
<div class="card-wrap">
<div class="card">
<a href="https://tympanus.net/Development/Staggered3DGridAnimations/" class="card__img" style="background-image: url(https://tympanus.net/codrops/wp-content/uploads/2024/10/staggered3d-400x300.jpg);"></a>
<span class="card__title font-cap">
<a href="https://tympanus.net/Development/Staggered3DGridAnimations/">Staggered (3D) Grid Animations with Scroll-Triggered Effects</a>
</span>
</div>
<div class="card">
<a href="https://tympanus.net/Development/OnScrollLayoutFormations" class="card__img" style="background-image: url(https://tympanus.net/codrops/wp-content/uploads/2024/09/onscrolllayoutformationfeat-400x300.jpg);"></a>
<span class="card__title font-cap">
<a href="https://tympanus.net/Development/OnScrollLayoutFormations">Exploration of On-Scroll Layout Formations</a>
</span>
</div>
<div class="card">
<a href="https://tympanus.net/Development/OnScrollSVGFilterText" class="card__img" style="background-image: url(https://tympanus.net/codrops/wp-content/uploads/2024/08/svgfilter_text-400x300.jpg);"></a>
<span class="card__title font-cap">
<a href="https://tympanus.net/Development/OnScrollSVGFilterText">Scroll-based SVG Filter Animations on Text</a>
</span>
</div>
<div class="card">
<a href="https://tympanus.net/Development/TextClipScroll" class="card__img" style="
background-image: url(https://tympanus.net/codrops/wp-content/uploads/2024/01/clippathtext-400x300.jpg?x88973);
"></a>
<span class="card__title font-cap">
<a href="https://tympanus.net/Development/TextClipScroll">Experimental On-Scroll Text Animations with SVG Clip-Path</a>
</span>
</div>
<div class="card">
<a href="https://tympanus.net/Development/SlicedTextEffect" class="card__img" style="
background-image: url(https://tympanus.net/codrops/wp-content/uploads/2023/12/slicedtext_feat-400x300.jpg);
"></a>
<span class="card__title font-cap">
<a href="https://tympanus.net/Development/SlicedTextEffect">On-Scroll Sliced Text Animation</a>
</span>
</div>
</div>
</section>
<p class="credits font-alt"><a href="https://tympanus.net/codrops/demos">Browse all demos</a></p>
<p class="credits font-alt">Made by <a href="https://x.com/codrops">@codrops</a></p>
</main>
<!-- GSAP library -->
<script src="js/gsap.min.js"></script>
<!-- GSAP ScrollTrigger plugin -->
<script src="js/ScrollTrigger.min.js"></script>
<!-- GSAP Flip plugin -->
<script src="js/Flip.min.js"></script>
<!-- ImagesLoaded -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- Add (Lenis) smooth scroll -->
<script src="js/lenis.min.js"></script>
<script src="js/smoothscroll.js"></script>
<!-- Scripts for the effect -->
<script type="module" src="js/index.js"></script>
</body>
</html>