Utils (8) 썸네일형 리스트형 IntersectionObserver를 이용한 scroll detector | Javascript IntersectionObserver를 사용하여 스크롤 이동 감지기를 만들어봅니다.IntersectionObserver타겟 요소가 화면에 표시되거나 숨겨지는(뷰포트에 보이거나 사라지는) 이벤트를 감지하여 특정 동작(메소드)를 실행합니다.요소가 표시/숨겨지는 기준 비율(0.0~1.0)을 설정할 수 있습니다.0 : 1px이라도 보이면 invoke1 : 요소 전체가 보여지면 invoke 생성하기new 키워드를 사용하여 IntersectionObserver 객체를 생성합니다.const io = new IntersectionObserver(callbackFn, options); callbackFn function타겟 요소가 보이거나 숨겨질 때 실행될 동작(메소드)입니다.param1 IntersectionObser.. 랜덤 숫자 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 랜덤 숫자 n번 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (3) 각 자릿수가 랜덤 숫자로 n번 롤링 후 첫 번째 자리부터 맞추는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjQuery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능변수 정의사용할 변수를 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 128374838; // 표시할 타겟 숫자const strNum = targetNum.toString(); // 타겟 숫자의 string 타입const targetNumLen = strNum.length; // 타겟 숫자 자릿수const LOOP_RANDOM_CNT.. 각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (2)0부터 1씩 증가하는 롤링에 이어 각 자릿수별로 1씩 증가하는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능반복해서 사용할 데이터들을 변수 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 10; // 표시할 최종 숫자const strNum = targetNum.toString(); // 숫자 데이터 타입 stringconst targetNumLen = strNum.length; // 숫자 자릿수 각 자리에 표시할 데이터각 자릿에 표시할 데이터를 배열로 관리합.. 0부터 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 0부터 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (1)어떤 회원수나 구매 수량 등 강조하고 싶은 숫자를 표시할 때 사용자의 시선을 사로잡기 위해 애니메이션을 사용하죠.그 중 0부터 1씩 증가하다가 표시할 최종 숫자를 보여주는 애니메이션을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능본격적으로 개발하기 전, 중복하여 사용하는 데이터들은 미리 변수로 정의하는 습관을 들이면 좋겠습니다.const targetNum = 10; // 표시할 최종 숫자const jqEl = $("#cnt"); // 숫자 표시할 요소 0부터 1씩 증가0부터 최종 숫자에 도달할 때까지 1씩 증가하는 반복문을 작성합.. Timer(타이머) 구현하기 | HTML, Javascript, jQuery Timer(타이머) 구현하기EnvironmentHTMLJavascriptSCSSThirdpartyjquery구현▪️ 퍼블리싱타이머가 그려질 요소를 생성합니다. ▪️ 기능남은 시간현재 시간을 기준으로 목표 시간까지 남은 시간을 초 단위로 계산합니다.Date 객체의 valueOf() 메소드로 시간의 millisecond 값을 비교한 후 1000으로 나누어 second 단위로 변환합니다.const goal = "2024-12-25"; // 목표 시간// 목표 시간과 현재 시간의 차(초)let remain = Math.floor((new Date(goal).valueOf() - new Date().valueOf()) / 1000); 초 > 일 시 분 초(ddhhmmss) 변환구한 초 단위의 남은 시간을 일시분.. 초 단위 시간을 일시분초(ddhhmmss) 단위로 변환하기 | Javascript 초 단위의 시간을 일시분초(ddhhmmss) 단위로 변환하기 초 단위 시간 time을 nn일 nn시 nn분 nn초로 변환해 봅니다.일1일을 초 단위로 표현한다면 이렇게 표현할 수 있겠죠.1 * 60 * 60 * 24time을 1일로 나눈 몫이 nn일이 됩니다.💡 Javascript의 나눗셈 연산은 실수 나눗셈이므로 Math.floor() 메소드로 소수점 아래를 버림합니다.day = Math.floor(time / (1 * 60 * 60 * 24)) 시1시간은1 * 60 * 60time에서 위에서 구한 nn일의 초 단위 시간을 제외한 시간을 1시간으로 나눈 몫이 hh이 됩니다.hour = Math.floor((time - (day * 1 * 60 * 60 * 24)) / (1 * 60 * 60)) 분마.. Custom Tab(탭) 컴포넌트 구현하기 | HTML, Javascript, jQuery 라이브러리 없이 tab(탭) 컴포넌트 구현하기UI 라이브러리를 사용하지 않고 나만의 custom 탭 컴포넌트를 구현해 보겠습니다.EnvironmentHTMLJavascriptSCSSThirdpartyjquery설계구현할 탭의 구조는 아래 그림을 참고해 주세요.tab 컴포넌트라고 정의하여 wrap 합니다. ▪️head영역사용자가 클릭할 수 있는 tab의 제목 영역입니다.제목 요소들은 성질이 같으므로 리스트라고 생각할 수 있습니다.현재 보이고 있는 panel에 따라 head에 선택되었다는 식별자 인디케이터를 통해 구분할 수 있도록 합니다. ▪️ panel 영역tab의 내용이 구현되는 영역입니다.최초 진입 시 첫 번째 panel을 제외한 요소들은 숨김 처리합니다.사용자의 head click 동작을 통해 각 .. Custom Accordion(아코디언) 컴포넌트 구현하기 | HTML, Javascript, jQuery 라이브러리 없이 accordion(아코디언) 컴포넌트 구현하기 UI 라이브러리를 사용하지 않고 나만의 custom 아코디언 컴포넌트를 구현해 보겠습니다.EnvironmentHTMLJavascriptSCSSThirdpartyjqueryfontawesome설계 구현할 아코디언의 구조는 아래와 같습니다. accordion 컴포넌트라고 정의하여 wrap 합니다. ▪️head 영역아코디언 전체의 제목입니다. ▪️ body 영역실제 아코디언이 구현될 wrap입니다.아코디언에 포함되는 각 item은 성질이 같은 리스트의 개념으로 생각합니다.제목 영역은 항상 보이는 요소이며, 내용 영역은 기본 숨김 처리되고 사용자가 toggle 버튼을 클릭함으로써 보이거나 숨겨집니다.내용 영역은 없는 경우도 있으며, 내용 영역이 있.. 이전 1 다음
