728x90 > 포트폴리오/wiggle wiggle17 wiggle wiggle 준완성본 보호되어 있는 글 입니다. 2024. 8. 10. [JS] 5초마다 지나가고 반복하는 캐러셀 배너 만들기 참고한 글 [JS] 타이머 설정하기 (몇 초 뒤에 / 몇 초 마다) (tistory.com) [JS] 타이머 설정하기 (몇 초 뒤에 / 몇 초 마다)X초 후에 코드 실행 setTimeout() 1) 첫 번째 파라미터는 무조건 콜백 함수. 2) 두 번째 파라미터는 초 단위 setTimeout(function(){ 실행할코드~ }, 기다릴시간); 5초 후 숨겨달라고 실행하기 hide() = display : nonjamongsoda.tistory.com[JS / CSS] 캐러셀 만들기 (숫자 버튼) (tistory.com) [JS / CSS] 캐러셀 만들기 (숫자 버튼)캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-b.. 2024. 8. 10. [SCSS] 슬라이더 이미지 만들기 HTML .. 2024. 7. 29. [JS/CSS] 드래그와 터치되는 캐러셀 만들기 (3) /// 많은 상품 스와이프var 시작좌표 = 0; // 드래그 시작 위치 저장var 현재좌표 = 0; // 드래그 중 현재 위치 저장var 총이동거리 = 0; // 드래그된 거리의 누적 값 저장let 눌렀냐 = false; // 드래그 상태 여부$(".swiper-container").on("mousedown", function (e) { e.preventDefault(); // 기본 동작 방지 (텍스트 선택 등) 시작좌표 = e.clientX; // 드래그 시작 위치 저장 눌렀냐 = true; // 드래그 상태 true - 마우스 버튼 누른 상태});$(".swiper-container").on("mousemove", function (e) { if (눌렀냐 === true) { // 드래.. 2024. 7. 22. 하단 여백 없애기 하단 밑에 잉여부분 남는거 수정하기= 원래 남으면 안됨..wrapper { min-width: 1800px;}전체를 감싸고 있는 wrapper 에다가최소 넓이 부여하니 아래 여백 사라짐. 2024. 7. 20. [SCSS] 전광판 안 멈추는 오류 HTML 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 💖WIGGLE WIGGLE💖 SCSS}.slide-pop:hover .marquee-container .marquee { animation-play-state: paused;}멈추게 끔 적용해주기. 해석: .slide-pop 요소에 hover가 적용될 때.. 2024. 7. 20. [JS/CSS] 드래그와 터치되는 캐러셀 만들기 (2) JS// 많은 상품 스와이프var 시작좌표 = 0;$(".swiper-slide") .eq(0) .on("mousedown", function (e) { 시작좌표 = e.clientX; });$(".swiper-slide") .eq(0) .on("mousemove", function (e) { console.log(e.clientX - 시작좌표); });출력이 음수로 돼서 양수로 바꿔줌.보통 우측은 양수좌측은 음수움직이게 하는 방법= 박스를 찾아갖고(document.querySelector 이걸로 찾음) 움직이게 하면 됨.$(".swiper-container") .eq(0) .on("mousemove", function (e) { console.log(e.clientX - .. 2024. 7. 6. [JS/CSS] 드래그와 터치되는 캐러셀 만들기 (1) HTML 수정전 CSS// 많은 상품 스와이프.swiper-wrapper { // flex-wrap: wrap; 이걸 사용하면 아이템들이 컨테이너의 너비를 초과할 경우 다음 줄로 넘어가게 됨 overflow: hidden; .swiper-container { display: flex; width: 100vw; justify-content: space-around; } .swiper-slide { /.. 2024. 7. 4. [SCSS] 지나가는 전광판 만들기 슬라이드 팝업창 생성하고 수정하기 HTML 놓치면 후회할 단종제품 💖80% 할인💖 SCSS// pop-up 슬라이드 팝업창.slide-pop { letter-spacing: 2px; font-size: 12px; position: relative; background-color: $main_color; display: inline-block; width: 100%; white-space: nowrap; .marquee-container { display: inline-block; animation: marquee 10s linear infinite; } .marquee .. 2024. 7. 2. 이전 1 2 다음 728x90
