|
|
| (2 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Vilnius-Lithuania/TopBar}}
| |
| − | {{Vilnius-Lithuania/menuOverlay}}
| |
| | | | |
| − | <html>
| |
| − | <head>
| |
| − | <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/CSS/Collaborations&action=raw&ctype=text/css" />
| |
| − | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Animations&action=raw&ctype=text/css" />
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="introContainer">
| |
| − | <div class="heading">Collaborations</div>
| |
| − | <div class="heading other">Collaborations</div>
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
| |
| − | </div>
| |
| − | <div class="milkWave" id="animWave">
| |
| − | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
| |
| − | <path id="animWavePath" d="" fill="#fafafc"/>
| |
| − | </svg>
| |
| − | </div>
| |
| − | <main>
| |
| − |
| |
| − | </main>
| |
| − | <script>
| |
| − | document.getElementById("fixedOverlay").classList.add("team");
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − | const collabs = [
| |
| − | {name: "Lėktuvėlis", photo1: "https://cdn.pixabay.com/photo/2016/08/20/11/34/paper-plane-1607340_1280.jpg", photo2: "https://s31450.pcdn.co/wp-content/uploads/2016/02/iStock_000042222888_Medium_160304.jpg", text: "Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer. Porttitor lacus luctus accumsan tortor posuere ac ut. Id leo in vitae turpis. Gravida neque convallis a cras semper auctor neque vitae tempus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Vitae elementum curabitur vitae nunc sed velit. Et malesuada fames ac turpis egestas maecenas pharetra convallis."},
| |
| − | {name: "Atvirutės", photo1: "https://cdn.pixabay.com/photo/2016/05/13/17/16/letters-1390463_1280.jpg", photo2: "https://sites.tufts.edu/insight/wp-content/blogs.dir/2889/files/2015/12/Cathedral-High-School-Boston-Mentoring.png", text: "Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc."},
| |
| − | {name: "Mūsų Mielas ir Brangusis Robloxas Taivane", photo1: "https://i.ytimg.com/vi/NIY6AG3pAgU/maxresdefault.jpg", photo2: "https://4.bp.blogspot.com/-1kYAohpsDYY/URwD2kiiFhI/AAAAAAAACSo/wEWQu1b51nM/s1600/RobloxScreenShot02122013_201948511.jpg", text: "Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum."},
| |
| − | ]; // TODO: change photos and content
| |
| − | </script>
| |
| − | <script>
| |
| − | let cEl = (tagName, className, children = []) => {
| |
| − | let element = document.createElement(tagName);
| |
| − | element.className = className;
| |
| − | children.forEach((child)=>element.appendChild(child));
| |
| − | return element;
| |
| − | };
| |
| − | let main = document.querySelector("main");
| |
| − | for (let collab of collabs){
| |
| − | let collabName = cEl("div", "name");
| |
| − | collabName.innerText = collab.name;
| |
| − | let photo1 = cEl("span", "");
| |
| − | photo1.style = "background-image: url(" + collab.photo1 + ");";
| |
| − | let photo2 = cEl("span", "");
| |
| − | photo2.style = "background-image: url(" + collab.photo2 + ");";
| |
| − | let collabPhotos = cEl("div", "photos", [photo1, photo2]);
| |
| − | let collabText = cEl("div", "text")
| |
| − | collabText.innerText = collab.text;
| |
| − | let collabDiv = cEl("div", "collabSingle", [collabName, collabPhotos, collabText]);
| |
| − |
| |
| − | main.appendChild(collabDiv);
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − | var setWaveParams = () => {
| |
| − | let container = document.querySelector(".introContainer");
| |
| − | return {
| |
| − | width: container.offsetWidth,
| |
| − | height: container.offsetHeight,
| |
| − | waveWidth: container.offsetWidth,
| |
| − | waveHeight: container.offsetHeight * 0.9,
| |
| − | waveDelta: 15,
| |
| − | speed: 0.15,
| |
| − | wavePoints: 5,
| |
| − | };
| |
| − | }
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/ScrollFadeIn&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | scrollFadeIn(Array.from(document.querySelectorAll(".collabSingle")).map((item)=>Array.from(item.children)));
| |
| − | </script>
| |
| − | <script>
| |
| − | // Title move animation
| |
| − | function animate() {
| |
| − | let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
| |
| − | let scroll = scrollTop / window.innerHeight;
| |
| − | if (scroll > 1) scroll = 1;
| |
| − | let unit = "vw";
| |
| − | if (window.innerWidth / window.innerHeight > 1) unit = "vh"
| |
| − |
| |
| − | document.querySelector(".introContainer .heading").style.transform = "translateX(-" + (60 * scroll) + unit + ")";
| |
| − | document.querySelector(".introContainer .heading.other").style.transform = "translateX(" + (35 * scroll) + unit + ")";
| |
| − | }
| |
| − | window.addEventListener("scroll", animate, {passive: 1});
| |
| − | window.addEventListener("resize", animate, {passive: 1});
| |
| − | document.addEventListener("load", animate, {passive: 1});
| |
| − | animate();
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | {{Vilnius-Lithuania/footer}}
| |
