Hello 100A

요즘 심심찮게 자주 쓰이는 marquee 효과다. 아주 간단했고, 쉽게 사용할 수 있다. https://github.com/aamirafridi/jQuery.Marquee GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee jQuery plugin to scroll the text like the old traditional marquee - GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee github.com jquery 는 3.7.1 라이..

평상시 작업할때 자주 쓰는 버튼 마우스 오버 css 스타일입니다. 전체 html은 간단히 이렇게 작업했습니다. 버튼디자인 버튼타입1 버튼타입2 버튼타입3 버튼 1번은 간단히 배경색이 바뀌는 css입니다. transtion은 background를 넣었습니다.btn1{ position:relative; display:inline-block; background:rgb(26, 115, 232); padding:10px 20px; color:#fff; cursor:pointer; transition:background .4s; } .btn1:hover{ background:#5AAEFF; } 버튼 2번은 마우스 오버시에 progress bar스타일로 게이지바가 채워지듯이 배경색이 변경됩니다..btn2{ posi..

가장 문제가 되는 유튜브사용은 운동하는 시간 30분, 모든 일을 다 마친 10시~12시까지만 봤다. (집안 정리도 하면서 유튜브를 봐야되서 1시간채 못봤다 ㅠ) 사실 주말엔 너무 뭔가가 보고 싶어서 한시간 반정도 컴퓨터로 영상을 봤다. 살짝 허무했다. 그래도 꽤 선방한 일주일이었다고 생각한다. 어쩔 수 없이 영상을 보다가도 시간이 되면 screen sen 어플이 "Is this important?"라는 멘트를 띄워버려 폰을 끄고 일찍 자야되서 좋았고, 출퇴근 하는 버스안에서 풍경을 보는것도 좋았다. 핸드폰을 짬짬히 보는 시간동안 내가 해야할 일을 머릿속으로 정리해서 좋았고, 현재 어떤 상황인지 정확히 인지를 하고 자신이 어떤 문제가 있는지 알게되었다. 물론 너무 힘들었다. 그냥 가만히 있는게 너무 힘들고..

주로 연혁이나 절차 등에서 스크롤을 내릴때 흐름을 표현할 때 사용하는 스크롤 애니메이션입니다. gsap의 timeline을 이용해서 작업했습니다. 먼저 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js 을 꼭 추가합니다. See the Pen Untitled by baekah (@baekah) on CodePen.

마우스를 움직일때마다 동그라미 모양의 트래커가 따라다니는 마우스 좌표를 따라다니는 효과입니다! 그리고 cursor change라는 영역에 마우스오버를 하면, 노란색 동그라미 트래커가 하얀색 불투명한 트래커로 변경됩니다. 가장 중요했던 css 속성은 마우스 커서를 따라다니는 트래커에 들어가는 pointer-events:none; 이라는 속성입니다. See the Pen Untitled by baekah (@baekah) on CodePen.