뫙뭉

단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중... 역시나 사이트에 재미를 선사하는 요소로 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 는 구형 브..

웹사이트에 심심함을 덜어줄 무언가가 필요하다!! 얼마전에 포트폴리오를 재정비할 계획이 있었다. 사실 신입 포트폴리오, 심지어 비전공자라 하면 쓸 말이 많지가 않더라. 나만 그런것인가... 그렇다면 뭔가 심심하지 않은 애니메이션으로 시각적 즐거움을 채우면 좋지 않을까 라는 생각이 자연스럽게 들게된다. 뭔가 샤랄라~ 하는 느낌으로 한글자씩 나타나는 애니메이션을 넣으면 좋겠다라는 생각에 일단 코드를 생각나는대로 끄적여 보았다. 생각의 흐름 CSS만으로 해결 할 수 있겠는데..? 일단 html에 적어야겠지. 가장 처음 적었던 코드는 다음과 같다. TEST 우선 기본적으로 드는 생각은 글자를 쪼개야 한다는 것. 한글자씩 나타나야 하기 때문에 도저히 하나의 태그 안에 글자가 있으면 해결방법이 떠오르지 않는다. 코딩..

예전부터 즐겨보던 유튜브 채널인 Online Tutorial 에 흥미로운 영상이 올라왔다. 원본영상: https://www.youtube.com/watch?v=ShPPkZEeLPo&t=662s Circular Navigation, 활성화 되면 원형으로 메뉴가 펼쳐지는 메뉴 네비게이션! 다른 프로젝트를 진행하며 막힘의 연속에 지쳐가고 있을 때 머리도 식힐겸 가볍게 만들어 볼 것이 생겨 신이 났던 것 같다. 사실 영상을 보며 따라서 코드만 배껴 쓰면 만들어지는 기능이지만 그렇게 하면 당연히 의미가 없으니 영상은 아이디어를 얻는 소스일 뿐! 시연 영상만 보고 처음부터 혼자 만들어 보려고 노력하였다. 사용 기술은 HTML, CSS, VanilaJS이다. 디자인 요소가 강조된 튜토리얼이다보니 JS는 active ..