개인 포트폴리오 사이트 코딩

오혜림·2022년 9월 23일

CSS GSAP J-QUERY html js scss

1. 체크포인트

1. 애니메이션 이슈

1-1) mouse cursor event
1-2) background color change

2. 그 외 css 이슈

2-1) css transform3d
2-2) project section

1-1. mouse cursor event

마우스 커서 디자인 이벤트

html : 마우스 커서에 해당하는 html 태그를 작성

<div class="cursor">
     <span>View more</span>
</div>

css : 마우스 디자인을 해주고, 호버시 디자인과 이미지 호버시 디자인까지 같이 작성해주었다

.cursor {
    position: fixed;  -> absolute로 하면 스크롤 내릴때 안따라옴!! 무조건 fixed!
    top: 0;
    left: 0;
    z-index: 10000;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    span {
        @include position-Center;
        display: none;
        white-space: nowrap;
        font-family: $font-en4;
    }
    &.cursor-over {
        width: 10px;
        height: 10px;
    }
    &.img-over {
        width: 120px;
        height: 120px;
        mix-blend-mode:normal;
        span {
            display: inline-block;
            color: #000;
        }
    }
}

css 결과

j-query

$(window).mousemove(function(e){
  e.preventDefault();
  gsap.to('.cursor',{
     x:e.clientX,
     y:e.clientY,
     duration:.2,
   })
 })
// 윈도우 창에서 마우스가 움직일때의 이벤트 mousemove 이벤트와, 
클라이언트 영역(현재 보이는 브라우저 화면 기준) 내의 가로,세로 좌표를 제공해줌.

- clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.
- clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.

        
        
$('[data-hover]').hover(function(){
  $('.cursor').addClass('cursor-over')
  $(this).addClass('active')
},function(){
  $('.cursor').removeClass('cursor-over')
  $(this).removeClass('active')
})

// hover가 되는 a태그 및 기타 태그에 data속성을 추가 해준 뒤, 
해당 영역에 hover를 하면, hover디자인 클래스와 css커서 기능을 none처리 시키는 클래스 추가 

$('[data-img]').hover(function(){
  $('.cursor').addClass('img-over')
  $(this).addClass('active')
},function(){
  $('.cursor').removeClass('img-over')
  $(this).removeClass('active')
})

// 이미지 hover가 되는 a태그에 data속성을 추가 해준 뒤,
해당 영역에 hover를 하면, 이미지 hover디자인 클래스와 css커서 기능을 none처리 시키는 클래스 추가 

단 이 호버 이벤트는 pc에서만 나타내고 싶었기때문에 커서 디자인은 1023px부터 미디어쿼리를 통해 display:none; 처리 하였고 css cursor:none은 cursor:default로 다시 커서가 나올 수 있게 구현하였다.

  $('[data-hover]').hover(function(){ 
    $(this).removeClass('active')
  })
  $('[data-img]').hover(function(){ 
    $(this).removeClass('active')
  })

해당 영역에 호버시 커서를 따라 움직이게 하는 이벤트

$(".sc-contact .sub-tit").mousemove(function(e){
  var x = ((-$(this).width() / 2) + e.offsetX) *0.3;      
  // -(sub-tit width / 2) + sub-tit offsetX값 * 0.3
  
  var y = ((-$(this).height() / 2) + e.offsetY) *0.3;     
  // -(sub-tit width / 2) + sub-tit offsetY값 * 0.3
  
  gsap.to(".sc-contact .link-mail", {
     transform: "translate(" + x + "px," + y + "px)"
    })
 })
 $(".sc-contact .sub-tit").mouseout(function(e){
  gsap.to(".sc-contact .link-mail", {
    transform: "translate(0,0)"
   })
 })
 
 // hover를 하려는 태그의 부모태그 기준으로 마우스를 움직였을 때 
 부모요소의 가로값의 반 + 부모요소의 offsetX,Y의 값 * 0.3을 곱한 값을 변수로 지정하고 hover하려는 태그의 transform에 대입해준다.

offsetX : 화면 기준이 아닌,이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다.
offsetY : 화면 기준이 아닌,이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다.

1-2. background color change

스크롤시 원하는 해당영역에서 백그라운드 컬러를 바꿔주는 효과를 구현

html : 백그라운드 영역 만들어주고, 색을 바꾸고 싶은 영역에 data속성 추가

 <div class="background"></div>

css : 백그라운드 디자인,.white 클래스와 .black 클래스 추가

.background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: #000;
    transition: background 1s;
    &.white {
        background-color: #fff;
    }
    &.black {
        background-color: #000;
    }
}

j-query : data 속성을 추가한 영역을 each문을 통해 scroll Trigger를 걸어준다

$('[data-color]').each(function(i,el){ 
  color = ($(this).data('color') == '#fff') ? 'white' : 'black' 
  
  // 만약 data-color = "#fff" 면 "white" 아니면 "black" -> 클래스명 변수
  
  gsap.to('.background',{
    scrollTrigger:{
       trigger:el,
       start:"top 40%",
       end:"bottom top",
       scrub:1,
       toggleClass: {targets: ".background", className: color}
     }
   })
 })

2-1. css transform3d

CSS 3D transform 은 평면에서의 여러 개 CSS 속성을 조합하고 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함하고 원근감, 관찰자의 위치을 부여해 3D 공간을 만들어 낼 수 있다.
3D transform 은 크게 트랜스폼을 적용할 요소에 적용하는 속성과 자식 요소를 3D로 처리하기 위해 부모 요소에 설정하기 위한 속성이 있다.

트랜스폼을 적용할 요소에 적용하는 속성

transform-origin : 회전을 시킬 축을 결정, 기본값은 transform-origin:50% 50%;
backface-visibility : 입체적인 뒷면의 가시성을 결정하는 속성이며 변형이 가해져 요소의 뒷면을 숨기거나 보여지게 할 수 있다.
rotateX(),rotateY(),rotateZ()=rotate(),rotate3d(x,y,z)
translateX(),translateY(),translateZ=translate(),translate3d(x,y,z)
scaleX(),scaleY(),scaleZ()=scale(),scale3d(x,y,z)
skewX(),skew()Y,skew()
perspective : 원근,소실점,투시도법 가까운 사물은 커보이고 멀리있는 사물은 작아보이는 것

자식 요소를 3d 처리하기 위한 부모 요소에 설정하기 위한 속성

perspective : 원근,소실점,투시도법
perspective-origin : 원근법에 대한 기준점을 설정
transform-style: perserve-3d; : 요소의 자식이 3d 공간에 배치됨

트랜스폼 3d 개념 및 예제 1
트랜스폼 3d 개념 및 예제 2
트랜스폼 제너레이터

2-2. project section

html

css: .project-wrap의 부모요소인 .project-area에 position:relative를 주고, .project-wrap에 position:sticky를 줌

.project-area {
   position: relative;
   color: #000;
}
.project-wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
}

여기서 position:sticky 속성은 부모요소나 조상요소에 overflow:hidden; 속성이 들어오면 제대로 작동하지 않기때문에, 만약 가로 스크롤이 발생하게 되면, 가로스크롤에 영향이 생기는 부분을 컨트롤해야한다!

비슷한 효과를 주는 다른 방법 : gsap 플러그인 활용

 gsap.utils.toArray(".panel").forEach((panel, i) => {
 
   ScrollTrigger.create({
       trigger: panel,
       start: "top top", 
       end: "bottom top", 
       pin: true, 
       pinSpacing: false 
    });
  });
              
              
  ScrollTrigger.create({
    snap: 1 / 4 // snap whole page to the closest section!
 });

오혜림

퍼블리싱 코딩기록

이전 포스트