Skip to content
Snippets Groups Projects
Commit 8fe782e1 authored by HauErn Lien's avatar HauErn Lien
Browse files

Update file tryhomepage.html

parent 04207bba
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
wiki/pages/tryhomepage.html
+ 55
− 60
View file @ 8fe782e1
......@@ -4,74 +4,69 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sachet Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.sachet {
position: relative;
width: 150px;
height: 200px;
}
.bag {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
transition: background-image 1s ease-in-out;
}
.untied {
background-image: url('https://static.igem.wiki/teams/5187/untie.png'); /* Replace with your untied image */
}
.scent {
position: absolute;
width: 100px;
height: 100px;
top: -50px;
left: 25px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
opacity: 0;
transform: scale(0.5);
transition: opacity 2s ease, transform 2s ease;
}
.scent.release {
opacity: 1;
transform: scale(1.5);
}
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.sachet {
position: relative;
width: 150px;
height: 200px;
}
.bag {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
transition: background-image 1s ease-in-out;
}
.untied {
background-image: url('untied-sachet.svg'); /* Replace with untied image */
}
.scent {
position: absolute;
width: 100px;
height: 100px;
top: -50px;
left: 25px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
opacity: 0;
transform: scale(0.5);
transition: opacity 2s ease, transform 2s ease;
}
.scent.release {
opacity: 1;
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="sachet">
<img src="https://static.igem.wiki/teams/5187/tie.png" alt="Tied Sachet" class="bag tied">
<img src="tied-sachet.svg" alt="Tied Sachet" class="bag tied">
<div class="scent"></div>
</div>
</body>
<script>
document.querySelector('.sachet').addEventListener('click', function() {
const bag = document.querySelector('.bag');
const scent = document.querySelector('.scent');
// Untie the bag
bag.classList.add('untied');
// Release the scent
scent.classList.add('release');
});
</script>
<script>
document.querySelector('.sachet').addEventListener('click', function() {
const bag = document.querySelector('.bag');
const scent = document.querySelector('.scent');
</html>
\ No newline at end of file
// Untie the bag
bag.classList.add('untied');
// Release the scent
scent.classList.add('release');
});
</script>
</body>
</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