ilva

BYEOLYI SHIN·2023년 7월 5일

Aria-hidden GSAP ScrollTrigger Viewport clientX mouseover offsetX pageX screenX vw

Portfolio

목록 보기

4/6

-사이트명 : ilva
-사용언어 : html , css
-분류 : 적응형pc,

🔋 Main Point

1. viewport

메인 비주얼에 나오는 큰 글씨는 vh로 설정하면 화면이 줄어들때마다 일정한 비율로 주시될수 있다
다른 영역에는 픽셀크기가 일정한게 좋기때문에 메인비주얼에 주로 사용한다

http://publishing.kr/vw/ (px -> vh 계산기)

2. 폰트 올라오는 효과

1.title 내에 span태그를 만들어 
문장을 3줄로 나열해준다 .

<h2 class="title">
    <span class="parent"><span>NATURE,</span></span>
    <span class="parent"><span>HARNESSED BY</span></span>
    <span class="parent"><span>HAND.</span></span>
<h2>

2.css .title에  
display: flex;
flex-direction: column;
적용시켜준 뒤 .parent 오버플로우 히든 적용 ! 

.sc-visual .title{
    display: flex;
    flex-direction: column;
    font-size: 8.8542vw;
    color: #fff;
    text-align: center;
    z-index: 1;
    padding: 0 90px;
}
.sc-visual .title .parent{overflow: hidden;}

3.gsap사용 ---> 이미지 참조

3. gsap

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger 참조하여 스크립트 추가

gsap.from:전의 수치 -> y축으로 100만큼 내려가있는 상태 ->올라갈예정
gsap.to:후의 수치 -> y축으로 100만큼 내려갈 예정
(상황에 맞에 to/from 구분해서 사용하면 된다 )
stagger:문장나열을 순차적으로 움직이는 효과

3-1) gsap set

스크롤 할 때 아래에서 위로 띄워올라오는 형태인데,
처음 화면에선 이미지가 보여선 안된다
💡 gsap.set사용 !

4. 스크롤실행시 visual이미지 파묻히는효과

스크롤 실행시 비주얼이미지가 점점 내려가야 파묻히는 효과가 나타나는데 왜 내려가지? 
밑에 화면이 올라가는거 아닌가?하며 이해하기까지 한참 걸렸다 


 그래서 방법은
 .
 .
 .
 
 1.sc-intro부분에 pozition-relative 줄 것 
 (안주면 gsap효과 후 아래로 가려져버림)
 
 2. sc-visual에 y축 50%프로 가 내려오면 일정하게 파고들도록 설정 
 gsap.to('.sc-visual',{
    scrollTrigger:{
        trigger:".sc-visual", //기준점:".sc-visual"
        start:"0% 0%", //앞자리 % :트리거기준 시작지점 , 
                       //뒷자리 % : 윈도우 화면기준시작지점 -> 두 지점이 만나면 실행
        end:"100% 0%",//앞자리100%: 끝지점.
        scrub:0,//영역 전체가 내려갈때 딜레이 되는 수치 
    },
    yPercent:50,
    ease:'none',//일정하게 
})

(표시자 설정시 markers:true,)

방아쇠 역할을 할 기준점을 sc-visual영역으로 잡고
start 뒷자리 퍼센트만큼 스크롤될때 트리거가 실행된다
ex: 20% 화면 내려왔을때부터 파묻히기 시작

4-1.ease

ease:'none'일정하게 표현할때 사용,
transition:ease 를 css에서 사용할 때 선의 굴곡을 조절하여 효과의 강세를 수정 할 수있다. (아직 ease 효과 나오는 홈페이지를 못봄..)

5. clip-path:inset (호버 + 인셋)

clip-path: inset(10px round 10px 10px 10px 10px)
화면에 마우스를 갖다대면 클리핑마스크를 씌운것처럼 지정한 테두리까지만 표현이 된다

.sc-prd .img{
    transition: 0.3s;
    clip-path: inset(0px round 0px 0px 0px 0px)
}
.sc-prd .img:hover{
     
    text-align: center;
    border-radius: 20px;
    transition: 0.3s;
    clip-path: inset(10px round 10px 10px 10px 10px)
}

(의문:원래 img에 직접설정하지않고 씌워놓은 a태그에 호버를 걸어야하는데
 거기에 걸면 이미지 사라짐.. why,,?)

6.마우스오버

마우스오버를 하기 위해선 좌표를 잡아야한다 따라서
좌표에대해 먼저 공부...

1. clientX, clientY 
(💡💡💡어디서 확인하든 브라우저 화면기준이기때문에 
ex: 
왼쪽상단은 0,0     오른쪽 상단은 0,1920 
왼쪽하단은 0,800  오른쪽하단은 1920,800 )


위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 
여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다.

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

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

2. offsetX, offsetY (💡💡💡 내가 설정한 태그 내에서 기준!!!!!!)
위 메서드는 이벤트 대상이 기준이 됩니다. 
( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 
화면의 기준이 아닙니다)

전체 문서를 기준으로 합니다(스크롤 화면 포함)

offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다.

offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다.

3. pageX, pageY
(💡💡💡문서 전체 기준이기 때문에 긴 화면 한개 속에서 좌표를 측정한다 !! )
위 메서드는 전체 문서를 기준으로 x,y 좌표를 반환 합니다. 스크롤 화면을 포함해서 측정합니다.

pageX : 브라우저 페이지에서의 x좌표 위치를 반환합니다.

pageY : 브라우저 페이지에서의 Y좌표 위치를 반환합니다.

4. screenX, screenY
위 메서드는 모니터 화면을 기준으로 좌표를 제공합니다. 여기서 중요한 점은 브라우저 화면이 아니라 
자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점입니다.

screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환합니다.

screenY :전체 모니터 스크린에서의 y좌표 위치를 반환합니다.

 

아직 헷갈리신다면 한번 더 정리하겠습니다.

offset 메서드는 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력합니다. 이와 비슷한 메서드로 
layer가 있습니다. 이 메서드는 현재 파이어폭스에서만 사용합니다.

screen 메서드는 화면 출력 크기(자신의 모니터)가 기준인 절대 좌표입니다.
브라우저를 움직여도 값은 같습니다.

client 메서드는 브라우저가 기준인 좌표입니다. 현재 보이는 브라우저 화면 상에서 
어느 지점에 위치하는 지를 의미하기 때문에 스크롤 해도 값은 변하지 않습니다.

page 메서드는 문서가 기준입니다. client와 비슷하지만 이 메서드는 문서 전체 크기가 기준이라 
스크롤 시 값이 바뀝니다. (스크롤을 포함해서 측정합니다)

출처
http://megaton111.cafe24.com/
2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-
%EC%B0%A8%EC%9D%B4%EC%A0%90/ 참조..

이해가 됐다면 다시 본론으로 돌아가
지정한 화면 안에서 마우스오버가 되어야 하기 때문에 client를 활용한다 !

내가만들어야 하는건
마우스를 따라다니는 이미지 , 그 안에 글자

1. 
span으로 이미지박스와 글자태그를 만들어준 뒤 
visibility: hidden;
opacity: 0; 처리 

why?-> 처음엔 안보여야 함으로 히든처리 한 후 클래스.on이 들어갔을때 
visibility: hidden;
opacity: visible 처리해줄것 

2.
.sc-prd .prd-img{
    visibility: hidden;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;
    width: 400px;height: 400px;
   
    margin-left: -200px;
    margin-top: -200px;

    
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 2;
}
.sc-prd .circle{
    visibility: hidden;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;
    /* background: #403a3a; */
    background: #f00;
    width: 20px;height: 20px;
    border-radius: 50%;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 2;
}

pointer-events: none; 
호버가 될때 따라다니며 이미지가 방해해서 깜빡거림->막아주기 위해 none처리

3.좌표를 알아놔야 따라다니지요.. 
 $(document).mousemove(function(e){
            xVal = e.clientX;
            yVal = e.clientY;

          gsap.to('.sc-prd .prd-img',1,{
                x: xVal,
                y: yVal
          })
          gsap.to('.sc-prd .circle',2,{
                x: xVal,
                y: yVal
          })

        })
        
  4.
   $('.sc-prd .img-box').hover(function(){
        $('.sc-prd .prd-img, .sc-prd .circle').addClass('on')
    },function(){
        $('.sc-prd .prd-img, .sc-prd .circle').removeClass('on')
    })