Skip to content

Commit 2665233

Browse files
KoberSaschaKoberSascha
committed
Update index.html
1 parent 7f3e7ae commit 2665233

1 file changed

Lines changed: 207 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<html>
2+
3+
<head>
4+
<style>
5+
* {
6+
box-sizing: border-box;
7+
margin: 0;
8+
padding: 0;
9+
text-decoration: none;
10+
}
11+
12+
body {
13+
font-size: 30px;
14+
font-family: Arial, Helvetica, sans-serif;
15+
font-weight: 700;
16+
}
17+
18+
.title {
19+
position: relative;
20+
font-size: 100px;
21+
font-family: Arial, Helvetica, sans-serif;
22+
font-weight: 900;
23+
letter-spacing: -6px;
24+
}
25+
26+
/*
27+
* Text animation
28+
*/
29+
30+
.text-section {
31+
position: relative;
32+
}
33+
34+
.text {
35+
height: 100vh;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
width: 100%;
40+
-webkit-touch-callout: none;
41+
/* iOS Safari */
42+
-webkit-user-select: none;
43+
/* Safari */
44+
-khtml-user-select: none;
45+
/* Konqueror HTML */
46+
-moz-user-select: none;
47+
/* Old versions of Firefox */
48+
-ms-user-select: none;
49+
/* Internet Explorer/Edge */
50+
user-select: none;
51+
}
52+
53+
.text-section .text:last-child {
54+
position: absolute;
55+
top: 0;
56+
}
57+
58+
.light {
59+
color: #000;
60+
background: #fff;
61+
}
62+
63+
.dark {
64+
color: #fff;
65+
color: rgb(255, 196, 9);
66+
background: rgb(20, 48, 68);
67+
}
68+
69+
.animate-dark-to-light {
70+
will-change: clip-path;
71+
animation: dark-to-light forwards 0.8s ease-in-out 0.8s;
72+
}
73+
74+
.text-small {
75+
font-size: 30px;
76+
font-family: Arial, Helvetica, sans-serif;
77+
font-weight: 700;
78+
79+
text-align: center;
80+
}
81+
82+
.projects {
83+
display: block;
84+
text-align: center;
85+
}
86+
87+
.card {max-width: 350px;width: 100%;box-shadow: 0px 12px 31px -15px rgba(0, 0, 0, 0.5);height: 120px;z-index: 1005;background: #fff;box-sizing: border-box;font-size: 30px;margin: 50px;border-radius: 11px;display: flex;align-items: center;justify-content: center;/* text-decoration: auto; */color: #000;}
88+
89+
@keyframes dark-to-light {
90+
from {
91+
clip-path: inset(0 0% 0 0);
92+
}
93+
94+
to {
95+
clip-path: inset(0 100% 0 0);
96+
}
97+
}
98+
99+
/*
100+
* Sticky Scroller
101+
*/
102+
103+
.sticky {
104+
position: sticky;
105+
top: 0;
106+
z-index: 0;
107+
}
108+
109+
.fixed {
110+
position: fixed;
111+
top: 0;
112+
z-index: -1;
113+
}
114+
115+
.absolute {
116+
position: absolute;
117+
top: 0;
118+
}
119+
</style>
120+
<script>
121+
var observer = new IntersectionObserver(callback, {
122+
rootMargin: "0px",
123+
threshold: 1.0
124+
});
125+
126+
var container = document.querySelector(".sticky-scroller");
127+
var target = document.querySelector("[data-scroll-shrink]");
128+
observer.observe(target);
129+
130+
function callback(entries, observer) {
131+
entries.forEach((entry) => {
132+
if (entry.isIntersecting) {
133+
window.addEventListener("scroll", onScroll);
134+
} else {
135+
// window.removeEventListener('scroll', onScroll);
136+
}
137+
});
138+
}
139+
140+
var lastScrollY = 0;
141+
var ticking = false;
142+
143+
var update = function () {
144+
// do your stuff
145+
var bounds = container.getBoundingClientRect();
146+
var percentage = ((Math.abs(bounds.y) * 100) / bounds.height) * 2;
147+
var clipPath = "inset(0 0 " + percentage + "% 0)";
148+
target.style.clipPath = clipPath;
149+
ticking = false;
150+
};
151+
152+
var requestTick = function () {
153+
if (!ticking) {
154+
window.requestAnimationFrame(update);
155+
ticking = true;
156+
}
157+
};
158+
159+
var onScroll = function () {
160+
lastScrollY = window.scrollY;
161+
requestTick();
162+
};
163+
164+
</script>
165+
</head>
166+
167+
<body>
168+
169+
<main>
170+
171+
<section class="text-section">
172+
<div class="text light title">
173+
<div>Smart Farming Lab</div>
174+
</div>
175+
<div class="text dark animate-dark-to-light title">
176+
<div>Smart Farming Lab</div>
177+
</div>
178+
</section>
179+
180+
<section>
181+
<div class="text projects">
182+
<div class=" light title">Projekte </div>
183+
184+
<div class="text-small">Alle Projekte sind Demos und nicht zu kommerziellen Zwecken erstellt</div>
185+
186+
187+
188+
<a href="https://smartfarminglab.github.io/herkunftcheck"> <div class="card">HerkunftCheck </div></a>
189+
190+
191+
192+
193+
194+
</div>
195+
<div class="text"></div>
196+
</section>
197+
198+
<section>
199+
<div class="text light title">
200+
Contribution
201+
</div>
202+
</section>
203+
204+
</main>
205+
</body>
206+
207+
</html>

0 commit comments

Comments
 (0)