jQuery(3)
-
jquery를 javascript로 바꿔보자 - fixed 활용한 플로팅 배너
앞서 포스팅한 "jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능" 과는 조금 다른 듯한 플로팅 배너 코드를 적어볼게요. 고정배너 위 코드대로 하면 이렇게 떠있는 배너가 생성됩니다. 여기에 아래 jquery 코드를 이용해 따라다니는 플로팅 배너로 만들 수 있습니다. 이렇게 코드를 적용한 다음 스크롤을 내리면 배너가 fixed 로 변경되면서 화면 안쪽에 고정되어 따라다니게 됩니다. 여기서 핵심은 scroll_btn 에 position fixed 를 주는 것이 아니라 scroll_btn 안에 있는 a 태그에 스타일(css)을 적용시켜 줘야 된다는 점입니다. 만약에 scroll_btn 에 해당 css 를 주면 아래처럼 화면 밖으로 나가버리게 됩니다. 위 css 부분을 잘 살펴보시기 ..
2024.03.15 -
jquery를 javascript로 바꿔보자 - 퀵스크롤(플로팅 배너) 기능
홈페이지를 방문하다 보면 왼쪽이나 오른쪽에 따라다니는 배너 등을 볼 수 있습니다. 예전에는 제이쿼리(jquery)로 많이 구현했는데 이번에 한번 순수 자바스크립트로 바꿔 보겠습니다. Top Home Login Join html, css는 컴퓨터에 모아둔 코드 조금 수정해서 적었습니다. 이 부분이 jquery 스크롤 플로팅 배너 코드입니다. 이렇게 화면에서 스크롤을 움직이면 저 오른쪽에 있는 메뉴들이 따라다니는 기능입니다. 이 코드를 순수 자바스크립트로 바꿔보겠습니다. const quick_scroll = (function() { const quickmenu_sub = document.getElementById('quickmenu_sub'); const current_position = quickmenu_..
2024.03.14 -
jquery&css 배경 이미지 애니메이션
가로 100% 세로 고정 높이로 돌아가는 슬라이드(애니메이션) 소스입니다. jquery 플러그인 중에 가로 100% 슬라이드가 있기는 한데 해상도에 따라서 세로 높이가 늘어나는 소스 뿐이라서좀 허접하더라도 직접 짜보자 해서 만들었던 코드입니다. 웹디가 어찌나 가로 100% 배경을 좋아라 했는지ㅠ 조금 에러가 있지만 수정하기도 귀찮고 그냥 이대로 종종 사용 중..;; 19인치 모니터일 경우 가로 100%, 세로 고정 높이 19인치보다 큰 모니터처럼 가로 사이즈 늘렸을 때가로는 배경 이미지 크기만큼 보여지고 세로 높이는 고정이 됩니다. 사진은 경남 산청에 있는 지리산 당나귀 펜션 메인 사진입니다.당나귀펜션은 좌우 화살표가 아닌 썸네일 형식으로 되어 있습니다. 아래부터 해당 코드입니다. 썸네일형식은 당나귀펜션..
2016.11.23