CREATIVE

'Web Development/JavaScript' 카테고리의 글 목록

이매지네이션 라이브러리 다크모드 라이트모드 토글 스위치 기능(Javascript/JQuery) 다크모드 라이트모드 토글 스위치 CSS와 JavaScript를 활용한 다크모드 라이트모드 토글 스위치 기능을 내 사이트에 추가하는 방법입니다. 해외 사이트들을 참고하여, 현재 적용되어 있는 그대로의 코드값입니다. 버튼의 형태나 디자인 등은 사용자의 취향에 맞게 수정할 수 있으며, 위치 등도 조절해서 사용하시길 바랍니다. 버튼이 아닌 라벨 태그로도 구성할 수 있습니다. 이 경우에는 버튼 태그로 HTML 블럭을 만들어주고 클릭시 발생하는 자바스크립트인 onclick()를 활용한 방법입니다. 이미지(해)와 이미지(달)간의 스위칭(토글전환)은 removeClass와 addClass 자바스크립트로 구성하며, 버튼은 클릭했을 때 toggleClass로 'dark'로 전환되는 과정입니다. HTML과 JavaScrip..
이매지네이션 라이브러리 [JavaScript] 타이핑 애니메이션 효과 JQuery 라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 5분 내에 적용이 가능합니다. 중요한 것은 타이핑 효과를 적용하고자 하는 곳에 블럭(HTML)을 넣고 자바스크립트 언어로 구현합니다. CDN / JQeury 라이브러리를 불러옵니다. 사용하고자 하는 위치에 HTML 블럭을 만듭니다. 자바스크립트 언어 코드로 텍스트를 적용합니다. 위는 예시이며, 다양한 효과를 적용할 수 있습니다. 메소드에 따라서 타이핑 속도나 타이핑 전환 속도 등을 구현할 수 있습니다. 옵션(Options) Name Type Default value Description strings String or Array null Strings to type out when using autoS..
이매지네이션 라이브러리 [JavaScript] D-Day 타이머 var ddaytimer = setInterval (dayGap, 1000) function dayGap () { var dday = new Date("November 24, 2017 00:00:00").getTime();// 디데이 var nowday = new Date();// 현재시각 nowday = nowday.getTime();// 밀리세컨드 단위변환 var distance = dday - nowday;// 남은 시간에서 현재시작을 뺀다. var d = Math.floor(distance / (1000 * 60 * 60 * 24));// 일 var h = Math.floor((distance / (1000*60*60)) % 24);// 시간 var m = Math.floor((distance /..