JavaScript 입문과 웹 UI개발(17)- 스크롤 이벤트로 만드는 재밌는 기능들
2022. 10. 7. 08:16ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body style="overflow: none;">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">JSShop</span>
<span class="ms-auto mx-3 badge bg-dark">Dark </span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<button id="login">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<div class="slide-containver">
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png">
</div>
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png">
</div>
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png">
</div>
</div>
<button class="pre-slide">이전</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="after-slide">다음</button><br>
<div id="now"></div>
<!-- 스크롤 박스 -->
<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem.
</div>
<div id="read"></div>
<!-- 스크롤바를 생성하기 위한것 -->
<div style="height: 1000px;"></div>
<script>
// document는 window 안에 있다. window를 이용해서 scroll 이벤트를 처리한다
window.addEventListener('scroll',function(){
// 제이쿼리로 쓰면
//$(window).on('scroll', function(){
// console.log($(window).scrollTop()) //얼마나 스크롤 햇는지 알려줌 ,window.scrollY와 같음
//})
//console.log(window.scrollY); //얼마나 스크롤바를 내렸는지 알려준다, window.pageYOffset으로도 사용가능
//얼마나 스크롤바를 옆으로 넘겼는지는 window.scrollX로 알 수 있다.
//window.scrollTo(0,100);//x좌표와 y좌표를 입력하여 스크롤의 위치를 조정할 수 있다(위에서부터 100px 위치로감)
//부트스트랩 때문에 스크롤이 부드럽게 이동하는데 이것을 원래대로 되돌리려면 css파일에
// :root{ scroll-behavior:auto;}
//window.scrollBy(0,100); //현재로부터 상대위치를 100px 내려간 위치로 이동
});
//처음에 페이지 업로드 되었을때 1번 사진이 보이도록 함
$('.slide-containver').css('transform', 'translateX(0vw)');
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
//margin-left로 slide 하는 경우
// $('.slide-1').on('click', function(){
// $('.slide-containver').css('margin-left', '0vw');
// });
// $('.slide-2').on('click', function(){
// $('.slide-containver').css('margin-left', '-100vw');
// });
// $('.slide-3').on('click', function(){
// $('.slide-containver').css('margin-left', '-200vw');
// });
//어떤 사진이 보일지 나타내는 함수
function slidego(aa){
if(aa==1){
$('.slide-containver').css('transform', 'translateX(0vw)');
}else if(aa==2){
$('.slide-containver').css('transform', 'translateX(-100vw)');
}else if(aa==3){
$('.slide-containver').css('transform', 'translateX(-200vw)');
}
};
var page=1;
//transform으로 slide 하는 경우
$('.slide-1').on('click', function(){
slidego(1);
page=1;
$('#now').html('현재 페이지 '+page);
});
$('.slide-2').on('click', function(){
slidego(2);
page=2;
$('#now').html('현재 페이지 '+page);
});
$('.slide-3').on('click', function(){
slidego(3);
page=3;
$('#now').html('현재 페이지 '+page);
});
//이전 버튼
$('.pre-slide').on('click', function(){
page-=1;
if(page===0){
page=1;
}
slidego(page);
$('#now').html('현재 페이지 '+page);
});
//다음 버튼
$('.after-slide').on('click', function(){
page+=1;
if(page===4){
page=3;
}
slidego(page);
$('#now').html('현재 페이지 '+page);
});
$('#now').html('현재 페이지 '+page);
//숙제1
//위에서부터 100px 이상 내렸을때 로고 폰트 사이즈 줄이기
//답
$(window).on('scroll', function(){
console.log($(window).scrollTop());
if($(window).scrollTop()>=100){
$('.navbar-brand').css('fontSize',10);
}else{
$('.navbar-brand').css('fontSize',30);
}
})
//숙제2
//스크롤을 다내렸을때 다읽었다는 알림 띄우기
//답
$('.lorem').on('scroll', function(){
console.log($('.lorem').scrollTop());
;
if($('.lorem').scrollTop()==188){
$('#read').html('다읽었다');
alert('good');
}else{
$('#read').html('');
}
})
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(19)-이벤트 버블링과 이벤트관련 함수들 (0) | 2022.10.07 |
|---|---|
| JavaScript 입문과 웹 UI개발(18)-탭기능 만들며 배우는 for 반복문 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기 (0) | 2022.10.04 |
| JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 (0) | 2022.10.04 |
| JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기 (0) | 2022.10.03 |