코딩코드/바로쓰는코딩
-
심심한 배경에 생동감을 넣기 위한 스크립트 제가 개인적으로 많이 사용하거나 또 사용하고 싶은 스크립트를 모아둔 블로깅 입니다. 간혹 뒷 배경이 너무 심심할때 넣어주면 괜찮더라구요! 물론 캐릭터나 오브젝트를 플로팅 시키는 것도 함께 하면 더욱 좋죠! 이 블로깅이 누군가에도 도움이 되셨으면 좋겠네요 가장 많이 사용하는 스타일 혹시라도 스파크 스타일을 찾고 있었다면 이런 스타일 한번 사용해보세요 생각보다 괜찮아요! 스크립트 파일에서 color를 찾아 색을 변경할 수 있어요! FireSpark Script 미리&코드보기 우주에 별이 돌아가는 스타일 제가 불꽃 관련된 스크립트를 찾다가 발견한건데 예뻐서 체크해둔 스크립트죠! 언젠가 이 스크립트를 사용해볼만한 프로젝트가 있기를 바래요! Stars Script 미리&..
스파크 효과 스크립트심심한 배경에 생동감을 넣기 위한 스크립트 제가 개인적으로 많이 사용하거나 또 사용하고 싶은 스크립트를 모아둔 블로깅 입니다. 간혹 뒷 배경이 너무 심심할때 넣어주면 괜찮더라구요! 물론 캐릭터나 오브젝트를 플로팅 시키는 것도 함께 하면 더욱 좋죠! 이 블로깅이 누군가에도 도움이 되셨으면 좋겠네요 가장 많이 사용하는 스타일 혹시라도 스파크 스타일을 찾고 있었다면 이런 스타일 한번 사용해보세요 생각보다 괜찮아요! 스크립트 파일에서 color를 찾아 색을 변경할 수 있어요! FireSpark Script 미리&코드보기 우주에 별이 돌아가는 스타일 제가 불꽃 관련된 스크립트를 찾다가 발견한건데 예뻐서 체크해둔 스크립트죠! 언젠가 이 스크립트를 사용해볼만한 프로젝트가 있기를 바래요! Stars Script 미리&..
2023.04.03 -
하늘에서 벚꽃이 흩날려요 이제 이런 코드를 쓸 시기가 다가왔어요😀 간단하고 수정도 어렵지 않아서 심심한 페이지 한번 넣어주시면 생동감도 살리고 이 시즌에 느낌있게 갈 수 있을 거에요! 제가 실제로도 사용하고 있었는데 블로깅을 안해놔서 올려두려고 합니다! [예시보기] 소스 다운로드(깃허브) 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 ..
벚꽃 내리는 코드하늘에서 벚꽃이 흩날려요 이제 이런 코드를 쓸 시기가 다가왔어요😀 간단하고 수정도 어렵지 않아서 심심한 페이지 한번 넣어주시면 생동감도 살리고 이 시즌에 느낌있게 갈 수 있을 거에요! 제가 실제로도 사용하고 있었는데 블로깅을 안해놔서 올려두려고 합니다! [예시보기] 소스 다운로드(깃허브) 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 ..
2023.03.10 -
이미지를 둥둥 띄우기 웹에 생동감을 주기 위해서 몇가지 방법들이 있는데 그 중에 하나인 이미지를 가볍게 둥둥 띄우는 방법입니다. 보통 플로팅(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..
플로팅 이미지이미지를 둥둥 띄우기 웹에 생동감을 주기 위해서 몇가지 방법들이 있는데 그 중에 하나인 이미지를 가볍게 둥둥 띄우는 방법입니다. 보통 플로팅(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..
2022.10.31 -
가볍게 쓸만한 모달창 버튼을 누르면 전체화면이 어두워지면서 가운데 창을 띄우고 또 버튼을 누르면 창이 닫히는 효과입니다. 핵심구성은 CSS와 JS 하나씩 이구요. 정말 가볍게 쓸 수 있지 않을까 싶어요!😀 그리고 예제 영상에서는 없지만 스크롤이 되어도 늘 가운데에 위치해 있는 모달창입니다. 심플한 모달 예제입니다! HEAD와 /HEAD사이 HEAD안에는 CSS와 모달창을 작동가능하게 할 제이쿼리를 불러옵니다. CSS는 아래 첨부파일을 다운 받아주세요. 코드를 확인하면 .modal이나 .btn-close 그리고 .modal-wrapper에서 background 정도의 수정만 거쳐도 원하는 모달을 만드실 수 있을거에요! BODY와 /BODY사이 모달창 띄우기 CLOSE 모달창에 들어갈 내용을 넣으면 됩니다...
심플한 모달창가볍게 쓸만한 모달창 버튼을 누르면 전체화면이 어두워지면서 가운데 창을 띄우고 또 버튼을 누르면 창이 닫히는 효과입니다. 핵심구성은 CSS와 JS 하나씩 이구요. 정말 가볍게 쓸 수 있지 않을까 싶어요!😀 그리고 예제 영상에서는 없지만 스크롤이 되어도 늘 가운데에 위치해 있는 모달창입니다. 심플한 모달 예제입니다! HEAD와 /HEAD사이 HEAD안에는 CSS와 모달창을 작동가능하게 할 제이쿼리를 불러옵니다. CSS는 아래 첨부파일을 다운 받아주세요. 코드를 확인하면 .modal이나 .btn-close 그리고 .modal-wrapper에서 background 정도의 수정만 거쳐도 원하는 모달을 만드실 수 있을거에요! BODY와 /BODY사이 모달창 띄우기 CLOSE 모달창에 들어갈 내용을 넣으면 됩니다...
2022.08.24 -
스크롤을 내리면 클래스를 추가시킵니다. 스크롤이 발생하면 기존의 클래스에 옵션을 추가해둔 클래스를 추가하여 스크롤 후 이미지나 텍스트가 움직이거나 페이드 되거나 할 수 있는 코드입니다! 마우스가 다시 올라가면 클래스를 삭제하여 다시 스크롤시 또 적용되게 됩니다! 그게 싫다면 removeClass 부분을 삭제 하면 한번 스크롤 후 액션이 실행후 고정되겠죠? .addClass와 .removeClass 클래스 추가와 클래스 삭제가 포인트! 그리고 클래스가 아닌 스타일 추가를 원한다면 위와 같은 식으로 color 그리고 속성을 적어주시면 됩니다!
스크롤시 클래스 추가 시키기스크롤을 내리면 클래스를 추가시킵니다. 스크롤이 발생하면 기존의 클래스에 옵션을 추가해둔 클래스를 추가하여 스크롤 후 이미지나 텍스트가 움직이거나 페이드 되거나 할 수 있는 코드입니다! 마우스가 다시 올라가면 클래스를 삭제하여 다시 스크롤시 또 적용되게 됩니다! 그게 싫다면 removeClass 부분을 삭제 하면 한번 스크롤 후 액션이 실행후 고정되겠죠? .addClass와 .removeClass 클래스 추가와 클래스 삭제가 포인트! 그리고 클래스가 아닌 스타일 추가를 원한다면 위와 같은 식으로 color 그리고 속성을 적어주시면 됩니다!
2022.08.19