Skip to content
Snippets Groups Projects
Commit 95b36960 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file home.html

parent 7361a62e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 100 additions and 4 deletions
wiki/pages/home.html
+ 100
− 4
View file @ 95b36960
......@@ -149,6 +149,7 @@
margin: 20px;
}
}
.loader-container {
position: fixed;
top: 0;
......@@ -167,7 +168,33 @@
width: 150px;
height: 150px;
}
.line-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.line {
position: absolute;
width: 100%;
height: 100%;
fill: none;
stroke: pink;
stroke-width: 2;
stroke-linecap: round;
opacity: 0.7;
}
#sachet {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
z-index: 2;
}
</style>
</head>
<body>
......@@ -176,9 +203,20 @@
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
</div>
<div id="menu">
{% include 'menu.html' %}
</div>
<div class="line-container">
<svg width="100%" height="100%" preserveAspectRatio="none">
<path class="line" id="line1" d="M0 0 Q 0 0, 0 0"/>
<path class="line" id="line2" d="M0 0 Q 0 0, 0 0"/>
<path class="line" id="line3" d="M0 0 Q 0 0, 0 0"/>
</svg>
</div>
<img id="sachet" src="https://static.igem.wiki/teams/5187/art/icon.png" alt="Sachet">
<div id="menu">
{% include 'menu.html' %}
</div>
<div class="content-wrapper">
<!-- 内容块 1 -->
......@@ -336,6 +374,64 @@
}, 500);
}, 2000); // Hide after 2 seconds (adjust as needed)
});
// Animated lines
const lines = document.querySelectorAll('.line');
const sachet = document.getElementById('sachet');
let mouseX = 0, mouseY = 0;
function updateLines() {
const rect = sachet.getBoundingClientRect();
const sachetX = rect.left + rect.width / 2;
const sachetY = rect.top + rect.height / 2;
lines.forEach((line, index) => {
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
const midX = (startX + sachetX) / 2 + (Math.random() - 0.5) * 200;
const midY = (startY + sachetY) / 2 + (Math.random() - 0.5) * 200;
const path = `M${startX} ${startY} Q ${midX} ${midY}, ${sachetX} ${sachetY}`;
line.setAttribute('d', path);
});
}
function animateLines() {
updateLines();
requestAnimationFrame(animateLines);
}
animateLines();
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
lines.forEach((line) => {
const distanceX = mouseX - line.getBoundingClientRect().left;
const distanceY = mouseY - line.getBoundingClientRect().top;
const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
if (distance < 100) {
line.style.strokeWidth = 4;
line.style.opacity = 1;
} else {
line.style.strokeWidth = 2;
line.style.opacity = 0.7;
}
});
});
// Existing scripts
window.addEventListener('load', function() {
const loaderContainer = document.querySelector('.loader-container');
setTimeout(function() {
loaderContainer.style.opacity = '0';
loaderContainer.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
loaderContainer.style.display = 'none';
}, 500);
}, 2000);
});
</script>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment