안녕하세요~! max-width 899px2 강의 문의 드립니다!
mobile menu layout 에서요 햄버거 버튼을 누르면 메뉴들이 뜨고 그 메뉴를 눌렀을 때 그 화면으로 가고 창이 닫히게 하고 싶은데 어떻게 하면 될까요..??ㅜㅜ script 독학중이라 많이 어렵네용,,
回答 1
2
강의에서 스크립트를 포함하고 있지 않지만, 일단 javascript로 진행하실거면.
html에서는
각 섹션마다 id="s0" ,s1,s2..이런식의 이름을 넣어주고,
html에 필요 plugin 리소스를 넣어줍니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
scirpt에서는
const NAV_LIST = document.querySelectorAll('.nav li');
let section = document.querySelectorAll('section');
NAV_LIST.forEach(function (btn, index) {
btn.addEventListener('click', function () {
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#s' + index
}
})
})
})
요런식으로 작성하시면 될 거 같습니다. ^^ 버튼을 클릭하면 현재 내가 누른 버튼의 순서값을 index로 받고 내가 클릭한 버튼은 btn 매개변수로 받아냅니다. gsap scrollTo를 이용해 각 색션 이름에 id의 순번에 index를 대입해 duration:1(1초)로 이동하게 합니다.
꼭 완성하시길 , 화이팅입니다.^^
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
23
2
1강 동영상 재생 오류
1
57
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
27
1
Composition단계에서 `Layer`는 누가 만드는지
0
33
1
Strict Mode 예시 질문!
0
55
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
50
2
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
78
4
설명이 잘못된거같습니다.
1
68
2
31강 학습자료에 프롬프트가 엉뚱한것이 있어요
1
59
1
bitnami 설치
0
37
0
강의 소스 코드는 어디서 볼수 있나여?
1
61
1
자료집 관련
0
59
2
13. (App 2) 기본기 훈련 에서
0
88
1
17강 강의에 목데이터 첨부파일이 없습니다.
2
79
2
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
57
1
11차시 Antigravity IDE 설치 후
1
64
1
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
75
1
5,6,7,8 내용이 없어요
0
61
1
푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?
0
62
1
장치 의존성과 CSR
0
82
1
순수 함수 / 순수 컴포넌트
0
56
1
동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요
1
206
2
css background-image 적용이 안 돼요
1
560
1
max-width:1199px 강의 앞부분이 궁금합니다.
2
475
1