Aesop 반응형 리뉴얼사이트 코딩
1. 체크포인트
1. 반응형 미디어쿼리
1-1) 미디어쿼리 적용법
2. gsap 플러그인
2-1) gsap 사용법
2-2) gsap 적용
3. 그외 레이아웃 및 자바스크립트
3-1) btn-menu
3-2) 자동 롤링
1-1. 미디어쿼리 적용법
- css 미디어 쿼리 기본 문법
@media (조건) { 스타일 }조건 -> max-width,min-width 조건을 주어 해당 영역에 스타일을 적용하는 것.
모바일 first -> min-width 주로 사용
pc first -> max-width 주로 사용
- scss 미디어쿼리 적용법
_mixins.scss폴더에 mediapoint를 변수로 할당하고, 미디어쿼리 기본 문법을 작성해준 뒤, 다른 scss폴더에서 적은 스타일이 적용되도록 @content를 같이 적어준다.$laptop:1265px; $tablet:768px; $moblie:767px; @mixin mobile { @media (max-width:$moblie){ @content; } } @mixin tablet { @media (min-width:$tablet) and (max-width:$laptop){ @content; } }그리고 스타일을 적용할 scss폴더에 @include로 저장해둔 mixin을 호출하여 반응형시 나타낼 스타일을 적용해주면 된다.
2-1. gsap 사용법
- 사용 전 셋팅
GSAP CDN 복사해서 태그 안에 붙여넣고 jQuery CDN 있어야 작동한다.<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
gsap의 기본메서드
- gsap.to -> 타겟의 끝점으로 애니메이션 실행
- gsap.from -> 타겟의 시작점에서 애니메이션 실행
- gsap.fromTo -> ~부터 ~로 애니메이션 실행
gsap.to(".content", {rotation: 27, x: 500, duration: 2});=> .content라는 객체를 rotate 27deg, x축으로 500px,실행시간은 2초동안 애니메이션 진행
gsap.timeline
gsap를 한꺼번에 묶어 순차적으로 실행하는 메서드
이때 addLabel메서드도 함께 추가하여 사용하면 gsap를 그룹으로 묶을 수 있다.const loadAni = gsap.timeline({}) loadAni.addLabel('a') loadAni.to('.load',{height:0,delay:0.7},'a') .to('.load .load-logo',{yPercent:-100,delay:0.3},'a')
scrollTrigger
scrollTrigger:{ trigger:"기준이될태그", start:"top top", //[기준태그의시작지점, 윈도우기준 시작지점] top->0% bottom->100% 20%,30% 다됨 end:"bottom top" markers:true, //표시자 scrub:1 // 뭉대는 효과 }
사용방법1
ScrollTrigger.create 강제 스크롤이벤트 생성후에 모션 입혀주기askBg = gsap.from('.sc-ask .bg',10,{ scale:1.2, }) ScrollTrigger.create({ trigger:".sc-ask", start:"top 90%", end:"bottom top", markers:true, animation:askBg })
사용방법2
toggleClass: "active"→ 트리거기준한테 클레스준다
toggleClass: {targets: ".reserve-form", className: "active"}타겟까지 정해서ScrollTrigger.create({ trigger:".sc-ask", start:"top 90%", end:"bottom top", markers:true, toggleClass: "active" // toggleClass: {targets: ".reserve-form", className: "active"} })
사용방법3
gsap.from('.video-area',{ scrollTrigger:{ trigger:'.sc-brand-story', start:"0% 60%",//트리거기준 0%위치, 윈도우기준0% end:"70% 80%", toggleActions:"play pause resume reset" }, x:-1000 })
(1)onEnter(2)onLeave(3)onEnterBack(4)onLeaveBack
- 내트리거(start)에 윈도우(start) 트리거가 도달했을때
- 내트리거(end)에 윈도우(end) 트리거가 도달했을때
- 윈도우(end) 가 다시도달
- 윈도우(start) 가 다시도달
toggleActions:"(1)play (2)pause (3)resume (4)reset"
사용키워드
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none"
scrollTrigger.metchMedia 미디어쿼리 적용
ScrollTrigger.matchMedia({ // large "(min-width: 1025px)": function() { }, // medium "(min-width: 768px) and (max-width: 1024px)": function() { }, // small "(max-width: 767px)": function() { }, // all "all": function() { } });
2-2. gsap 적용
// 1. gsap load화면, 제목,버튼,svg // gsap 스크롤트리거 img,text영역
const loadAni = gsap.timeline({})
loadAni.addLabel('a')
loadAni.to('.load',{height:0,delay:0.7},'a')
.to('.load .load-logo',{yPercent:-100,delay:0.3},'a')
.addLabel('b')
.from('.sc-home .thumb-area figure',{scale:1.2},'b-=0.4')
.from('.sc-home .text',{yPercent:100,stagger:0.1},'b-=0.4')
.to('.sc-home .link-btn',{duration:0.7,opacity:1},'b-=0.4')
.from('.sc-home .home-logo-area .char',{opacity:0,stagger:0.2,duration:0.9,yPercent:103},'b-=0.4')
const introAni = gsap.timeline({
scrollTrigger:{
trigger:".sc-home",
start:"top top",
end:"bottom top",
//markers:true,
scrub:1
}
})
introAni.addLabel('c')
introAni.to('.group-flex1',{yPercent:20},'c')
.to('.sc-home .thumb-area',{yPercent:-10},'c') // 2. 모든 이미지 페럴렉스 통합판 - each문 활용
ScrollTrigger.matchMedia({
// large
"(min-width: 768px)": function() {
$('[data-parallex]').each(function(i,el){
parent = $(this).parent()//thumb-box 변수
gsap.to(el,{
scrollTrigger:{
trigger:parent,
start:"top bottom",
end:"bottom top",
//markers:true,
scrub:5,
duration:3
},
yPercent:10
})
})
}
});3-1. btn-menu 클릭이벤트
// 9. btn-menu 클릭시 gnb-area등장
$('.btn-menu').click(function(){
if ($(this).hasClass('active')) {
$(this).removeClass('active')
$('.gnb-area').removeClass('active')
$('.link-order').animate({opacity:1})
} else {
$(this).addClass('active')
$('.gnb-area').addClass('active')
$('.link-order').animate({opacity:0})
}
})3-2. 자동 롤링
- 자동 롤링 함수 선언 및 호출
- 자동 롤링 초기 셋팅 선언 및 호출
- 클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행
- 자동 롤링 함수 선언 및 호출
giftRolling = function(){ gift_Rolling = setInterval(function(){ //자동롤링 함수 선언 bar = $('.gift-item').eq(num).find('.guage')// 게이지바 선언 $('.gift-item').eq(num).addClass('active').siblings().removeClass('active')// addclass guageBar = gsap.to(bar,5,{ width:"100%", ease:"none", onComplete:function(){ gsap.set('.guage',{width:"0%"}) } // 애니메이션 실행 후 진행되는 메서드 })// 게이지바 애니메이션 설정 num === 3 ? num = 0 : num++// 조건문 num이 3이되면 0대입, 아니면 증감 },5000) } giftRolling(); // 이때 자동롤링은 5초뒤에 실행되므로 초기 세팅 함수 선언
- 자동 롤링 초기 셋팅 선언 및 호출
let num = 0; giftRollingInit = function(){ $('.gift-item').eq(num).addClass('active') // 첫번째에 active 추가 gsap.to('.first-bar',5,{ width:"100%", ease:"none", onComplete:function(){ gsap.set('.guage',{width:'0%'}) } }) num = 1; // 다음 li의 index } giftRollingInit();
- 클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행
// 4. sc-gift li클릭 이벤트 - 클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행 $('.sc-gift .info-box').click(function(e){ e.preventDefault(); idx = $(this).parents('.gift-item').index();// gift-item index값 선언 $('.sc-gift .thumb-box').removeClass('active') $(this).siblings('.thumb-box').addClass('active')// active 시 scale 작동 clearInterval(gift_Rolling); guageBar.kill(); gsap.set('.guage',{width:"0%"}) num = idx bar = $('.gift-item').eq(num).find('.guage')// 게이지바 선언 guageBar = gsap.to(bar,5,{ width:"100%", ease:"none", onComplete:function(){ gsap.set('.guage',{width:"0%"}) } // 애니메이션 실행 후 진행되는 메서드 })// 게이지바 애니메이션 설정 $('.gift-item').eq(num).addClass('active').siblings().removeClass('active') num++; giftRolling(); })
퍼블리싱 코딩기록