Difference between revisions of "Team:TecCEM/Carlos"

(Replaced content with "<html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> </html>")
Line 1: Line 1:
−
<html lang="en">
+
<html>
−
  <head>
+
<head>
−
    <meta charset="UTF-8" />
+
<meta charset="utf-8">
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
<title>Untitled Document</title>
−
    <title>Document</title>
+
</head>
−
    <style>
+
−
      * {
+
−
        box-sizing: border-box;
+
−
      }
+
−
 
+
−
      body {
+
−
        background: rgb(79, 71, 218);
+
−
        background: linear-gradient(
+
−
          151deg,
+
−
          rgba(79, 71, 218, 1) 0%,
+
−
          rgba(222, 5, 217, 1) 35%,
+
−
          rgba(151, 205, 240, 1) 100%
+
−
        );
+
−
      }
+
−
 
+
−
      header,
+
−
      footer {
+
−
        height: 100vh;
+
−
        display: flex;
+
−
        justify-content: center;
+
−
        align-items: center;
+
−
      }
+
−
 
+
−
      header h1 {
+
−
        font-size: 50px;
+
−
      }
+
−
      .container {
+
−
        display: flex;
+
−
      }
+
−
 
+
−
      .item {
+
−
        text-align: center;
+
−
        width: 50%;
+
−
        height: 30vh;
+
−
        padding-top: 1em;
+
−
        padding-bottom: 1em;
+
−
      }
+
−
 
+
−
      .animation_1,
+
−
      .animation_2 {
+
−
        background-repeat: no-repeat;
+
−
        background-position: center;
+
−
        position: relative;
+
−
        overflow: hidden;
+
−
      }
+
−
 
+
−
      .paper_1 {
+
−
        height: 70px;
+
−
        position: absolute;
+
−
        top: 0;
+
−
        left: 60%;
+
−
      }
+
−
 
+
−
      .paper_2 {
+
−
        height: 70px;
+
−
        position: absolute;
+
−
        top: 0;
+
−
        left: 20%;
+
−
      }
+
−
    </style>
+
−
  </head>
+
−
  <body>
+
−
    <header>
+
−
      <h1>Header</h1>
+
−
    </header>
+
−
    <section class="animation_1">
+
−
      <img class="paper_1" src="https://static.igem.org/mediawiki/2021/0/05/T--TecCEM--paperplane.png" />
+
−
      <div class="container">
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
        <div class="item"></div>
+
−
      </div>
+
−
      <div class="container">
+
−
        <div class="item"></div>
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
      </div>
+
−
      <div class="container">
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
        <div class="item"></div>
+
−
      </div>
+
−
    </section>
+
−
    <section class="animation_2">
+
−
      <img class="paper_2" src="https://static.igem.org/mediawiki/2021/0/05/T--TecCEM--paperplane.png" alt="img" />
+
−
      <div class="container">
+
−
        <div class="item"></div>
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
      </div>
+
−
      <div class="container">
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
        <div class="item"></div>
+
−
      </div>
+
−
      <div class="container">
+
−
        <div class="item"></div>
+
−
        <div class="item">
+
−
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis,
+
−
          tempore autem. Explicabo, eligendi beatae. Ab veritatis saepe nesciunt
+
−
          quae exercitationem culpa laborum, tempore unde aperiam repellendus,
+
−
          nemo similique facere soluta laboriosam sit pariatur aut impedit rem
+
−
          placeat iste. In, culpa!
+
−
        </div>
+
−
      </div>
+
−
    </section>
+
−
    <footer>
+
−
      <h1>Footer</h1>
+
−
    </footer>
+
−
 
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
+
−
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
+
−
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
+
−
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
+
−
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
+
−
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
+
−
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script
+
−
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
+
−
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
+
−
      crossorigin="anonymous"
+
−
    ></script>
+
−
    <script>
+
−
      const flightPath1 = {
+
−
        curviness: 0.2,
+
−
        autoRotate: true,
+
−
        values: [
+
−
          { x: 0, y: 110 },
+
−
          { x: -600, y: 110 },
+
−
          { x: -600, y: 290 },
+
−
          { x: 200, y: 290 },
+
−
          { x: 200, y: 500 },
+
−
          { x: -500, y: 500 },
+
−
          { x: -500, y: 630 },
+
−
        ],
+
−
      };
+
−
 
+
−
      const flightPath2 = {
+
−
        curviness: 0.2,
+
−
        autoRotate: true,
+
−
        values: [
+
−
          { x: 0, y: 110 },
+
−
          { x: 600, y: 110 },
+
−
          { x: 600, y: 300 },
+
−
          { x: -100, y: 300 },
+
−
          { x: -100, y: 620 },
+
−
        ],
+
−
      };
+
−
 
+
−
      const tween1 = new TimelineLite();
+
−
 
+
−
      tween1.add(
+
−
        TweenLite.to(".paper_1", 5, {
+
−
          bezier: flightPath1,
+
−
          ease: Power1.easeInOut,
+
−
        })
+
−
      );
+
−
 
+
−
      const tween2 = new TimelineLite();
+
−
 
+
−
      tween2.add(
+
−
        TweenLite.to(".paper_2", 20, {
+
−
          bezier: flightPath2,
+
−
          ease: Power1.easeInOut,
+
−
        })
+
−
      );
+
−
 
+
−
      const controller = new ScrollMagic.Controller();
+
−
 
+
−
      const scene1 = new ScrollMagic.Scene({
+
−
        triggerElement: ".animation_1",
+
−
        duration: 1000,
+
−
        triggerHook: 0,
+
−
      })
+
−
        .setTween(tween1)
+
−
        .setPin(".animation_1")
+
−
        .addTo(controller);
+
−
 
+
−
      const scene2 = new ScrollMagic.Scene({
+
−
        triggerElement: ".animation_2",
+
−
        duration: 1000,
+
−
        triggerHook: 0,
+
−
      })
+
−
        .setTween(tween2)
+
−
        .setPin(".animation_2")
+
−
        .addTo(controller);
+
−
    </script>
+
−
  </body>
+
 
</html>
 
</html>

Revision as of 19:43, 11 October 2021

Untitled Document