심심한 배경에 생동감을 넣기 위한 스크립트 제가 개인적으로 많이 사용하거나 또 사용하고 싶은 스크립트를 모아둔 블로깅 입니다. 간혹 뒷 배경이 너무 심심할때 넣어주면 괜찮더라구요! 물론 캐릭터나 오브젝트를 플로팅 시키는 것도 함께 하면 더욱 좋죠! 이 블로깅이 누군가에도 도움이 되셨으면 좋겠네요 가장 많이 사용하는 스타일 혹시라도 스파크 스타일을 찾고 있었다면 이런 스타일 한번 사용해보세요 생각보다 괜찮아요! 스크립트 파일에서 color를 찾아 색을 변경할 수 있어요! FireSpark Script 미리&코드보기 우주에 별이 돌아가는 스타일 제가 불꽃 관련된 스크립트를 찾다가 발견한건데 예뻐서 체크해둔 스크립트죠! 언젠가 이 스크립트를 사용해볼만한 프로젝트가 있기를 바래요! Stars Script 미리&..

하늘에서 벚꽃이 흩날려요 이제 이런 코드를 쓸 시기가 다가왔어요😀 간단하고 수정도 어렵지 않아서 심심한 페이지 한번 넣어주시면 생동감도 살리고 이 시즌에 느낌있게 갈 수 있을 거에요! 제가 실제로도 사용하고 있었는데 블로깅을 안해놔서 올려두려고 합니다! [예시보기] 소스 다운로드(깃허브) GitHub - jhammann/sakura: 🌸 A javascript plugin to Make it rain sakura petals using CSS animations and requestAnimationFrame 🌸 A javascript plugin to Make it rain sakura petals using CSS animations and requestAnimationFrame (vanilla JS ..

이미지를 둥둥 띄우기 웹에 생동감을 주기 위해서 몇가지 방법들이 있는데 그 중에 하나인 이미지를 가볍게 둥둥 띄우는 방법입니다. 보통 플로팅(Floating) 이미지라고 하는데 빠르고 간단하게 할 수 있는 방법을 올려둡니다. 사실 제가 많이 애용하는 방법이기도 합니다. 그래서 늘 급할때 쓸려고 이렇게 포스팅 해둡니다. 😁 결과 이미지가 왔다 갔다 합니다 HTML CSS .floating { animation-name: floating; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0..

가볍게 쓸만한 모달창 버튼을 누르면 전체화면이 어두워지면서 가운데 창을 띄우고 또 버튼을 누르면 창이 닫히는 효과입니다. 핵심구성은 CSS와 JS 하나씩 이구요. 정말 가볍게 쓸 수 있지 않을까 싶어요!😀 그리고 예제 영상에서는 없지만 스크롤이 되어도 늘 가운데에 위치해 있는 모달창입니다. 심플한 모달 예제입니다! HEAD와 /HEAD사이 HEAD안에는 CSS와 모달창을 작동가능하게 할 제이쿼리를 불러옵니다. CSS는 아래 첨부파일을 다운 받아주세요. 코드를 확인하면 .modal이나 .btn-close 그리고 .modal-wrapper에서 background 정도의 수정만 거쳐도 원하는 모달을 만드실 수 있을거에요! BODY와 /BODY사이 모달창 띄우기 CLOSE 모달창에 들어갈 내용을 넣으면 됩니다...

스크롤을 내리면 클래스를 추가시킵니다. 스크롤이 발생하면 기존의 클래스에 옵션을 추가해둔 클래스를 추가하여 스크롤 후 이미지나 텍스트가 움직이거나 페이드 되거나 할 수 있는 코드입니다! 마우스가 다시 올라가면 클래스를 삭제하여 다시 스크롤시 또 적용되게 됩니다! 그게 싫다면 removeClass 부분을 삭제 하면 한번 스크롤 후 액션이 실행후 고정되겠죠? .addClass와 .removeClass 클래스 추가와 클래스 삭제가 포인트! 그리고 클래스가 아닌 스타일 추가를 원한다면 위와 같은 식으로 color 그리고 속성을 적어주시면 됩니다!