221121 full_pageanimate.html

Skills/JavaScript
221121 full_pageanimate.html

개발자 윤구나 2022. 11. 21. 11:17
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>full_pageanimate</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="./js/jquery.mousewheel.min.js"></script>
    <script>
      $(function () {
        $("section").mousewheel(function (e, delta) {
          if (delta > 0) {
            let prev = $(this).prev().offset().top;
            $("html, body").stop().animate({ scrollTop: prev }, 1000);
          } else if (delta < 0) {
            let next = $(this).next().offset().top;
            $("html, body").stop().animate({ scrollTop: next }, 1000);
          }
        });

        $(window).scroll(function () {
          if ($(this).scrollTop() == $(".page02").offset().top) {
            $(".page02-1").fadeIn(500);
            $(".page02-2").delay(500).fadeIn(500);
            $(".page02-3").delay(1000).fadeIn(500);
          } else {
            $(".page02 .sub_box div").fadeOut();
          }

          if ($(this).scrollTop() == $(".page03").offset().top) {
            $(".page03-1").animate({ top: 0 }, 500);
            $(".page03-2").delay(500).animate({ top: 0 }, 500);
            $(".page03-3").delay(1000).animate({ top: 0 }, 500);
          }
        });
      });
    </script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /*-------- layout --------*/
      .wrap section {
        width: 100%;
        height: 100vh;
        border: 1px solid black;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .wrap section .sub_box {
        width: 940px;
        height: 300px;
        border: 1px solid black;
        overflow: hidden;
      }

      .wrap .page02 .sub_box div {
        width: 300px;
        height: 300px;
        background-color: #ccc;
        float: left;
      }

      .wrap .page02 .sub_box div:nth-child(2) {
        margin: 0 20px;
      }

      .wrap .page03 .sub_box div {
        width: 300px;
        height: 300px;
        background-color: #ccc;
      }

      /*-------- animation --------*/
      .wrap .page01 .sub_box {
        background-color: #ccc;
        text-align: center;
        line-height: 300px;
        opacity: 1;
        animation: intro;
        animation-duration: 3s;
      }

      @keyframes intro {
        0% {
          opacity: 0;
        }
        10% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .wrap .page02 .sub_box div {
        display: none;
      }

      .wrap .page03 .sub_box {
        position: relative;
      }

      .wrap .page03 .sub_box div {
        position: absolute;
        top: 300px;
      }

      .wrap .page03 .sub_box .page03-1 {
        left: 0;
      }
      .wrap .page03 .sub_box .page03-2 {
        left: 320px;
      }
      .wrap .page03 .sub_box .page03-3 {
        left: 640px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <section class="page01 intro">
        <div class="sub_box">
          <h1>Intro</h1>
        </div>
      </section>
      <section class="page02">
        <div class="sub_box">
          <div class="page02-1">page02-1</div>
          <!--경력사항-->
          <div class="page02-2">page02-2</div>
          <!--학력-->
          <div class="page02-3">page02-3</div>
          <!--스킬-->
        </div>
      </section>
      <section class="page03">
        <div class="sub_box">
          <div class="page03-1">page03-1</div>
          <div class="page03-2">page03-2</div>
          <div class="page03-3">page03-3</div>
        </div>
      </section>
    </div>
  </body>
</html>