안녕하세요~! 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초)로 이동하게 합니다.
꼭 완성하시길 , 화이팅입니다.^^
Json 플러그인 사용시 variable collection 없음
0
12
1
배리어블 목록 없음
0
22
3
Token 등록 방법 문의
0
18
1
6-6 실습 문의
0
23
2
섹션5 노션링크 는 따로 없나요?
0
29
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
32
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
27
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
24
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
54
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
최근 코테, 과제 테스트 트렌드
0
67
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
39
2
Gemini로 진행가능 여부 궁금합니다.
0
58
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
26
2
프롬프트 11 진행 완료
0
45
2
파트3 수급 부분
0
43
2
claude cowork에서 작업하는거와 차이는?
0
40
2
background vs background-color
0
26
1
figma variable 반응형 디자인 결과물 공란
0
63
2
동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요
1
163
2
css background-image 적용이 안 돼요
1
514
1
max-width:1199px 강의 앞부분이 궁금합니다.
2
440
1