CSS,
Front-end,
HTML,
JavaScript,
웹개발
Slide in on scroll
목표
스크롤이 이미지 자리의 중간까지 오면 이미지가 양옆에서 날아오는 효과를 적용하려 함
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="site-wrap">
<h1>Slide in on Scroll</h1>
<img src="http://unsplash.it/400/400" class="align-left slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
</div>
<script>
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
</script>
</body>
</html>
기본 코드의 내용이 너무 길어 필요한 내용만 남기고 지웠음
script 코드에서 debounce 함수는 스크롤을 할 때 변경 사항을 감지하는 시간을 늘려줘,
쓸데없이 변화를 자주 감지하지 않도록 해줌.
과정
- 이미지 태그 선택
- 이미지를 날아오게 할 함수 생성
- 함수 호출
코드 분석
이미지 태그 선택
const sliderImages = document.querySelectorAll('.slide-in');.slide-in클래스를 가진 요소들을 선택이미지를 날아오게 할 함수 생성
function checkSlide(e) { sliderImages.forEach(sliderImage => { // half way through the image const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // bottom of the image const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown = slideInAt > sliderImage.offsetTop; const isNotScrolledPast = window.scrollY < imageBottom; if (isHalfShown && isNotScrolledPast) { sliderImage.classList.add('active'); } else { sliderImage.classList.remove('active'); } }); }checkSlide함수로 이미지가 날아오는 기준을 정의해줌slideInAt는 현재 뷰포트의 세로길이와 스크롤한 길이의 합에서 이미지 길이의 절반을 뺀 값이다imageBottom은 이미지의 최상단 위치 좌표에 이미지 높이를 더한 값, 즉 이름대로 이미지의 최하단의 값이다isHalfShown은slideInAt이 이미지의 최상단 좌표값보다 클 때 참inNotScrolledPast는 스크롤한게imageBottom보다 작을 때 참
조건문 안은 위에 설정한 두 부등식이 둘다 참일 때active클래스를 더해 이미지가 나오고,
거짓이면active클래스를 삭제함
즉 이미지의 중간부터 맨 아랫부분 사이에 스크롤을 할 때 이미지가 나오고, 사라진다함수 호출
window.addEventListener('scroll', debounce(checkSlide));스크롤을 할 때
debounce(checkSlide)함수가 실행되도록 함
찾아본 내용, 알게된 내용들
offsetTop - 가장 윗부분의 좌표값을 얻을 때 사용scrollY - 스크롤한 픽셀 만큼 값이 증가
'개발 > JavaScript30' 카테고리의 다른 글
| 15. LocalStorage (0) | 2017.04.13 |
|---|---|
| 14. JavaScript Reference VS Copying (0) | 2017.04.12 |
| 13. Slide in on scroll (0) | 2017.04.12 |
| 12. Key Sequence Detection (0) | 2017.04.11 |
| 11. Custom Video Player (0) | 2017.04.10 |
| 10. Hold Shift and Check Checkboxes (0) | 2017.04.10 |
