https://www.youtube.com/watch?v=w8DOo_ICJds
C:\Users\Administrator\Desktop\line\index.html
C:\Users\Administrator\Desktop\line\style.css
C:\Users\Administrator\Desktop\line\scroll.js
Last updated
<!DOCTYPE html>
<html>
<head>
<title>Dancehaus</title>
<link href="style.css" rel="stylesheet">
<style type="text/css" id="tts-styles">
[data-tts-block-id].tts-active {
background: rgba(206, 225, 255, 0.9) !important;
}
[data-tts-sentence-id].tts-active {
background: rgba(0, 89, 191, 0.7) !important;
}
</style>
</head>
<body>
<header>
<h1>Dancehaus</h1>
</header>
<section>
<figure class="pos1">
<img src="photo1.jpg">
</figure>
<figure class="pos2">
<img src="photo2.jpg">
</figure>
<figure class="pos3">
<img src="photo3.jpg">
</figure>
<figure class="pos4">
<img src="photo4.jpg">
</figure>
<figure class="pos5">
<img src="photo5.jpg">
</figure>
</section>
<footer>
<nav>
<a href="#">About</a>
<a href="#">Join</a>
<a href="#">Contact</a>
</nav>
<nav>
<a href="#">Instagram</a>
<a href="#">Twitter</a>
<a href="#">TikTok</a>
</nav>
</footer>
<svg width="1000" height="2000" viewBox="0 0 1000 2000" fill="none" xmlns="http://www.w3.org/2000/svg"
class="squiggle">
<path
d="M-24.5 101C285 315 5.86278 448.291 144.223 631.238C239.404 757.091 559.515 782.846 608.808 617.456C658.101 452.067 497.627 367.073 406.298 426.797C314.968 486.521 263.347 612.858 322.909 865.537C384.086 1125.06 79.3992 1007.94 100 1261.99C144.222 1807.35 819 1325 513 1142.5C152.717 927.625 -45 1916.5 1191.5 1852"
stroke="#151db1"></path>
</svg>
<script src="scroll.js"></script>
</body>
</html>* {
box-sizing: border-box;
margin: 0;
}
html {
font-size: 32px;
font-family:
Bebas Neue,
Arial,
Helvetica,
sans-serif;
}
body {
background-color: #faf4e7;
color: #000000;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5rem;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2rem;
}
section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 320px;
position: relative;
z-index: 1;
gap: 1rem;
padding: 5rem 2rem;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
figure.pos1 {
grid-column: 2 / -1;
grid-row: 1 / span 2;
}
figure.pos2 {
grid-column: 3;
grid-row: 3 / span 2;
}
figure.pos3 {
grid-column: 1 / 3;
grid-row: 4 / span 2;
}
figure.pos4 {
grid-column: 2 / -1;
grid-row: 6 / span 2;
}
figure.pos5 {
grid-column: 1;
grid-row: 7 / span 2;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
footer nav {
display: flex;
gap: 1rem;
}
a {
color: currentColor;
text-decoration-color: #cd3c2f;
text-underline-offset: 4px;
}
a:hover {
text-decoration-color: #000000;
}
svg.squiggle {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 200vw;
z-index: 1;
}
svg.squiggle path {
stroke-width: 1rem;
}
const svg = document.querySelector('svg.squiggle');
const path = svg.querySelector('path');
const scroll = () => {
const distance = window.scrollY
const totalDistance = svg.clientHeight - window.innerHeight;
const percentage = distance / totalDistance;
const pathLength = path.getTotalLength();
path.style.strokeDasharray = `${pathLength}`;
path.style.strokeDashoffset = `${pathLength * (1 - percentage)}`;
}
scroll();
window.addEventListener('scroll', scroll);