랜딩페이지

사이트 명 : 포트폴리오용 페이지
사용 기술 : HTML, SCSS, JQUERY(GSAP)

---

POINT

• 마우스 애니메이션
• SCSS 사용

---

SCSS 구조

이런 식으로 SCSS 구조를 잡았고 마지막의 style 부분에서 전부 import 해서 컴파일을 한 뒤 style.css를 내보낸다.

---

BEM 사용

<section class="intro" id="sc1">
      <div class="sticky">
        <div class="intro__bg">
        </div>
        
        <div class="intro__header">
        </div>

        <span class="intro__scroll">
        </span>

        <div class="intro__logo">
        </div>
      </div>
</section>

이런 식으로 BEM 사용하여 SCSS의 부모참조자를 사용하여 좀 더 쉽게 스타일링을 하였다.

.intro {
  height: 250vh;
  position: relative;
  background-color: $color-black;

  @include tablet {
    height: 100vh;
  }

  .sticky {
    padding: 30px;
  }

  &__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

---

프로젝트

먼저 보여주고 싶은 프로젝트 들을

이런 식으로 애니메이션을 넣어 좀 더 강조해서 보여지게 만들었다.

---

마우스 애니메이션

해당 요소의 마우스를 올리면 보여지게 하고 Y값으로 움직이는 애니메이션을 만들었다.

$(".works .works__item a").mousemove(function (e) {
    y = e.offsetY;
    gsap.to(".works .works__info", { y: y });
  });

  $(".works .works__item a").each(function (_, el) {
    $(el).hover(
      function () {
        gsap.to($(el).find(".works__info"), { opacity: 1 });
      },
      function () {
        gsap.to($(el).find(".works__info"), { opacity: 0 });
      }
    );
  });

offsetY 값을 사용한 이유는 works__item이란 요소 안에서만 움직일수 있게 타겟 요소의 y값을 가지고 왔다.

반복문을 사용해서 각각에 요소에 hover 애니메이션을 넣어주었다. function두 개 써주면 되는데 첫 번째는 마우스를 올렸을 때 실행 시키고, 두 번째는 마우스가 떠났을때 실행시켜준다.

---