Difference between revisions of "Team:Vilnius-Lithuania/test/index.html"

Line 46: Line 46:
 
       </div>
 
       </div>
 
</section>
 
</section>
<section class="container content-index" id="problem-page">
+
<main id="storytelling">
          <div id="problem-header" class="content-header">
+
      <div id="animation"></div>
                    <h1>problem</h1>
+
</main>
        </div>
+
</section>
+
<section class="container content-index" id="solution-page">
+
          <div id="solution-header" class="content-header">
+
                    <h1>solution</h1>
+
        </div>
+
</section>
+
<section class="container content-index" id="links-page">
+
          <div id="links-header" class="content-header">
+
                    <h1>explore</h1>
+
        </div>
+
</section>
+
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/particles.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/intro.js&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/gsap.min.js&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/ScrollTrigger.min.js&action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/js/lottie.js&action=raw&ctype=text/javascript"></script>
 +
<script>
 +
const ScrollLottie = (obj) => {
 +
 +
let anim = lottie.loadAnimation({
 +
container: document.querySelector(obj.target),
 +
renderer: 'svg',
 +
loop: false,
 +
autoplay: false,
 +
path: obj.path
 +
});
 +
 +
let timeObj = {
 +
currentFrame: 0
 +
}
 +
let endString = (obj.speed === "slow") ? "+=2000" : (obj.speed === "medium") ? "+=1000" : (obj.speed === undefined) ? "+=1250" : "+=500";
 +
ScrollTrigger.create({
 +
trigger: obj.target,
 +
scrub: true,
 +
pin: true,
 +
start: "top top",
 +
end: endString,
 +
onUpdate: self => {
 +
if (obj.duration) {
 +
gsap.to(timeObj, {
 +
duration: obj.duration,
 +
currentFrame: (Math.floor(self.progress * (anim.totalFrames - 1))),
 +
onUpdate: () => {
 +
anim.goToAndStop(timeObj.currentFrame, true)
 +
},
 +
ease: 'expo'
 +
})
 +
} else {
 +
anim.goToAndStop(self.progress * (anim.totalFrames - 1), true)
 +
}
 +
}
 +
});
 +
}
 +
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Vilnius-Lithuania/footer}}
 
{{Vilnius-Lithuania/footer}}

Revision as of 14:01, 3 September 2020


flavoflow