|
|
| (44 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Vilnius-Lithuania/TopBar}}
| |
| − | {{Vilnius-Lithuania/menuOverlay}}
| |
| | | | |
| − |
| |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <meta charset="utf-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/fonts.css&action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/index.css&action=raw&ctype=text/css" />
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <section class="container" id="intro-page">
| |
| − | <div id="intro-header">
| |
| − | <svg width="100%" height="100%"version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path id="wave12" d="" fill="#121212" waveHeight="425" waveDelta="18" speed="0.08" wavePoints="7"/>
| |
| − | <path id="wave11" d="" fill="#101422" waveHeight="395" waveDelta="28" speed="0.13" wavePoints="5"/>
| |
| − | <path id="wave10" d="" fill="#0F162C" waveHeight="365" waveDelta="15" speed="0.18" wavePoints="10"/>
| |
| − | <path id="wave9" d="" fill="#131F43" waveHeight="335" waveDelta="18" speed="0.21" wavePoints="7"/>
| |
| − | <path id="wave8" d="" fill="#142455" waveHeight="305" waveDelta="23" speed="0.18" wavePoints="4"/>
| |
| − | <path id="wave7" d="" fill="#142E71" waveHeight="275" waveDelta="21" speed="0.15" wavePoints="5"/>
| |
| − | <path id="wave6" d="" fill="#11348F" waveHeight="245" waveDelta="20" speed="0.13" wavePoints="6"/>
| |
| − | <path id="wave5" d="" fill="#1A44AE" waveHeight="215" waveDelta="18" speed="0.08" wavePoints="9"/>
| |
| − | <path id="wave4" d="" fill="#2454CD" waveHeight="185" waveDelta="15" speed="0.13" wavePoints="5"/>
| |
| − | <path id="wave3" d="" fill="#2E64EC" waveHeight="155" waveDelta="18" speed="0.16" wavePoints="7"/>
| |
| − | <path id="wave2" d="" fill="#4080ED" waveHeight="125" waveDelta="20" speed="0.18" wavePoints="8"/>
| |
| − | <path id="wave1" d="" fill="#679BF4" waveHeight="95" waveDelta="16" speed="0.21" wavePoints="6"/>
| |
| − | <path id="wave0" d="" fill="#fafafc" waveHeight="65" waveDelta="10" speed="0.2" wavePoints="8"/>
| |
| − | </svg>
| |
| − | </div>
| |
| − | <div id="intro">
| |
| − | <div id="text-wrapper">
| |
| − | <div id="title">
| |
| − | <h1>flavoflow</h1>
| |
| − | </div>
| |
| − | <div id="desc-wrapper">
| |
| − | <div id="center-desc" style="width: -webkit-fit-content;">
| |
| − | <span id="description"></span>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="bubbles-container">
| |
| − | </div>
| |
| − | </section>
| |
| − | <main id="storytelling">
| |
| − | <div id="animation"></div>
| |
| − | </main>
| |
| − | <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/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,
| |
| − | assetsPath: obj.assetsPath
| |
| − | });
| |
| − | console.log(anim.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)
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | ScrollLottie({
| |
| − | target: '#animation',
| |
| − | path: 'https://2020.igem.org/Template:Vilnius-Lithuania/js/fishAnimation.json',
| |
| − | assetsPath: 'https://static.igem.org/mediawiki/2020/'
| |
| − | })
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | {{Vilnius-Lithuania/footer}}
| |
