JavaScript 태그 글

우연히 새로 발견한 개발자 커뮤니티를 둘러보다 발견한 프로젝트에서 아쉬운 점이 보여 후다닥 만들어봤습니다. 개선하고 싶었던 점은 1 - 버튼을 연타하면 애니메이션이 진행되는 중에도 결과가 바뀐다.2 - 새로운 숫자를 부여받을 때 조금 더 역동적인 애니메이션이 표시됐으면 좋겠다. 이 두 가지 사항입니다. let tmp = 1; let numbers; function decryptEffect(element, time) { const effect = setInterval(() =>

https://codesandbox.io/s/z68y1012yl 참고한 글 https://github.com/marshallku/canvas-night-sky 깃허브 땐나의 계절인 여름도 왔고, 호텔 델루나 보다 보니 보름달이 뜬 밤하늘이 예뻐서 인터넷 뒤적이며 만들어 봤습니다.어디에 써먹을지 고민을 좀 해봤는데, 막상 써먹을 데가 없는 게 아쉽네요. ㅠㅠ HTML에 nightsky란 ID를 지닌 canvas 추가하시고 아래 스크립트만 붙여 넣으셔도 작동합니다. const width = window.innerWidth, height = window.innerHeight, stars = createStars(width, height, 30),

Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다.

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다.

jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다.

기기를 회전해 테스트해보세요! 이런 정보도 가져올 수 있을지 몰랐는데, 자이로 센서를 이용해 기기의 방향도 가져올 수 있더라고요. const box = document.getElementById("testBox"); function handleOrientation(event) { const alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (!beta) { addMouseEvent() } document.getElementById("alpha").innerText = alpha, document.getElementById("beta").innerText = beta, document.getElementById("gamma").innerText = gamma, box.style.transform