jQuery/jQuery 스크롤 애니메이션7 TOP 버튼 제이쿼리 scrolltop 정리 탑버튼을 누르면 페이지 상단이동 $() 란? 제이쿼리 선택자 함수이다. 제이쿼리객체가 리턴이 된다 {객체} $('#footer .top_wrap .btn_top').on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 500); }); 객체표현법 {} 는 객체이다. .animate 의 객체안에 { 속성:값 객체안에 객체 배열안에 배열 다 가능 } $('html, body').animate({ scrollTop: 0, border: '2px solid red', width: 1000, }); {} 객체 표현법으로 추가 css 속성값들을 적을 수 있다. $('html, body').animate( { s.. 2022. 12. 15. 스크롤 방향 판단 아이폰 테스트 스크롤 방향판단시 아이폰은 제대로 구동하지 않는다. 문제해결을 위해 테스트 진행 // ios srollTop 테스트 $('body').prepend('1111 2022. 11. 16. 스크롤 방향 판단 마우스 스크롤을 내렸을때 퀵메뉴 숨켰다가 올리면 다시 나오기 스크롤 판단 $(function () { // 퀵메뉴 스크롤 방향판단 $(window).on('scroll', function () { var prevSt = 0; var nextSt = $(this).scrollTop(); // 아래로스크롤 console.log(prevSt + '이전스크롤탑', nextSt + '나중스크롤탑'); }); }); 이전스크롤 탑은 계속 0 멈췄을때 나중스크롤탑이 이전스크롤 탑으로 들어가야함 스크롤을 하다가 멈췄을때 이전스크롤이 되므로, 나중스롤탑과 합쳐야한다 안되는 이유는 var prevSt = 0; 스크롤탑 값을 계속 0으로 초기화 하기때문 그러니 이벤트 밖으로 이동해준다. $(function () { // 이.. 2022. 11. 16. 제이쿼리 스크롤+애니메이션 공통클래스로 효과 주기 '[class*=animate_fade]' animate_fade 를 포함하는 .each 각각 선택하여 반복하라 var st = $(this) 윈도우임 wiondow 가능 이만큼을 높이를 빼줘야한다. $(function () { $('[class*=animate_fade]').each(function () { // each안에서 $(this)는 앞에서 선택된 요소 var _this = $(this); $(window) .on('scroll', function () { var posY = _this.offset().top; var st = $(this).scrollTop(); console.log(posY, st); if (st >= posY - $(this).outerHeight() + 150) { _t.. 2022. 10. 28. 스크롤 애니메이션 AOS 라이브러리 사용해보기 페이지 방문시 다양한 효과를 볼 수 있다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 하단으로 내리면 제공 소스를 볼수있음 CDN? content distribution network 의 약자 서브로 전송되는 데이터이 때문에 느려서 직접 다운받아보자 페이지 상단 이 귀여운 캐릭터 클릭시 깃헙으로 이동 내용을 보면 v2 버전이 더안정화 됬다고 나온다 v2 버전 이동후 깃헙에서 파일을 다운로드하자 downloadzip 각각 css js 파일에 넣어준다. 링크연결 필수! 초기화코드 복사 자바스크립트 파일에 소스 코드 추가 사.. 2022. 10. 28. 제이쿼리 스크롤시 애니메이션 추가 라이브러리를 계속 쓰는건 권장하지않음 숙지하여 응용할 수 있게 먼저 예제를 만들어보자 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 기존 AOS 를 뜯어보면 공통클래스 사용하였다 이유는? 스크롤로 각각 위치판단후 제이쿼리를 개별 적용하게되면 변수가 너무 많기때문 초기화 코드 공통클래스를 사용하여 적용해보자 /* 애니메이션 공통 */ .animate_fade_down { transform: translate(0, -100px); opacity: 0; transition: all 1s; } .animate_fade_up { t.. 2022. 10. 27. 제이쿼리 스크롤 스크롤위치 $(window).scrollTop(); 문서에서의 요소 위치 $('요소').offset().top 기준에서의 좌우위치 $('요소').position().left 스크롤을 하단으로 내릴때 컨텐츠가 나타나는 이벤트를 제이쿼리로 표현해보자 . 1.요소가 가장 위로 스크롤 되는것을 판단 먼저 스크롤이 찍히는 위치를 파악하기 위해 제이쿼리 콘솔로 찍어보자. 문서전체에서 요소의 위아래 위치 판단 $(function () { console.log($('.main_about .box').offset().top); }); offset 메서드 안에 top 속성을 가져와라. (top은 속성이기에 괄호 없음) 문서가장 위에서 요소의 수직위치를 판단 offset 메서드 : 선택한 html 요소의 오프센 좌표를 가져.. 2022. 10. 27. 이전 1 다음
