코나아이-피드백

김진우·2024년 3월 8일
퍼블리싱
0

퍼블리싱

목록 보기
10/10

root

  • gnb nav 해보기, 메뉴 내 슬라이드 transition 해보기
  • 헤더 뒷부분 다시 들어보기

gsap

  • http://gsap.com/ 에서 get GSAP -> cdn -> scrollTrigger 같이 가져오기
  • to : ~로 보내다
    ex) .image-2를 x축으로 200 보내고, .image-3를 x축으로400보낸다 라는 뜻.
    이때, 200, 400은 px을 의미함
    px 대신 %도 적용 가능
gsap.to('.image-2',{
	x:200        
})
gsap.to('.image-3',{
	x:400        
})
gsap.to('.image-2',{
	xPercent:200        
})
gsap.to('.image-3',{
	xPercent:400        
})
  • from : ~ 로 시작할때 사용 ??
    ex) opacity 0 으로 시작해서 '.sc-intro .desc .line'에 도달했을때 opacity 1 로 바뀌게함.
textMotion1.from('.sc-intro .desc .line',{opacity:0}
  • stagger : 하나씩 순차적으로 효과 적용되게 할 때 사용
    ex) .sc-intro .desc .line의 각각 줄들이 0.1초 간격으로 효과적용되어서 나타나게됨
textMotion1.from('.sc-intro .desc .line',{opacity:0, stagger:0.1}

** 이떄 묶여있는 항목 말고 다른항목도 같이 껴서 stagger 적용시키고싶으면, 아래와 같이, data를 사용해서 data로 묶어주면됨
ex) 아래와 같이 data-motion="text"로 묶은 뒤, jQuery로 묶은걸 선택하면됨

<span class="line" data-motion="text">1</span>
<span class="line" data-motion="text">2</span>
<span class="line" data-motion="text">2</span>
<a href="" data-motion="text">회사 소개 바로가기</a>
                                
textMotion1.from('.sc-intro [data-motion="text"],{opacity:0, stagger:0.1})
  • timeline : 시간순서대로 실행되는것
    ex) timeline을 circleMotion이라는 변수에 담아두고 아래와 같이 실행시,
    .image-2를 x축으로 200 보내고, .image-3를 x축으로400보내는게 순서대로 실행됨. 아래 ex2)와 같이, 'a'로 묶게되면 한번에 다같이 실행됨.
ex1)
circleMotion = gsap.timeline({})
circleMotion.to('.image-2',{
	x:200        
})
circleMotion.to('.image-3',{
	x:400        
})


ex2)
circleMotion = gsap.timeline({})
circleMotion.to('.image-2',{
	x:200        
},'a')
circleMotion.to('.image-3',{
	x:400)
},'a')
  • scorollTriger : 시작지점 설정하기
    - trigger : 시작되는 지점 선택자로 선택
    • start : 시작지점
      ex) start: "0% 50%" -> 앞의 0%는 위 trigger에서 선택한 선택자를 기준으로 0%위치하는곳 / 뒤의 50%는 윈도우 전체 기준으로 위에서 50% 위치하는곳
    • end : 끝지점
      ex) end : "100% 50%" -> 앞의 0%는 위 trigger에서 선택한 선택자를 기준으로 0%위치하는곳 / 뒤의 50%는 윈도우 전체 기준으로 위에서 50% 위치하는곳
    • markers : 표시자
    • toggleClass:"active" : 토글기능을 적용시켜 트리거에 걸렸을때, 기능작동 / 벗어나면 기능작동x되게 하는 명령어
    • onEnter:function(){} : 도달했을때 ~~기능실행하는 명령어
    • onLeave:function(){} : 떠났을때 ~~기능실행하는 명령어
    • onEnterBack:function(){} : 떠났다가 다시 돌아왔을때 ~~기능실행하는 명령어
    • onLeaveBack:function(){} : 도달했다가 다시 올라갈때 ~~기능 실행하는 명령어
    • scrollTrigger.create : 그냥 스크롤트리거만 생성할 때 사용.
    • toggleActions:"x1 x2 x3 x4" :
      - x1 : 도달 했을때
      - x2 : 떠났을 때,
      - x3 : 떠났다가 다시 돌아왔을 때,
      - x4 : 도달 했다가 다시 올라갈 때,
      ex) 
scrollTrigger:{
	toggleActions:"play none none reverse";
  (해당지점에 도달했을때 실행되고, 떠났을때/떠났다가 다시돌아왔을때 아무거도 실행안되고, 도달했다가 다시 올라갈때 실행하기 전으로 되돌리라는 뜻.)
};


적용시킨 예시 1

.sc-history의 image를 선택했고,그 이미지기준 0%지점에서 시작점, 100%지점에서 끝점 을 하나의 기준으로 잡고 / window기준 50%기준 시작점, 50%기준 끝점 을 다른 기준으로 해서 작동시키고, 마커를 표시한다는 뜻

scrollTrigger: {
	trigger:".sc-history .image",
    start:"0% 50%",
    end:"100% 50%",
   	markers:true,
}


적용시킨 예시 2

.sc-history의 image를 선택했고,그 이미지기준 0%지점에서 시작점, 100%지점에서 끝점 을 하나의 기준으로 잡고 / window기준 50%기준 시작점, 50%기준 끝점 을 다른 기준으로 해서 작동시키고, 마커를 표시하고,
마우스가 도달했을때, '.sc-history .image'에 'active'클래스를 추가하고, 도달했다가 다시 올라갈때, '.sc-history .image'에 'active'클래스를 제거한다.
떠나거나, 떠났다가 다시돌아온건 function에 아무거도 없으니 아무작동안함.

ScrollTrigger.create({
	trigger:".sc-history .image",
  	start:"0% 50%",
  	end:"100% 50%".
  	markers:true,
  	onEnter:function(){
  		$('.sc-history .image').addClass('active');
	},
    onLeave:function(){},
    onEnterBack:function(){},
    onLeaveBack:function(){
  		$('.sc-history .image').removeClass('active');
	},
})

1:27:46 그림,텍스트바뀌는곳

main

질문리스트

1:28:51 ~ 1:45:00

  • 이미지, 글자 first / top 바뀌는곳 아예 통쨰로 이해안됨

  • sticky 높이차지 이해안됨

  • 1:30:05 여기서부터 고정이 되어있었으면 좋겠어요가 무슨말인지 뭘하려는지 의도조차파악불가 밑에있는애가 깔려서나온다..? 무슨말인지 무슨목적인지 용도가뭔지 아예파악불가

  • 1:30:30 밑에도 고정시키고싶다? 가 무슨말인지 모르겠음. 수정전 / 수정후 화면에서 차이를 못느끼겠음

  • margin-top:-100vh / margin-bottom:-100vh 써서 달라진게뭔지 뭐가 고정되는건지 파악불가

  • 오다가 밑에서고정되고싶다? 가 무슨말인지 파악불가

  • position:relative; 왜주는건지

  • z-index 왜주는건지?

  • 부모요소에 position:relative가 있어야, 자식이 position:sticky를 쓸수있는건지?

  • 2:02:10에서 align-items: flex-start;를 준 이유가뭔지? 위치가 바뀐건 없어보이는데

profile
김진우
Code log

0개의 댓글