82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #0b0f14;
|
|
color: #fff;
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
}
|
|
.clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
#s1 {
|
|
background-color: #2a52be;
|
|
}
|
|
#s2 {
|
|
background-color: #4caf50;
|
|
}
|
|
#s3 {
|
|
background-color: #ff9800;
|
|
}
|
|
#s4 {
|
|
background-color: #9c27b0;
|
|
}
|
|
h1 {
|
|
font-size: 6rem;
|
|
margin: 0;
|
|
text-align: center;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="40">
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="20"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="30"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
|
|
|
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
|
<h1 id="s1-title">Welcome to Community Gardening</h1>
|
|
</section>
|
|
<section id="s2" class="clip" data-start="10" data-duration="10" data-track-index="1">
|
|
<h1 id="s2-title">Plan Your Event</h1>
|
|
</section>
|
|
<section id="s3" class="clip" data-start="20" data-duration="10" data-track-index="1">
|
|
<h1 id="s3-title">Engage the Community</h1>
|
|
</section>
|
|
<section id="s4" class="clip" data-start="30" data-duration="10" data-track-index="1">
|
|
<h1 id="s4-title">Celebrate Your Success</h1>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
tl.to("#s1-title", { opacity: 1, duration: 1, ease: "power3.out" }, 1);
|
|
tl.to("#s1-title", { opacity: 0, duration: 1, ease: "power3.in" }, 9);
|
|
tl.to("#s2-title", { opacity: 1, duration: 1, ease: "power3.out" }, 11);
|
|
tl.to("#s2-title", { opacity: 0, duration: 1, ease: "power3.in" }, 19);
|
|
tl.to("#s3-title", { opacity: 1, duration: 1, ease: "power3.out" }, 21);
|
|
tl.to("#s3-title", { opacity: 0, duration: 1, ease: "power3.in" }, 29);
|
|
tl.to("#s4-title", { opacity: 1, duration: 1, ease: "power3.out" }, 31);
|
|
tl.to("#s4-title", { opacity: 0, duration: 1, ease: "power3.in" }, 39);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html> |