Difference between revisions of "Team:TecCEM"
| Line 1: | Line 1: | ||
| − | + | <html lang="en"> | |
| − | + | <head> | |
| − | <html> | + | <meta charset="UTF-8" /> |
| − | <head> | + | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| − | <meta charset=" | + | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| − | < | + | <title>Document</title> |
| − | </ | + | |
| − | < | + | <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; | ||
| + | } | ||
| − | + | #bodyContent a[href ^="https://"], | |
| − | + | .link-https { | |
| + | padding-right: 0px; | ||
| + | } | ||
| − | + | * { | |
| − | + | box-sizing: border-box; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | } | |
| − | + | ||
| − | + | header, | |
| + | footer { | ||
| + | height: 100vh; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | } | ||
| − | + | h1 { | |
| + | font-size: 50px; | ||
| + | } | ||
| − | + | header { | |
| − | + | background: rgb(69, 77, 77); | |
| − | + | background: linear-gradient( | |
| − | + | 63deg, | |
| − | + | rgba(69, 77, 77, 1) 0%, | |
| − | + | rgba(40, 255, 224, 1) 100% | |
| − | + | ); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | footer { | |
| − | + | background: rgb(238, 174, 202); | |
| − | + | background: radial-gradient( | |
| − | + | circle, | |
| − | + | rgba(238, 174, 202, 1) 0%, | |
| − | + | rgba(148, 187, 233, 1) 100% | |
| − | + | ); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .content { | |
| − | + | background: rgb(63, 94, 251); | |
| − | + | background: radial-gradient( | |
| − | + | circle, | |
| + | rgba(63, 94, 251, 1) 0%, | ||
| + | rgba(255, 48, 90, 1) 100% | ||
| + | ); | ||
| + | } | ||
| − | + | .container { | |
| + | display: flex; | ||
| + | padding-bottom: 70px; | ||
| + | padding-top: 50px; | ||
| + | } | ||
| + | .item-10 { | ||
| + | text-align: center; | ||
| + | width: 10%; | ||
| + | height: 30vh; | ||
| + | padding-top: 1em; | ||
| + | padding-bottom: 1em; | ||
| + | } | ||
| − | + | .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: 23%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </script> | + | .drop_3 { |
| − | + | height: 150px; | |
| + | position: absolute; | ||
| + | top: 30px; | ||
| + | left: 73%; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <section class="body"> | ||
| + | <header> | ||
| + | <h1>Header</h1> | ||
| + | </header> | ||
| + | <section class="content"> | ||
| + | <section class="animation_1"> | ||
| + | <img | ||
| + | class="drop_1" | ||
| + | src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg" | ||
| + | alt="img" | ||
| + | /> | ||
| + | <div class="container"> | ||
| + | <div class="item-20"> | ||
| + | <h1>Ícono</h1> | ||
| + | </br> | ||
| + | </div> | ||
| + | <div class="item-40"> | ||
| + | <h1>Datos</h1> | ||
| + | </br> | ||
| + | <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>Problemática</h1> | ||
| + | </br> | ||
| + | <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> | ||
| + | </br> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| + | <section class="animation_2"> | ||
| + | <img | ||
| + | class="drop_2" | ||
| + | src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg" | ||
| + | alt="img" | ||
| + | /> | ||
| + | <div class="container"> | ||
| + | <div class="item-50"></div> | ||
| + | <div class="item-40"> | ||
| + | <h1>Detección</h1> | ||
| + | </br> | ||
| + | <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 class="item-20"> | ||
| + | <h1>Ícono</h1> | ||
| + | </br> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container"> | ||
| + | <div class="item-20"> | ||
| + | <h1>Ícono</h1> | ||
| + | </br> | ||
| + | </div> | ||
| + | <div class="item-40"> | ||
| + | <h1>Remoción</h1> | ||
| + | </br> | ||
| + | <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 class="animation_3"> | ||
| + | <img | ||
| + | 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> | ||
| + | </br> | ||
| + | </div> | ||
| + | <div class="item-40"> | ||
| + | <h1>Resultados</h1> | ||
| + | </br> | ||
| + | <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> | ||
| + | </br> | ||
| + | <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> | ||
| + | </br> | ||
| + | </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 | ||
| + | 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 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 dropPath2 = { | ||
| + | curviness: 0.2, | ||
| + | autoRotate: false, | ||
| + | values: [ | ||
| + | { | ||
| + | x: 0, | ||
| + | y: 220, | ||
| + | }, | ||
| + | { | ||
| + | x: 700, | ||
| + | y: 220, | ||
| + | }, | ||
| + | { | ||
| + | x: 700, | ||
| + | y: window.innerHeight, | ||
| + | }, | ||
| + | ], | ||
| + | }; | ||
| + | |||
| + | const dropPath3 = { | ||
| + | curviness: 0.2, | ||
| + | autoRotate: false, | ||
| + | values: [ | ||
| + | { | ||
| + | x: 0, | ||
| + | y: 260, | ||
| + | }, | ||
| + | { | ||
| + | x: -800, | ||
| + | y: 260, | ||
| + | }, | ||
| + | { | ||
| + | x: -800, | ||
| + | y: 400, | ||
| + | }, | ||
| + | ], | ||
| + | }; | ||
| + | |||
| + | const tween1 = new TimelineLite(); | ||
| + | |||
| + | tween1.add( | ||
| + | TweenLite.to(".drop_1", 5, { | ||
| + | bezier: dropPath1, | ||
| + | ease: Power1.easeInOut, | ||
| + | }) | ||
| + | ); | ||
| + | |||
| + | const tween2 = new TimelineLite(); | ||
| + | |||
| + | tween2.add( | ||
| + | TweenLite.to(".drop_2", 5, { | ||
| + | bezier: dropPath2, | ||
| + | ease: Power1.easeInOut, | ||
| + | }) | ||
| + | ); | ||
| + | |||
| + | const tween3 = new TimelineLite(); | ||
| + | |||
| + | tween3.add( | ||
| + | TweenLite.to(".drop_3", 5, { | ||
| + | bezier: dropPath3, | ||
| + | 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); | ||
| + | |||
| + | 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 02:03, 15 October 2021
Header
Í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
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.
Í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!