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

Update file description.html

parent e1538e99
No related branches found
No related tags found
No related merge requests found
......@@ -33,7 +33,7 @@
{% block title %}Description{% endblock %}
{% block page_content %}
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/learn.jpg" alt="learn" class="top-right-image" id="dynamicImage">
<div class="sidebar">
<ul>
......@@ -111,45 +111,7 @@
<img src="https://static.igem.wiki/teams/5187/figure/ibd-figure.jpg" alt="ibd_figure" class="shadowed-image">
</div>
</div>
<script>
const images = {
'description': 'https://static.igem.wiki/teams/5187/unrelated-to-tech/learn.jpg',
'topic1': 'https://static.igem.wiki/teams/5187/unrelated-to-tech/design.jpg',
'topic2': 'https://static.igem.wiki/teams/5187/unrelated-to-tech/build.jpg',
'topic3': 'https://static.igem.wiki/teams/5187/unrelated-to-tech/test.jpg',
'topic4': 'https://static.igem.wiki/teams/5187/unrelated-to-tech/learn.jpg'
};
const sections = document.querySelectorAll('h2[id]');
const dynamicImage = document.getElementById('dynamicImage');
function changeImage(newSrc) {
dynamicImage.style.opacity = 0;
setTimeout(() => {
dynamicImage.src = newSrc;
dynamicImage.style.opacity = 1;
}, 500);
}
function checkVisibility() {
const scrollPosition = window.scrollY + window.innerHeight / 2;
for (let i = sections.length - 1; i >= 0; i--) {
const section = sections[i];
if (section.offsetTop <= scrollPosition) {
const newImageSrc = images[section.id];
if (newImageSrc && dynamicImage.src !== newImageSrc) {
changeImage(newImageSrc);
}
break;
}
}
}
window.addEventListener('scroll', checkVisibility);
window.addEventListener('load', checkVisibility);
</script>
</body>
</html>
{% endblock %}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment