Difference between revisions of "Team:TecCEM/Carlos"

Line 6: Line 6:
 
     <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>
 
−
        @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;
 
−
        }
 
−
       
 
−
        body,
 
−
        html {
 
−
            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;
 
−
            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%);
 
−
        }
 
−
       
 
−
        .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>
 
</head>
  
−
<body style="
+
<style>
−
      background: rgb(79, 71, 218);
+
    #sideMenu,
−
      background: linear-gradient(
+
    #top_title,
−
        151deg,
+
    .patrollink,
−
        rgba(79, 71, 218, 1) 0%,
+
    #firstHeading,
−
        rgba(222, 5, 217, 1) 35%,
+
    #home_logo,
−
        rgba(151, 205, 240, 1) 100%
+
     #sideMenu {
−
      );
+
         display: none;
−
     ">
+
     }
−
    <header>
+
      
−
         <h1>Header</h1>
+
    #content {
−
     </header>
+
         padding: 0px;
−
     <section class="animation_1">
+
         width: 100%;
−
        <img class="paper_1" src="./paper.png" alt="img" />
+
         margin-top: -7px;
−
         <div class="container">
+
         margin-left: 0px;
−
            <div class="item">
+
         border: none;
−
                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>
+
     #bodyContent h1,
−
            <div class="item"></div>
+
    #bodyContent h2,
−
         </div>
+
    #bodyContent h3,
−
         <div class="container">
+
    #bodyContent h4,
−
            <div class="item"></div>
+
     #bodyContent h5 {
−
            <div class="item">
+
         margin-bottom: 0px;
−
                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>
+
     #bodyContent a[href ^="https://"],
−
         </div>
+
     .link-https {
−
         <div class="container">
+
         padding-right: 0px;
−
            <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>
+
        box-sizing: border-box;
−
            <div class="item"></div>
+
         margin: 0;
−
        </div>
+
        padding: 0;
−
     </section>
+
    }
−
     <section class="animation_2">
+
   
−
        <img class="paper_2" src="./paper.png" alt="img" />
+
    .animation_1 {
−
        <div class="container">
+
        height: 100%;
−
            <div class="item"></div>
+
        width: 100%;
−
            <div class="item">
+
        background: rgb(79, 71, 218);
−
                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
+
         background: linear-gradient( 151deg, rgba(79, 71, 218, 1) 0%, rgba(222, 5, 217, 1) 35%, rgba(151, 205, 240, 1) 100%);
−
                pariatur aut impedit rem placeat iste. In, culpa!
+
    }
−
            </div>
+
</style>
−
        </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", 5, {
+
−
                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({
+
<body>
−
                triggerElement: ".animation_2",
+
    <section class="animation_1"></section>
−
                duration: 1000,
+
−
                triggerHook: 0,
+
−
            })
+
−
            .setTween(tween2)
+
−
            .setPin(".animation_2")
+
−
            .addTo(controller);
+
−
    </script>
+
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 20:27, 11 October 2021

Document