스크롤 영역 이동 스크립트 정리

[스크롤 이벤트 리스너]

window.addEventListener('scroll', function(){
  console.log('스크롤시 출력되는 로그')
});

//스크롤 이벤트
//유용한 기능들
 console.log( window.scrollX )  //X축으로 얼마나 이동했는지 알려줌
 console.log( window.scrollY )  //Y축으로 얼마나 이동했는지 알려줌
 window.scrollTo(x, y) // 강제로 스크롤 이동 x ,y에 숫자입력

.

 

[이미지 위치 정보 알아내는 방법] 

getBoundingClientRect() 

//여기서 #test는 이미지 id

const ele = document.querySelector('#test');
const imgRect = ele.getBoundingClientRect();

//콘솔창에 imgRect 입력시
// 출력결과 예시
{
  bottom: 178
  height: 44
  left: 212.5
  right: 1092.5
  top: 134
  width: 880
  x: 212.5
  y: 134
}
//
top or y // 화면 상단 부터 대상의 처음 위치 값
bottom // 화면 상단 부터 대상의 끝 위치 값
left or x // 화면 좌측 부터 대상의 처음 위치 값
right // 화면 좌측 부터 대상의 끝 위치 값
width // 대상의 길이
height // 대상의 높이

//사용법 예시
getBoundingClientRect().top
getBoundingClientRect().bottom

.

 

[뷰크기 알아내기]

window.innerHeight; //뷰의 세로 사이즈 알아내기 (픽셀단위)
window.innerWidth; //뷰의 가로 사이즈 알아내기 (픽셀단위)

//사용 예시
console.log( window.innerHeight);
console.log( window.innerWidth);

.

[요소 알아내기]

요소.offsetTop; //해당 요소의 위로부터 떨어진 픽셀 거리
요소.offsetLeft; //해당 요소의 왼쪽으로부터 떨어진 픽셀 거리
요소.offsetHeight; //해당 요소의 픽셀 세로크기
요소.offsetWidth; //해당 요소의 픽셀 가로크기
요소.getBoundingClientRect(); //현재 뷰를 기준으로 요소의 정보를 가져온다.

.

[스크롤 움직이기]

window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

//top : 위에서 부터 얼마만큼 떨어진 위치인지 지정 (픽셀단위)
//left : 왼쪽으로 부터 얼마만큼 떨어진 위치인지 지정 (픽셀단위)
//behavior : 기본값은 'auto' 이며 순간이동 하듯이 화면 전환이 이루어지고
//'smooth' 를 사용했을 경우 화면전환이 부드럽게 바뀐다.

[스크롤시 해당 영역(이미지)이 보이면 .on class가 붙게 하는법] [getBoundingClientRect()]

//CSS
.content{
  width: 100%;
  height: 500px;
  opacity: 0;
  transition: opacity 2s ease-in; //투명도 속성을 2초에 걸쳐 변하게 함
}

.content.on{
  opacity: 1;
}

//
//Scropt

const content = document.querySelector('.content'); 
//content 안보였다가 보이는 class

window.addEventListener('scroll', () =>{ 
        if(window.innerHeight > content.getBoundingClientRect().top){
            content.classList.add('on');}
    })

+ transform 을이용하면 다양한 애니메이션 효과 추가 적용 가능

.content{
  width: 100%;
  height: 500px;
  opacity: 0;
  transform: translateX(-100%);
  transition:  all 1.5s  ease-in-out;
}

.content.on{
  transform: translateX(0px);
  opacity: 1;
}

조건문 memo : if문의 조건문은 AND(&&), OR(||)을 이용해서 두 가지 이상의 조건문을 검사할 수 있습니다.

|| = 키보드에서  shift+\ 누르면 됩니다

 

[스크롤시 TEXT 크게 작게]

//html
<div class="workspace">
		<h1>Scroll with Wheel or Trackpad</h1>
</div>

//css
.workspace {
    height: 100vh;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    font: 700 12px system-ui;
    background: pink;
  }

//script

const zoomElement = document.querySelector(".workspace");
let zoom = 1;
const ZOOM_SPEED = 0.1;

document.addEventListener("wheel", function (e) {
  if (e.deltaY > 0) {
    zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`;
  } else {
    zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`;
  }
});

[스크롤시 영역 이동 스크립트]

1. 제이쿼리를 이용하는 방법
제이쿼리 다운로드 방법 : https://hane-1.tistory.com/35 참고

IE, 크롬, 사파리 등의 브라우저는 wheel 이벤트를 사용하지만.
파이어폭스 브라우저는 'wheel' 대신 'DOMMouseScroll' 이벤트를 사용한다.

제이쿼리 링크 추가 해주기
//
//
//HTML 부분
<div class="contentbox">
      <div class="content">내용입력1</div>
      <div class="content">내용입력2</div>
      <div class="content">내용입력3</div>
      <div class="content">내용입력4</div>
      <div class="content">내용입력5</div>
</div>

//
//CSS부분

.contentbox{
	width: 100%; 
	height: 100vh;
}
 
.content{
	width: 100%; height: 100vh;
	background-color: rgb(231, 174, 174);
}
.content:nth-of-type(even) { 
	background: #92bae2;
    }
    
//   
//SCRIPT 부분
 
// 휠을 굴렸을때 스크롤이 되지않게 기본 이벤트인 scroll 제거하는 코드
// 값이 true인 경우 : 스크롤이벤트를 막지 않겠다 / preventDefalt()를 사용할 수 없다.
window.addEventListener("wheel", function(e){
	e.preventDefault();
},{passive : false});

//밑에가 작동코드  
var $html = $("html");
var page = 1;
var lastPage = $(".content").length;

$html.animate({scrollTop:0},10);

$(window).on("wheel", function(e){
	if($html.is(":animated")) return;
	if(e.originalEvent.deltaY > 0){
		if(page== lastPage) return;
		page++;
	}else if(e.originalEvent.deltaY < 0){
		if(page == 1) return;
		page--;
	}
	var posTop = (page-1) * $(window).height();

	$html.animate({scrollTop : posTop});
 
});

[스크롤시 영역 이동 스크립트 자바스크립트]

 <section id ="0" class="box" style="background-color:rgb(192, 113, 113);"><p>1</p></section>
	  <section id ="1" class="box" style="background-color:rgb(167, 143, 98);">
		  모양
	  </section>
	  <section id ="2"  class="box" style="background-color:rgb(167, 167, 106);"><p>32222</p></section>
	  <section id ="3" class="box" style="background-color:rgb(85, 129, 85);"><p>4</p></section>
	  <section id ="4" class="box" style="background-color:rgb(83, 83, 136);"><p>5</p></section>
/*css*/
section {opacity: 1; 
transition: all 0.5s;}
.box {  width:100%; height: 100vh; position:relative; color:#ffffff; font-size:24pt; }
/* .box:first-of-type p { opacity:1;} */
.box p {  width:50%; height:50%; background:rgba(0,0,0,.3); position:absolute; font-size:200px; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; opacity:0; text-align:center; }  

.contentbox{
	width: 100%; 
	height: 100vh;
}
 
.content{
	width: 100%; height: 100vh;
	background-color: rgb(231, 174, 174);
}
.content:nth-of-type(even) { 
	background: #92bae2;
    }
    
    
 /*스크립트*/
 
 window.onload = function () {
	$('.box').eq(0).addClass('move');
	var elm = ".box";
	$(elm).each(function (index) {
		// 개별적으로 Wheel 이벤트 적용
		$(this).on("mousewheel DOMMouseScroll", function (e) {
			e.preventDefault();
			var delta = 0;
			if (!event) event = window.event;
			if (event.wheelDelta) {
				delta = event.wheelDelta / 120;
				if (window.opera) delta = -delta;
			} 
			else if (event.detail)
				delta = -event.detail / 3;
			var moveTop = $(window).scrollTop();
			var elmSelecter = $(elm).eq(index);
			// 마우스휠을 위에서 아래로
			if (delta < 0) {
				if ($(elmSelecter).next() != undefined) {
					try{
						moveTop = $(elmSelecter).next().offset().top;
						$(elmSelecter).next().addClass('move'); //  휠 내렸을시 애니메이션 이벤트
					}catch(e){}
				}
			// 마우스휠을 아래에서 위로
			} else {
				if ($(elmSelecter).prev() != undefined) {
					try{
						moveTop = $(elmSelecter).prev().offset().top;
						
					}catch(e){}
				}
			}
			 
			// 화면 이동 0.8초(800)
			$("html,body").stop().animate({
				scrollTop: moveTop + 'px'
			}, {
				duration: 500, complete: function () {
				}
			});
		});
	});
	
	$(window).resize(function(){
		$('.box').css('height',$(window).height());
	});
	
}

 

 

 

참고 링크 정리

 

https://velog.io/@timosean/Web-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%8B%9C-%ED%95%9C-%EB%B2%88%EC%97%90-%EC%98%81%EC%97%AD-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

[Web] 스크롤 시 한 번에 영역 이동하기

https://tlsdnjs12.tistory.com/63

[JS] Javascript Scroll Event

https://m.blog.naver.com/a_ugust/221982749023

[Javascript] 마우스 휠 이벤트 - mousewheel, wheel

https://velog.io/@godud2604/CSS-Scroll-to-Zoom

[JavaScript] 마우스 wheel 이벤트를 조작하여, Zoom 기능 구현

https://despiteallthat.tistory.com/182

[React] useEffect란?

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

https://mwangmoong.tistory.com/9?category=981612

한 글자씩 나타나는 애니메이션(CSS, VanilaJS)

https://mwangmoong.tistory.com/10

화면에 나타나면 애니메이션이 작동되게 하라!(CSS, VanilaJS)