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>
+
<!DOCTYPE html>
 +
<html lang="en">
 +
 
 
<head>
 
<head>
−
<meta charset="utf-8">
+
    <meta charset="UTF-8" />
−
<title>Untitled Document</title>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <title>Document</title>
 +
    <style>
 +
        #sideMenu,
 +
        #top_title,
 +
        .patrollink,
 +
        #firstHeading,
 +
        #home_logo,
 +
        #sideMenu {
 +
            display: none;
 +
        }
 +
       
 +
        #content {
 +
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: -7px;
 +
            margin-left: 0px;
 +
            border: none;
 +
        }
 +
       
 +
        body,
 +
        html {
 +
            background-color: white;
 +
            width: 100%vw;
 +
            height: 100%;
 +
        }
 +
       
 +
        #bodyContent h1,
 +
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
 +
       
 +
        #bodyContent a[href ^="https://"],
 +
        .link-https {
 +
            padding-right: 0px;
 +
        }
 +
       
 +
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
        }
 +
       
 +
        * {
 +
            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>
 
</head>
 +
 +
<body>
 +
    <header>
 +
        <h1>Header</h1>
 +
    </header>
 +
    <section class="animation_1">
 +
        <img class="paper_1" src="./paper.png" alt="img" />
 +
        <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="./paper.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", 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({
 +
                triggerElement: ".animation_2",
 +
                duration: 1000,
 +
                triggerHook: 0,
 +
            })
 +
            .setTween(tween2)
 +
            .setPin(".animation_2")
 +
            .addTo(controller);
 +
    </script>
 +
</body>
 +
 
</html>
 
</html>

Revision as of 19:48, 11 October 2021

<!DOCTYPE html> Document

Header

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!
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!
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!
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!
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!
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!

Footer