[자바스크립트] 생일까지 남은 날짜 계산하기

[자바스크립트] 생일까지 남은 날짜 계산하기

Github Demo 자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다. 날짜만 설정하면 D-day에 Happy Birthday!란 메시지를 출력해주고, D-day 다음 날부터는 자동으로 내년으로 D-day를 변경합니다. 스크린 샷에서 아실 수 있듯, 초 단위로 표시해주며 0.5초마다 html의 내용을 갱신합니다. 굳이 초 단위는 필요 없으시면 초와 관련된 js를 제거하시고 갱신 주기를 늘려주세요. HTML 남았습니다! JS var v = new Date().getFullYear(), z = new Date("Apr 23, " + v + " 00:00:00").getTime(), x = setInterval(function() { var f = new Date().getTime(), g =..
[CSS]그래프 만들기

[CSS]그래프 만들기

css를 이용한 그래프입니다. 페이지를 불러왔을 때 너비 0부터 본인의 너비까지 확장되는 애니메이션이 있습니다. 5부터 100까지 5의 배수들만 작업했습니다. See the Pen Graph by Marshall (@marshall-ku) on CodePen. html에선 item1등의 class, css에선 li.item1::after 등을 수정하셔서 사용하시면 됩니다.
[자바스크립트, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

[자바스크립트, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

앞서 작성한 요소를 일정 비로 감싸기와 유튜브 세로 영상 퍼오기를 확인하시면 더 간단히 이해하실 수 있습니다.Github 링크 가장 기본적인 16:9로 감싸는 건 유튜브 뿐 아니라 카카오 TV, 네이버 TV 등도 지원합니다.하지만 9:16 비디오, 4:3 비디오, 1:1 비디오 등은 유튜브에서밖에 테스트하지 않았습니다. 작동 확인은 여기서 하시거나 아래 이미지 목록을 펼쳐주세요. JS1234567891011121314151617181920$("iframe").each(function() { var a = $(this).attr("width"), b = $(this).attr("height"); if (a / b === 16 / 9) { $(this).wrap("") } if (a / b === 9 / 1..
모바일 기기에서 background-attachment:fixed 사용하기

모바일 기기에서 background-attachment:fixed 사용하기

라이브 데모 background-attachment:fixed에는 꽤 고질적인 문제가 있습니다. 우선 모바일 브라우저에선 사용할 수 없고, 가끔 덜컹거리고 버벅이며 스크롤이 내려간단 점입니다. 두 가지 단점을 모두 해결한 방법을 소개해 드리려 합니다. HTML CSS.first, .second { width: 100%; height: 100vh; position: relative} .bg-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .bg { position: fixed; display: block; top: 0; left: 0; width: 100%; height: ..
유튜브 썸네일 추출하기

유튜브 썸네일 추출하기

추출 미리보기 유튜브 썸네일을 자동으로 가져오는 스크립트를 만들긴 했지만, 포털 사이트 등에서 영상을 검색하면 아무런 이미지도 없는 것처럼 보이기 때문에 만든 스크립트입니다. https://github.com/marshall-ku/Youtube-Thumbnail-Saver에도 정리해놨습니다. 사용 방법 추출하고 싶은 영상의 주소나, '공유'를 눌러 나오는 주소를 복사합니다. '추출'버튼을 클릭한 후 내려받기를 클릭합니다. 이미지를 다른 이름으로 저장하시면 됩니다.
svg로 스크롤 인디케이터 만들기

svg로 스크롤 인디케이터 만들기

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123 Colored by Color Scriptercs path의 내용은 별로 중요하지 않고, "scroll-indicator"란 id와 'stroke, stroke-width, fill 세 가지 옵션이 중요합니다. JS12345678var a = document.getElementById("scroll-indicator"), b = a.getTotalLength(); a.style.strokeDasharray = b, a.style.strokeDashoffset = b, window.addEventListener("scroll", si); function si() { var c = (docum..
[자바스크립트] Iframe 내부 요소 수정하기

[자바스크립트] Iframe 내부 요소 수정하기

Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 header와 footer를 제거하고, 크롬에서 스크롤바의 모양을 변경했습니다. HTML (예시)1cs JS123$("#iframe").one("load", function() { $("#iframe").contents().find(/*something*/).remove()})..
[자바스크립트] 요소가 뷰포트 안에 있는지 확인하기

[자바스크립트] 요소가 뷰포트 안에 있는지 확인하기

들어가기에 앞서, 뷰포트에 대해 설명하자면 위 스크린 샷처럼 긴 페이지 내에서 내가 보고 있는 영역을 뷰포트라 칭합니다. 이 글에 설명한 스크립트와 얼추 비슷하지만, 범용성은 조금 더 넓습니다. 12345678$.fn.isvisible = function() { var a = $(this).offset().top, b = a + $(this).outerHeight(), c = $(window).scrollTop(), d = c + $(window).height(); return b > c && a = a};Colored by Color Scriptercs 스크롤을 위에서 아래로 내리는 경우만 생각하면 위처럼 조금 더 짧은 스크립트를 이용하셔도 됩니다. 이제, 상술한 스크립트를 활용할 시간입니다. 1234..
마우스를 올려 gif를 재생하기

마우스를 올려 gif를 재생하기

gif의 프레임을 잘라서 멈춰있는 이미지를 만들 땐 ezgif를 이용하시면 됩니다. CSS만 이용하기 HTML1234 Colored by Color Scriptercs CSS1234567891011.hov-anim-box .animated { display: none} .hov-anim-box:hover .animated { display: inline} .hov-anim-box:hover .static { display: none}csstatic은 멈춰있는 이미지, animated는 움직이는 이미지입니다. 자바스크립트 없이 실행된다는 장점은 있지만, 한 번 마우스를 올리고 gif가 재생되기 시작하면 멈춰있는 이미지와 움직이는 이미지 사이의 시간 차이가 발생하면서 이상하게 보이는 게 단점입니다. Java..
1 2 3 4 5 6
블로그 이사갔습니다 (클릭)