Difference between revisions of "Team:Vilnius-Lithuania/test/Attributions"

(Created page with "{{Vilnius-Lithuania/TopBar}} {{Vilnius-Lithuania/menuOverlay}} <html> <head> <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Templ...")
 
m
Line 10: Line 10:
 
<body>
 
<body>
 
     <div class="introContainer">
 
     <div class="introContainer">
−
         <span class="bubblePhoto"></span>
+
         <span class="bubblePhoto" id="bubbleAnim1"></span>
−
         <span class="bubblePhoto"></span>
+
         <span class="bubblePhoto" id="bubbleAnim2"></span>
 
         <span class="bubbleHeading">
 
         <span class="bubbleHeading">
 
             <div>Attributions</div>
 
             <div>Attributions</div>
Line 18: Line 18:
 
     </div>
 
     </div>
 
     <main id="section-text">
 
     <main id="section-text">
−
         <div class="content">
+
         <div class="contentBlock">
−
             <div class="h2 larger">Ubi concordia, ibi victoria</div>
+
             <div class="content">
−
            <div class="h3">The Very Best</div>
+
                <div class="h2 larger">Ubi concordia, ibi victoria</div>
−
            <p class="content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis ante odio. Sed eleifend, eros at bibendum ullamcorper, nisl nisl mattis ligula, ut euismod lorem elit sit amet ipsum. Suspendisse scelerisque, odio vitae malesuada mattis, sem augue mattis velit, sit amet ornare lacus velit nec nibh. Curabitur sed lectus sapien. Suspendisse finibus urna volutpat mi consequat lacinia. In ut felis quis purus tempus gravida. Vestibulum eget gravida risus. Vivamus porta dui et nulla fringilla, nec fermentum felis placerat. Pellentesque dictum risus quis aliquam lacinia. Duis mauris arcu, rhoncus eu felis a, laoreet volutpat ipsum. Ut sed aliquam libero. Sed placerat sem nec hendrerit pellentesque.</p>
+
                <div class="h3">The Very Best</div>
 +
                <p class="content-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis ante odio. Sed eleifend, eros at bibendum ullamcorper, nisl nisl mattis ligula, ut euismod lorem elit sit amet ipsum. Suspendisse scelerisque, odio vitae malesuada mattis, sem augue mattis velit, sit amet ornare lacus velit nec nibh. Curabitur sed lectus sapien. Suspendisse finibus urna volutpat mi consequat lacinia. In ut felis quis purus tempus gravida. Vestibulum eget gravida risus. Vivamus porta dui et nulla fringilla, nec fermentum felis placerat. Pellentesque dictum risus quis aliquam lacinia. Duis mauris arcu, rhoncus eu felis a, laoreet volutpat ipsum. Ut sed aliquam libero. Sed placerat sem nec hendrerit pellentesque.</p>
 +
            </div>
 
         </div>
 
         </div>
 
         <div class="table">
 
         <div class="table">
Line 34: Line 36:
 
     </script>
 
     </script>
 
     <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/Attributions&action=raw&ctype=text/javascript"></script>
 
     <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/Attributions&action=raw&ctype=text/javascript"></script>
−
    <script>
+
        <script>
 +
        let bubbleOne = document.getElementById("bubbleAnim1");
 +
        let bubbleTwo = document.getElementById("bubbleAnim2");
 
         // Title bubble animation
 
         // Title bubble animation
 
         function animate() {
 
         function animate() {
Line 40: Line 44:
 
             let scroll = scrollTop / window.innerHeight;
 
             let scroll = scrollTop / window.innerHeight;
 
             if (scroll > 1) scroll = 1;
 
             if (scroll > 1) scroll = 1;
−
             if (window.innerWidth / window.innerHeight > 1){
+
            let horizontal, vertical;
−
                 let horizontal = `calc((90vw - 74vh) * ${scroll} + 10vw)`;
+
             if (window.innerWidth / window.innerHeight > 1) {
−
                 let vertical = (20 * scroll + 5) + "vw";
+
                 console.log("1st");
−
                $(".introContainer .bubblePhoto:first-child").css("margin-right", horizontal);
+
                horizontal = `calc((75vw - 64vh) * ${scroll} + 15vw)`;
−
                $(".introContainer .bubblePhoto:first-child").css("margin-top", vertical);
+
                 vertical = `calc(30vh * ${scroll} + 5vh - 18px)`;
−
                 $(".introContainer .bubblePhoto:nth-child(2)").css("margin-left", horizontal);
+
            } else {
−
                 $(".introContainer .bubblePhoto:nth-child(2)").css("margin-bottom", vertical);
+
                 console.log("2nd");
−
            }else{
+
                 horizontal = `calc(20vw * ${scroll} + 10vw - 18px)`;
−
                let horizontal = `calc(16vw * ${scroll} + 8vh)`;
+
                 vertical = `calc((75vh - 64vw - 18px) * ${scroll} + 15vh)`;
−
                 let vertical = (20 * scroll + 5) + "vh";
+
−
                $(".introContainer .bubblePhoto:first-child").css("margin-right", horizontal);
+
−
                $(".introContainer .bubblePhoto:first-child").css("margin-top", vertical);
+
−
                $(".introContainer .bubblePhoto:nth-child(2)").css("margin-left", horizontal);
+
−
                $(".introContainer .bubblePhoto:nth-child(2)").css("margin-bottom", vertical);
+
 
             }
 
             }
 +
           
 +
            bubbleOne.style.marginRight = horizontal;
 +
            bubbleOne.style.marginTop = vertical;
 +
            bubbleTwo.style.marginLeft = horizontal;
 +
            bubbleTwo.style.marginBottom = vertical;
 
         }
 
         }
−
         window.addEventListener("scroll", animate, {passive: 1});
+
         window.addEventListener("scroll", animate, {
−
         window.addEventListener("resize", animate, {passive: 1});
+
            passive: 1
−
         document.addEventListener("load", animate, {passive: 1});
+
        });
 +
         window.addEventListener("resize", animate, {
 +
            passive: 1
 +
        });
 +
         document.addEventListener("load", animate, {
 +
            passive: 1
 +
        });
 
         animate();
 
         animate();
 +
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Vilnius-Lithuania/footer}}
 
{{Vilnius-Lithuania/footer}}

Revision as of 11:48, 4 September 2020

Attributions
Attributions
Ubi concordia, ibi victoria
The Very Best

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis ante odio. Sed eleifend, eros at bibendum ullamcorper, nisl nisl mattis ligula, ut euismod lorem elit sit amet ipsum. Suspendisse scelerisque, odio vitae malesuada mattis, sem augue mattis velit, sit amet ornare lacus velit nec nibh. Curabitur sed lectus sapien. Suspendisse finibus urna volutpat mi consequat lacinia. In ut felis quis purus tempus gravida. Vestibulum eget gravida risus. Vivamus porta dui et nulla fringilla, nec fermentum felis placerat. Pellentesque dictum risus quis aliquam lacinia. Duis mauris arcu, rhoncus eu felis a, laoreet volutpat ipsum. Ut sed aliquam libero. Sed placerat sem nec hendrerit pellentesque.

IevaEdvinasEgleAukseEmilijaEmilisAustejaDenisKamilePovilasPauliusBarboraLiepaMonika