jQuery12 [jQuery] 특정 위치(화면 위치)에서 스크롤 이벤트 스크롤 시 화면이 특정 위치에 도달했을 때 이벤트 발생 화면의 1/2 지점과 2/3 지점에 div가 도달했을 때 배경색 변경 예시 [html] 아래로 스크롤 화면의 1/2 지점에서 이벤트 발생 화면의 2/3 지점에서 이벤트 발생 [css] div { width: 100%; height: 700px; font-size: 2rem; text-align: center; } .scroll-12 { background: pink; } .scroll-23 { background: skyblue; } [js] // 화면의 1/2값과 2/3값 변수 할당 let scrollVh12 = $(window).innerHeight() * 1 / 2; let scrollVh23 = $(window).innerHeight() * .. 2023. 8. 14. [jQuery] 마우스 커서(cursor) 따라다니는 애니메이션(animation) 마우스 커서(cursor)를 따라다니는 도형 애니메이션(animation) [html] [css] .cursor { position: absolute; transform: translate(100%, 100%); width: 1rem; height: 1rem; border: 2px solid #808080; border-radius: 50%; opacity: 0.4; transition: all 0.3s ease-out; z-index: 1000; } .cursor.on { border: 2px solid #222; background: #222; opacity: 1; } [js] $(window).on('scroll mousemove', function(e){ $('.cursor').css('left'.. 2023. 8. 11. [jQuery] data-tab 활용 탭 메뉴(tabs menu) data-tab 을 활용한 탭 메뉴(tabs menu) 구현 [html] menu1 menu2 menu3 menu 1 menu 2 menu 3 [css] *{ margin: 0; padding: 0; } ul{ display: flex; gap: 20px; position: relative; } li{ list-style: none; } li.on a{ font-weight: bold; color: red; } .content{ display: none; width: 300px; height: 300px; padding: 10px; margin-top: 10px; border: 1px solid black; } .content.on{ display: block; } [js] $('li').click(fu.. 2023. 8. 5. [slick] slider 실행 시 콜백(callback) 이벤트 슬릭(slick) 슬라이더(slider) 실행 전/후 콜백(callback) 이벤트 [html] item01 item02 item03 item04 item05 [css] .my-slider { position: relative; } .my-slider .slick-slide { height: 100px; border: 1px solid blue; box-sizing: border-box; text-align: center; } .slick-arrow { position: absolute; bottom: -30px; left: 0; } .slick-arrow.slick-next { left: 80px; } p { font-size: 30px; text-align: center; } [js] $('.my-s.. 2023. 7. 26. [jQuery] 팝업(popup) / 모달(Modal) 시 스크롤 비활성화 (iOS 포함 모든 기기) 팝업(popup)이나 모달(modal) 사용 시 바디의 스크롤(scroll)을 비활성화 하는 방법 iOS(아이폰)를 포함한 모든 기기에 대응 [html] section1 section2 popup popup toggle [css] *{ margin: 0; padding: 0; } body { width: 100%; } section { height: 600px; } .section1 { background: yellowgreen; } .section2 { background: skyblue; } .popup { display: none; position: fixed; left: 0; top: 0; width: 80%; height: 80vh; background: violet; } .popup.activ.. 2023. 7. 25. [swiper] slide 실행 시 콜백(callback) 이벤트 스와이퍼 슬라이드 실행 시 이벤트 설정 [html] Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 [css] .swiper { width: 300px; height: 200px; } .swiper-slide { background: skyblue; text-align: center; } .text{ width: 300px; height: 100px; margin: 0 auto; } [js] var swiper = new Swiper(".mySwiper", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, speed: 1000, loop: true, on: { slideChange: fu.. 2023. 7. 19. [slick] slider에서 재생 / 정지 버튼 추가 slick slider(슬릭 슬라이더)에서 오토 슬라이드 재생 / 정지 버튼 추가하기 [html] 재생 정지 [css] .slick-test{ width: 600px; overflow: hidden; outline: 1px solid blue; } .slick-test .slick-list{ margin: 0 -10px; } .slick-test .slick-slide{ height: 200px; margin: 0 10px; background: skyblue; } [js] $(document).ready(function(){ $('.slick-test').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, autoplay: true, autoplay.. 2023. 6. 22. [jQuery] 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 대응 헤더 제이쿼리(jQuery)를 이용하여 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 감지 대응하기 스크롤 방향에 따라 헤더(header) 숨김/표시 처리를 하여도 아이폰(iOS)의 사파리에서 상단으로 이동할때 바운스 스크롤 이펙트가 작동하면 스크롤 위치가 마이너스로 인식되어 헤더가 표시되지 않는다. 문제는 상단에서 바운스 스크롤 이펙트가 작동하고 있을때와 이펙트가 종료되었을 때 모두 헤더가 표시되지 않는다. 해결 방법은 기존 방향 감지 이벤트에서 스크롤 위치가 마이너스라도 헤더가 표시될 수 있게만 추가하면 된다. [js] let lastScroll = 0; $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); if (lastS.. 2023. 6. 16. [jQuery] 스크롤(scroll) 방향 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 방향에 따라 헤더(header) 숨김/표시 예시 [html] header [css] header{ position: fixed; width: 100%; height: 100px; background: pink; } main{ width: 100%; height: 1000px; background: skyblue; } [js] let lastScroll = 0; // 초기 스크롤 위치 $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); // 현재 스크롤 위치 if (nowScroll > lastScroll) { // 스크롤 위치 증가 $('header').st.. 2023. 6. 14. 이전 1 2 다음 728x90
