[💻] 실습 - barcelona (gsap)

📖 Overview

사이트명: barcelona
작업 기간: 3일 소요
라이브러리: swiper, jQuery, gsap
유형: PC 적응형, 클론 코딩
참여도: 100%

👀 Check-point

• 화살표에 따른 좌표 구하기
• 스크롤이벤트 scrollTrigger에 대한 이해
• root 변수에 대한 응용

---

📌 root

전역 CSS 변수 선언을 함으로써 아주 유용하게 사용할 수 있다!!
sass처럼 변수를 써주는거다.

:root{
    --font-en1:'hatton',Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --font-en2:'Montserrat',Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --color-green:#81d8d0;
}

• 공통으로 들어갈 폰트와 색을 넣어준다.
  ->--color-green:#81d8d0; 여기서 green은 내가 정한 변수
  => --변수-명: 값;
  css에서 적용 시 => :var(--해당변수명-)

• font family로 폰트들을 다 설정해놓은 다음 변수 지정해주는것

.sc-visual .txt-title{
    font-family: var(--font-en1);
}

• 이런식으로 내가 쓰려는 클래스에 var를 써서 폰트를 불러오면 된다.
  -> 위에 설정해놓은 값처럼 폰트가 지정됨

• 이미 변수로 값을 설정해두었기에 상단에서 값을 한 번에 제어가 가능하다.
• 후에 값을 선택자마다 하나씩 바꾸지 않고 변수 값에서의 스타일만 수정하면 아주 간편하게 유지보수가 가능하다!

📌 기본 폰트

sans-serif → 고딕체 / serif→ 명조체

📌 swiper-slide-active

✏ 이미지 자연스럽게 확대되면서 넘어가기

swiper에 특정 이벤트를 넣어주고 싶다면 swiper-slide-active에 css 넣어주기

.sc-visual img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    transform: scale(1.2);
    transition: transform 5s linear; //linear - 일정하게
}
.sc-visual .swiper-slide-active img{
    transform: scale(1);
}

• 항상 transition 뒤에는 누가한테 효과를 줄건지 써둘것, 안그러면 다른애들까지 효과가 다 적용된다.

✏ swiper시 글자가 밑에서 위로 올라오기

<h3 class="txt-box">
    <span class="txt-title"><b>we are different</b></span>
    <span class="txt-info"><b>get to know us</b></span>
</h3>

글자가 슬라이드시 밑에서 올라와야하니 b태그로 감싸준다
(꾸며주기 위한것 의미없음)

⭐ transform은 display가 없으면 사용할수가 없음

그렇기 때문에 부모(txt-title)에도 display, 주려는 자신(b)에도 display를 줘야한다.

$(window).scroll(function(){
        curr = $(this).scrollTop();
        visualHeight = $('.sc-visual').outerHeight();
        // scvisual = $('.sc-visual').outerHeight();
        if (curr > visualHeight) {
            $('.header').addClass('active');
        } else {
            $('.header').removeClass('active');
        }
});

✍ 오류사항

글씨가 잘릴때는??

✍ 해결사항

1. padding을 준다.
2. line-height를 늘려준다.

✏ 헤더 active, 특정 지역에서 수행하기

$(window).scroll(function(){
        curr = $(this).scrollTop();
        scvisual = $('.sc-visual').outerHeight(); -> 비주얼영역 높이
	// visualHeight = $('.sc-visual').outerHeight();
        if (curr > scvisual) {
            $('.header').addClass('active');
        } else {
            $('.header').removeClass('active');
        }
    });

◼ 2가지 방법이 있다

1. 기준잡기
2. 헤더의 높이만큼을 계산하기

🤔 curr, scvisual등등 왜 변수로 써주는거에요??
→ 재활용 하려고!!

📌 Swiper터치 이벤트

Swiper API
Swiper API에서 터치 검색 touch-end

touchstart → 손가락 닿을 때 발생

touchmove → 손가락이 닿은 채 움직일 때 발생

touchend → 손가락을 뗄 때 발생

featuredSlide.on('touchStart',function(){
        $('.sc-featured .mid-slide').addClass('grab')
        console.log(1);
      })
featuredSlide.on('touchEnd',function(){
        $('.sc-featured .mid-slide').removeClass('grab')
        console.log(2);
      })

.sc-featured .mid-slide.grab .img-box{
    transform: scale(0.95);
}
.sc-featured .mid-slide.grab img{
    transform: scale(1.2);
}

• featureSlide는 내가 지정했던 변수(Swiper)이름임

• 터치 될때 grab클래스 추가해라, 손을 땔떼 grab클래스를 빼라

• 잡히는게 더 극적으로 보이게하기 위해 이미지감싸고있는 박스에 작아지는 스케일줌

📌 다른영역 클릭시 닫기

$('header').click(function(e){
        if( !$('.header .util-area .link-wrap').has(e.target).length )
          $('.header .util-area .link-wrap').removeClass('open');
    });

header안에는 body나 wrap등 내가 클릭하려는 요소의 외의 요소를 넣어준다.

📌 메뉴클릭시 하나씩 나타나기

.header .menu-area .menu-body .menu-item{
    width: 30%;
    transform: translateY(20%);
    transition:  transform 1.2s, opacity 1.2s;
    opacity: 0;
}

이벤트를 주려는 클래스에 속도와 투명도를 주고

.header .menu-area.active .menu-body .menu-item:nth-child(1){
        transition-delay: 0.3s;
}
.header .menu-area.active .menu-body .menu-item:nth-child(2){
        transition-delay: 0.4s;
}
.header .menu-area.active .menu-body .menu-item:nth-child(3){
        transition-delay: 0.5s;
}
.header .menu-area.active .menu-body .menu-item:nth-child(4){
        transition-delay: 0.6s;
}
.header .menu-area.active .menu-body .menu-item:nth-child(5){
        transition-delay: 0.7s;
}
.header .menu-area.active .menu-body .menu-item:nth-child(6){
        transition-delay: 0.8s;
}

제이쿼리를 실행했을때 하나하나에 delay를 준다.

➕

nth-child로 했을시 새로운 영역이 추가됐을때 css에서 계속 추가해줘야하는 번거로움이 있다.

const menu = gsap.from('.menu-area .menu-item',{
        // delay:1,
        opacity:0,
        yPercent:20,
        stagger:0.1, //시간차
        paused:true, //정지 (미리실행되면 안되니까_)
    })

gsap.from으로 이벤트가 실행되기 전을 셋팅해준다.
만들어준 제이쿼리에 재생할때마다 실행되게하기

$('.header .util-area .btn-menu').click(function(e){
        e.preventDefault();

        menu.restart()

        $('.menu-area').addClass('active');
        $('body').addClass('active');        
    });

지정한 변수menu를 누를때마다 실행하게 하기
-> menu.restart()

🤔 왜 gsap를 변수 const로 줬나요??

변수로 지정하지 않으면 새로고침했을때 바로 실행된다.

📌 scroll-down 클릭시 해당영역으로 내려가기

$('.sc-visual .scroll-down').click(function(){
        target = $('.sc-featured').offset().top+1
$('html,body').animate({scrollTop:target},300)
    })

$('html,body').animate({scrollTop:target},300) 

$('여길기준으로').animate({scrollTop:이위치로},300) 0.3초동안 스르르ㅡ이동

📌 스크롤바 변경

body::-webkit-scrollbar {
    width: 7px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: rgba(31, 31, 31, 0.5); /* 스크롤바의 색상 */    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: transparent;
    opacity: 1;  /*스크롤바 뒷 배경 색상*/
}

📌 html 특수문자

‹ ‹ 왼쪽 홑꺽쇠표
› › 오른쪽 홑꺽쇠표

📌 Gsap

✏ 마우스를 따라다니는애, 좌표구하기

이벤트를 먼저 구해야한다.
좌표먼저 구하기

1. 문서의 시작지점부터 끝까지 좌표
2. 보고있는 현재화면의 좌표
3. 영역에서의 좌표

마우스를 따라다니는애를 구하려면 2. 보고있는 현재화면의 좌표가 필요하다

자식요소까지 인식하는가 차이
mouseover, mouseout는 자식 요소에 접근해도 동작을 하지만,

mouseenter, mouseleave는 자식 요소에는 동작하지 않는다.

mousemove : 마우스를 움직일 때 발생

mouseover : 마우스를 요소 안에 들어올 때 발생

mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생

현재화면의 x의 좌표,y의 좌표값

xVal = e.clientX;
yVal = e.clientY;

$('body').mousemove(function(e){
        xVal = e.clientX;
        yVal = e.clientY;
        // console.log(xVal+'//'+yVal);
		gsap.to('.cursor',{
            x:xVal,
            y:yVal
  })

생긴 포인터때문에 뒤에 내용이 선택이 안될 수 있다.

pointer-events: none; //css에 작성

pointer-event를 써서 뒤에가 선택되게한다. 마치 포인터가 뒤로 뚫린느낌!!

mouseover : 마우스를 요소 안에 들어올 때 발생

$('a').mouseover(function(){
        if($(this).data('name')){
            val = $(this).data('name');
        }else{
            val=''
        }
	/*$(this).data('name')?val=$(this).data('name'):val='';*/ //줄여쓰기
        gsap.to('.cursor',{
            scale:1.8,
            opacity:0.7
        })
})

mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생

$('a').mouseleave(function(){
        $('.cursor').text('');
        gsap.to('.cursor',{
            scale:1,
            opacity:1
        })
})

✏ mouseover시 글자 나타나기

if($(this).data('name')){
            val = $(this).data('name');
        }else{
            val=''
        }

       //줄여쓰기 $(this).data('name')?val=$(this).data('name'):val='';
       //줄여쓰기 
        val = $(this).data('name')?$(this).data('name'):'';
       //줄여쓰기 =>$('.cursor').html(`<span>${val}</span>`);
       
       // if ($(this).parents('.sc-featured').length) {
        //     // $('.cursor').text('featured');
        //     $('.cursor').html('<span>featured</span>');
        // }else if ($(this).parents('.recom-artist-area').length) {
        //     $('.cursor').html('<span>추가</span>');
        // }

<br>

✏ 스크롤이벤트

gsap.to('.recom-artist-area .img-box',{
        // y:-180 픽셀
        scrollTrigger:{
            trigger:".recom-artist-area", //총구,기준태그 recom-artist-area의 시작과 끝
            start:"top 80%", //(트리거기준, 윈도우기준) 둘이 만나야 실행
            end: "bottom top", //(트리거기준, 윈도우기준) 둘이 만나야 실행
            markers:true, //좌표표시
            scrub:1, //이게 있어야 여러번 사용가능, 없으면 1회성
        }, //컴마 필수

        yPercent:-10 //퍼센테이지, 움직이는 애가 -10%까지 가라
    })

start:"top 80%" → 윈도우기준이 100% 혹은 그냥 bottom이였다면 흐르는게 잘 안보임으로 80%정도가 적당하다.

✏ 스크롤시 텍스트 움직이기 (gsap)

scrollTrigger을 이용하여 간편하게 흐를수있게 만들어줌

gsap.to('.txt-area',{

        scrollTrigger:{
            trigger:".txt-area", //기준태그 recom-artist-area의 시작과 끝
            start:"top 100%", //(트리거기준, 윈도우) 둘이 만나야 실행
            end: "bottom top", //(트리거기준, 윈도우) 둘이 만나야 실행
            // markers:true, //좌표표시
            scrub:1, //이게 있어야 여러번 사용가능, 없으면 1회성
        }, //컴마 필수

        xPercent:-50 //움직이는 애가 -100프로까지 가라
      })

📌 동영상 iframe

.contract-box 클릭시 동영상 링크인 iframe으로 이동하기

$('.contract-box').click(function(){
        iframe = `<iframe width="560" height="315" src="https://www.youtube.com/embed/omuSTuF-fxk?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
        $(this).html(iframe)
      })

✏ iframe 추출법

퍼가기에서 코드추출

---

오답✍(◔◡◔)✧

1.

swiper에서 btn-nav는 클래스 공통으로 주면된다.
괜히 btn-nav1,2,3쓰지 않기

<div class="img-box"><img src="./asset/imges/contents/biglarge_Tiger_Gaulino_469c752944.jpg" alt=""></div>
<div class="txt-box">
  <strong class="txt-subtitle">art editions</strong>
  <h3 class="txt-title">tiger art gaulino</h3>
  <span class="txt-madeby">oscar tusquets</span>
</div>

.recom-artist-area .txt-box{
    padding: 20% 0;
    text-align: center;
    color: #fff;
}

• 이미지로 높이잡기
  →❌ 좋지않음

이미지가 없으면 높이가 사라지게 된다.
->공존하는 것은 좋지 않다.❌

이미지말고 text한테 패딩을 줘서 크게 영역을 잡아준다. → 더 편해짐

💬
gsap는 해도해도 어렵다...
스스로 예제 만들어서 여러번 반복해보자