뫙뭉

단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중... 역시나 사이트에 재미를 선사하는 요소로 hover effect를 빼놓을 수 없지 않을까 라는 생각을 했다. 그리고 조금은 색다른 효과를 내보는 것도 재밌겠다 싶어 오늘은 단순히 색만 바뀌는 것이 아닌 빛번짐 효과로 좀 더 화하고 쨍한 느낌의 효과를 내는 법에 대해서 소개해보려한다. 굉장히 간단하니 겁내지 마시라!! 내가 직접 구현해 본 Hover effect https://codepen.io/swpark907/pen/qBVNqYg Light bleed hover effect(Pure CSS) Light bleed hover effect(Pure CSS)... co..

이전 포스트에서 열심히 '한글자씩 나타나는 애니메이션'에 대해 만들었다. 그런데 문제가 하나 있다. 해당 요소는 저~~~기 밑에 있는데 사이트가 렌더링이 되자마자 애니메이션이 발동된다면 여태 힘들게 애니메이션을 만든 의미가 없지 않은가!! 요소가 화면 안에 들어왔을 때 애니메이션이 발동되어야 된다 이말이다. 그래야 내가 열심히 만든 애니메이션을 자랑할 수가 있다. 그렇기 때문에 오늘은!! 요소가 화면에 보일 때 애니메이션이 작동하도록 하는 방법에 대해 블로깅하려 한다. 화면의 위치와 요소의 위치 우선 화면의 상단의 위치를 알아야겠지. 이것은 간단하다. window.pageYoffset; window.scrollY; 방법은 위의 두가지가 있는데 둘의 차이가 무엇이냐. window.scrollY 는 구형 브..