Difference between revisions of "Team:TecCEM/Carlos"

Line 1: Line 1:
 +
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
−
 
+
  <head>
−
<head>
+
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Document</title>
 
     <title>Document</title>
 +
 
     <style>
 
     <style>
−
         @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
+
      #sideMenu,
 +
      #top_title,
 +
      .patrollink,
 +
      #firstHeading,
 +
      #home_logo,
 +
      #sideMenu {
 +
         display: none;
 +
      }
 +
 
 +
      #content {
 +
        padding: 0px;
 +
        width: 100%;
 +
        margin-top: -7px;
 +
        margin-left: 0px;
 +
        border: none;
 +
      }
 +
 
 +
      #bodyContent h1,
 +
      #bodyContent h2,
 +
      #bodyContent h3,
 +
      #bodyContent h4,
 +
      #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
      }
  
−
        #sideMenu,
+
      #bodyContent a[href ^="https://"],
−
        #top_title,
+
−
        .patrollink,
+
−
        #firstHeading,
+
−
        #home_logo,
+
−
        #sideMenu {
+
−
            display: none;
+
−
        }
+
−
       
+
−
        #content {
+
−
            padding: 0px;
+
−
            width: 100%;
+
−
            margin-top: -7px;
+
−
            margin-left: 0px;
+
−
            border: none;
+
−
        }
+
−
       
+
−
        #bodyContent h1,
+
−
        #bodyContent h2,
+
−
        #bodyContent h3,
+
−
        #bodyContent h4,
+
−
        #bodyContent h5 {
+
−
            margin-bottom: 0px;
+
−
        }
+
−
       
+
−
        #bodyContent a[href ^="https://"],
+
 
         .link-https {
 
         .link-https {
−
            padding-right: 0px;
+
        padding-right: 0px;
−
        }
+
      }
−
       
+
 
−
        * {
+
      * {
−
            box-sizing: border-box;
+
        box-sizing: border-box;
−
            margin: 0;
+
        margin: 0;
−
            padding: 0;
+
        padding: 0;
−
        }
+
      }
−
       
+
 
−
        body,
+
      header,
−
        html {}
+
      footer {
−
       
+
        height: 100vh;
−
        header,
+
        display: flex;
−
        footer {
+
        justify-content: center;
−
            height: 100vh;
+
        align-items: center;
−
            display: flex;
+
      }
−
            justify-content: center;
+
 
−
            align-items: center;
+
      h1 {
−
        }
+
        font-size: 50px;
−
       
+
      }
−
        header h1 {
+
 
−
            font-size: 50px;
+
      header {
−
        }
+
         background: rgb(69, 77, 77);
−
       
+
        background: linear-gradient(
−
         .background {
+
          63deg,
−
            min-height: max-content;
+
          rgba(69, 77, 77, 1) 0%,
−
            background: rgb(79, 71, 218);
+
          rgba(40, 255, 224, 1) 100%
−
            background: linear-gradient( 151deg, rgba(79, 71, 218, 1) 0%, rgba(222, 5, 217, 1) 35%, rgba(151, 205, 240, 1) 100%);
+
        );
−
        }
+
      }
−
       
+
 
−
        .container {
+
      footer {
−
            display: flex;
+
        background: rgb(238, 174, 202);
−
         }
+
        background: radial-gradient(
−
          
+
          circle,
−
         .item {
+
          rgba(238, 174, 202, 1) 0%,
−
            text-align: center;
+
          rgba(148, 187, 233, 1) 100%
−
            width: 50%;
+
        );
−
            height: 30vh;
+
      }
−
            padding-top: 1em;
+
 
−
            padding-bottom: 1em;
+
      .content {
−
         }
+
        background: rgb(63, 94, 251);
−
          
+
        background: radial-gradient(
−
         .animation_1,
+
          circle,
−
         .animation_2 {
+
          rgba(63, 94, 251, 1) 0%,
−
            background-repeat: no-repeat;
+
          rgba(255, 48, 90, 1) 100%
−
            background-position: center;
+
        );
−
            position: relative;
+
      }
−
            overflow: hidden;
+
 
−
        }
+
      .container {
−
          
+
        display: flex;
−
         .drop_1 {
+
         padding-bottom: 70px;
−
            height: 70px;
+
        padding-top: 50px;
−
            position: absolute;
+
      }
−
            top: -70;
+
 
−
            left: 75%;
+
      .item-10 {
−
        }
+
         text-align: center;
−
       
+
         width: 10%;
−
        .drop_2 {
+
        height: 30vh;
−
            height: 70px;
+
        padding-top: 1em;
−
            position: absolute;
+
        padding-bottom: 1em;
−
            top: -70;
+
      }
−
            left: 27%;
+
 
−
         }
+
      .item-20 {
 +
        text-align: center;
 +
        width: 20%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-30 {
 +
        text-align: center;
 +
        width: 30%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-40 {
 +
        text-align: center;
 +
        width: 40%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-50 {
 +
        text-align: center;
 +
        width: 50%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-60 {
 +
         text-align: center;
 +
        width: 60%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-70 {
 +
         text-align: center;
 +
         width: 70%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-80 {
 +
        text-align: center;
 +
        width: 80%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-90 {
 +
        text-align: center;
 +
        width: 90%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .item-100 {
 +
        text-align: center;
 +
        width: 100%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .animation_1 {
 +
         background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .animation_2 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .animation_3 {
 +
         background-repeat: no-repeat;
 +
         background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .drop_1 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 75%;
 +
      }
 +
 
 +
      .drop_2 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 25%;
 +
      }
 +
 
 +
      .drop_3 {
 +
         height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 75%;
 +
      }
 
     </style>
 
     </style>
−
</head>
+
  </head>
  
−
<body>
+
  <body>
−
     <section class="background">
+
     <section class="body">
−
        <header>
+
      <header>
−
            <h1>Header</h1>
+
        <h1>Header</h1>
−
        </header>
+
      </header>
 +
      <section class="content">
 
         <section class="animation_1">
 
         <section class="animation_1">
−
            <img class="drop_1" src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg" alt="img" />
+
          <img
−
            <div class="container">
+
            class="drop_1"
−
                <div class="item">
+
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
−
                    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
+
            alt="img"
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
          />
−
                </div>
+
          <div class="container">
−
                <div class="item"></div>
+
            <div class="item-20">
 +
              <h1>Ícono</h1>
 
             </div>
 
             </div>
−
             <div class="container">
+
             <div class="item-40">
−
                <div class="item"></div>
+
              <h1>Datos</h1>
−
                <div class="item">
+
              <p>
−
                    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
+
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
                Temporibus architecto numquam explicabo minus nemo perspiciatis
−
                 </div>
+
                sint sunt rerum quia voluptatum maiores minima, optio laboriosam
 +
                eligendi voluptas, dolore facilis modi autem tempore est. Dicta,
 +
                officia. Pariatur nostrum minus quae fugiat aliquam, temporibus
 +
                amet atque. Assumenda dolor hic possimus officiis, ut vero,
 +
                cumque nam dolorum, quam perspiciatis est? Sint culpa harum
 +
                inventore aliquid quis qui voluptate voluptas consequatur
 +
                excepturi dolorum neque molestias ab fugiat doloribus,
 +
                distinctio iste animi eligendi. Nostrum corporis saepe quo
 +
                impedit provident consequatur totam fugit nihil minus fugiat,
 +
                 quisquam eum sint ducimus quis, eveniet pariatur mollitia velit
 +
                numquam. Distinctio.
 +
              </p>
 
             </div>
 
             </div>
−
             <div class="container">
+
             <div class="item-50"></div>
−
                <div class="item">
+
          </div>
−
                    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
+
          <div class="container">
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
            <div class="item-50"></div>
−
                </div>
+
            <div class="item-40">
−
                <div class="item"></div>
+
              <h1>Problemática</h1>
 +
              <p>
 +
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam
 +
                laudantium molestias numquam quasi iure necessitatibus tenetur?
 +
                Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias
 +
                deserunt debitis quod aspernatur ullam aut dolores repudiandae
 +
                laudantium ut soluta delectus, suscipit dolore quam? Ut sequi
 +
                perspiciatis dolorum corporis? In architecto tempore asperiores
 +
                id dolorum alias facilis beatae ratione fugit dolor facere non
 +
                eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat
 +
                incidunt, ab nemo modi sapiente? Et, illum!
 +
              </p>
 
             </div>
 
             </div>
 +
            <div class="item-20">
 +
              <h1>Ícono</h1>
 +
            </div>
 +
          </div>
 
         </section>
 
         </section>
 
         <section class="animation_2">
 
         <section class="animation_2">
−
            <img class="drop_2" src="https://static.igem.org/mediawiki/2021/3/36/T--TecCEM--cleanwater.svg" alt="img" />
+
          <img
−
            <div class="container">
+
            class="drop_2"
−
                <div class="item"></div>
+
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
−
                <div class="item">
+
            alt="img"
−
                    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 class="container">
−
                 </div>
+
            <div class="item-50"></div>
 +
            <div class="item-40">
 +
              <h1>Detección</h1>
 +
              <p>
 +
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est
 +
                voluptates eius laborum dolor. Ratione repellendus nobis
 +
                pariatur. Eum suscipit eveniet praesentium dicta optio
 +
                laboriosam minima perferendis natus ipsa placeat voluptatum,
 +
                consequuntur totam. Suscipit itaque, odit possimus aspernatur
 +
                quae ad, dolores officiis reiciendis soluta quod iure,
 +
                asperiores cumque! Repellat soluta corporis laborum unde eos,
 +
                consectetur repudiandae nobis quasi aperiam quo id inventore
 +
                veniam quae in quod natus, amet sed doloremque ex sapiente
 +
                 vitae! Quam, voluptate id.
 +
              </p>
 
             </div>
 
             </div>
−
             <div class="container">
+
             <div class="item-20">
−
                <div class="item">
+
              <h1>Ícono</h1>
−
                    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>
−
            <div class="container">
+
          </div>
−
                <div class="item"></div>
+
          <div class="container">
−
                <div class="item">
+
            <div class="item-20">
−
                    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
+
              <h1>Ícono</h1>
−
                    pariatur aut impedit rem placeat iste. In, culpa!
+
−
                </div>
+
 
             </div>
 
             </div>
 +
            <div class="item-40">
 +
              <h1>Remoción</h1>
 +
              <p>
 +
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 +
                Temporibus architecto numquam explicabo minus nemo perspiciatis
 +
                sint sunt rerum quia voluptatum maiores minima, optio laboriosam
 +
                eligendi voluptas, dolore facilis modi autem tempore est. Dicta,
 +
                officia. Pariatur nostrum minus quae fugiat aliquam, temporibus
 +
                amet atque. Assumenda dolor hic possimus officiis, ut vero,
 +
                cumque nam dolorum, quam perspiciatis est? Sint culpa harum
 +
                inventore aliquid quis qui voluptate voluptas consequatur
 +
                excepturi dolorum neque molestias ab fugiat doloribus,
 +
                distinctio iste animi eligendi. Nostrum corporis saepe quo
 +
                impedit provident consequatur totam fugit nihil minus fugiat,
 +
                quisquam eum sint ducimus quis, eveniet pariatur mollitia velit
 +
                numquam. Distinctio.
 +
              </p>
 +
            </div>
 +
            <div class="item-50"></div>
 +
          </div>
 
         </section>
 
         </section>
−
         <footer>
+
         <section class="animation_3">
−
             <h1>Footer</h1>
+
          <img
−
         </footer>
+
             class="drop_3"
 +
            src="https://static.igem.org/mediawiki/2021/3/36/T--TecCEM--cleanwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-20">
 +
              <h1>Ícono</h1>
 +
            </div>
 +
            <div class="item-40">
 +
              <h1>Resultados</h1>
 +
              <p>
 +
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 +
                Temporibus architecto numquam explicabo minus nemo perspiciatis
 +
                sint sunt rerum quia voluptatum maiores minima, optio laboriosam
 +
                eligendi voluptas, dolore facilis modi autem tempore est. Dicta,
 +
                officia. Pariatur nostrum minus quae fugiat aliquam, temporibus
 +
                amet atque. Assumenda dolor hic possimus officiis, ut vero,
 +
                cumque nam dolorum, quam perspiciatis est? Sint culpa harum
 +
                inventore aliquid quis qui voluptate voluptas consequatur
 +
                excepturi dolorum neque molestias ab fugiat doloribus,
 +
                distinctio iste animi eligendi. Nostrum corporis saepe quo
 +
                impedit provident consequatur totam fugit nihil minus fugiat,
 +
                quisquam eum sint ducimus quis, eveniet pariatur mollitia velit
 +
                numquam. Distinctio.
 +
              </p>
 +
            </div>
 +
            <div class="item-50"></div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-50"></div>
 +
            <div class="item-40">
 +
              <h1>Impacto</h1>
 +
              <p>
 +
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam
 +
                laudantium molestias numquam quasi iure necessitatibus tenetur?
 +
                Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias
 +
                deserunt debitis quod aspernatur ullam aut dolores repudiandae
 +
                laudantium ut soluta delectus, suscipit dolore quam? Ut sequi
 +
                perspiciatis dolorum corporis? In architecto tempore asperiores
 +
                id dolorum alias facilis beatae ratione fugit dolor facere non
 +
                eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat
 +
                incidunt, ab nemo modi sapiente? Et, illum!
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <h1>Ícono</h1>
 +
            </div>
 +
          </div>
 +
         </section>
 +
      </section>
 +
      <footer>
 +
        <h1>Footer</h1>
 +
      </footer>
 +
    </section>
  
−
        <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
−
        <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>
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
−
        <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>
+
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js" integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg==" crossorigin="anonymous"></script>
+
      crossorigin="anonymous"
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js" integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew==" crossorigin="anonymous"></script>
+
    ></script>
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q==" crossorigin="anonymous"></script>
+
    <script
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js" integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ==" crossorigin="anonymous"></script>
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
−
        <script>
+
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
−
            const flightPath1 = {
+
      crossorigin="anonymous"
−
                curviness: 0.2,
+
    ></script>
−
                autoRotate: false,
+
    <script
−
                values: [{
+
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
−
                    x: 0,
+
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
−
                    y: 150,
+
      crossorigin="anonymous"
−
                }, {
+
    ></script>
−
                    x: -600,
+
    <script
−
                    y: 200,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
−
                }, {
+
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
−
                    x: -600,
+
      crossorigin="anonymous"
−
                    y: 400,
+
    ></script>
−
                }, {
+
    <script
−
                    x: 200,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
−
                    y: 400,
+
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
−
                }, {
+
      crossorigin="anonymous"
−
                    x: 200,
+
    ></script>
−
                    y: 650,
+
    <script
−
                }, {
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
−
                    x: -500,
+
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
−
                    y: 650,
+
      crossorigin="anonymous"
−
                }, {
+
    ></script>
−
                    x: -500,
+
    <script
−
                    y: window.innerHeight,
+
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
−
                }, ],
+
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
−
            };
+
      crossorigin="anonymous"
 +
    ></script>
 +
    <script>
 +
      const dropPath1 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 260,
 +
          },
 +
          {
 +
            x: -800,
 +
            y: 260,
 +
          },
 +
          {
 +
            x: -800,
 +
            y: 800,
 +
          },
 +
          {
 +
            x: 200,
 +
            y: window.innerHeight,
 +
          },
 +
        ],
 +
      };
  
−
            const flightPath2 = {
+
      const dropPath2 = {
−
                curviness: 0.2,
+
        curviness: 0.2,
−
                autoRotate: false,
+
        autoRotate: false,
−
                values: [{
+
        values: [
−
                    x: 0,
+
          {
−
                    y: 200,
+
            x: 0,
−
                }, {
+
            y: 200,
−
                    x: 600,
+
          },
−
                    y: 200,
+
          {
−
                }, {
+
            x: 700,
−
                    x: 600,
+
            y: 200,
−
                    y: 420,
+
          },
−
                }, {
+
          {
−
                    x: -100,
+
            x: 700,
−
                    y: 420,
+
            y: window.innerHeight,
−
                }, {
+
          },
−
                    x: -100,
+
        ],
−
                    y: window.innerHeight,
+
      };
−
                }, ],
+
−
            };
+
  
−
            const tween1 = new TimelineLite();
+
      const dropPath3 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 260,
 +
          },
 +
          {
 +
            x: -800,
 +
            y: 260,
 +
          },
 +
          {
 +
            x: -800,
 +
            y: 400,
 +
          },
 +
        ],
 +
      };
  
−
            tween1.add(
+
      const tween1 = new TimelineLite();
−
                TweenLite.to(".drop_1", 5, {
+
−
                    bezier: flightPath1,
+
−
                    ease: Power1.easeInOut,
+
−
                })
+
−
            );
+
  
−
            const tween2 = new TimelineLite();
+
      tween1.add(
 +
        TweenLite.to(".drop_1", 5, {
 +
          bezier: dropPath1,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
            tween2.add(
+
      const tween2 = new TimelineLite();
−
                TweenLite.to(".drop_2", 5, {
+
−
                    bezier: flightPath2,
+
−
                    ease: Power1.easeInOut,
+
−
                })
+
−
            );
+
  
−
            const controller = new ScrollMagic.Controller();
+
      tween2.add(
 +
        TweenLite.to(".drop_2", 5, {
 +
          bezier: dropPath2,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
            const scene1 = new ScrollMagic.Scene({
+
      const tween3 = new TimelineLite();
−
                    triggerElement: ".animation_1",
+
−
                    duration: 1000,
+
−
                    triggerHook: 0,
+
−
                })
+
−
                .setTween(tween1)
+
−
                .setPin(".animation_1")
+
−
                .addTo(controller);
+
  
−
            const scene2 = new ScrollMagic.Scene({
+
      tween3.add(
−
                    triggerElement: ".animation_2",
+
        TweenLite.to(".drop_3", 5, {
−
                    duration: 1000,
+
          bezier: dropPath3,
−
                    triggerHook: 0,
+
          ease: Power1.easeInOut,
−
                })
+
        })
−
                .setTween(tween2)
+
      );
−
                .setPin(".animation_2")
+
 
−
                .addTo(controller);
+
      const controller = new ScrollMagic.Controller();
−
         </script>
+
 
−
    </section>
+
      const scene1 = new ScrollMagic.Scene({
−
</body>
+
        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);
  
 +
      const scene3 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween3)
 +
        .setPin(".animation_3")
 +
        .addTo(controller);
 +
    </script>
 +
  </body>
 
</html>
 
</html>

Revision as of 22:49, 12 October 2021

<!DOCTYPE html> Document

Header

img

Ícono

Datos

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.

Problemática

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam laudantium molestias numquam quasi iure necessitatibus tenetur? Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias deserunt debitis quod aspernatur ullam aut dolores repudiandae laudantium ut soluta delectus, suscipit dolore quam? Ut sequi perspiciatis dolorum corporis? In architecto tempore asperiores id dolorum alias facilis beatae ratione fugit dolor facere non eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat incidunt, ab nemo modi sapiente? Et, illum!

Ícono

img

Detección

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est voluptates eius laborum dolor. Ratione repellendus nobis pariatur. Eum suscipit eveniet praesentium dicta optio laboriosam minima perferendis natus ipsa placeat voluptatum, consequuntur totam. Suscipit itaque, odit possimus aspernatur quae ad, dolores officiis reiciendis soluta quod iure, asperiores cumque! Repellat soluta corporis laborum unde eos, consectetur repudiandae nobis quasi aperiam quo id inventore veniam quae in quod natus, amet sed doloremque ex sapiente vitae! Quam, voluptate id.

Ícono

Ícono

Remoción

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.

img

Ícono

Resultados

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus architecto numquam explicabo minus nemo perspiciatis sint sunt rerum quia voluptatum maiores minima, optio laboriosam eligendi voluptas, dolore facilis modi autem tempore est. Dicta, officia. Pariatur nostrum minus quae fugiat aliquam, temporibus amet atque. Assumenda dolor hic possimus officiis, ut vero, cumque nam dolorum, quam perspiciatis est? Sint culpa harum inventore aliquid quis qui voluptate voluptas consequatur excepturi dolorum neque molestias ab fugiat doloribus, distinctio iste animi eligendi. Nostrum corporis saepe quo impedit provident consequatur totam fugit nihil minus fugiat, quisquam eum sint ducimus quis, eveniet pariatur mollitia velit numquam. Distinctio.

Impacto

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam laudantium molestias numquam quasi iure necessitatibus tenetur? Sequi voluptatum nobis, quae obcaecati, eaque ducimus molestias deserunt debitis quod aspernatur ullam aut dolores repudiandae laudantium ut soluta delectus, suscipit dolore quam? Ut sequi perspiciatis dolorum corporis? In architecto tempore asperiores id dolorum alias facilis beatae ratione fugit dolor facere non eaque fuga ipsam nihil ducimus cum, a rem? Alias fugiat incidunt, ab nemo modi sapiente? Et, illum!

Ícono

Footer