UI 디자인 애니메이션 연구소 (26) 썸네일형 리스트형 커서 애니메이션 | 누구나 쉽게 따라하는 마우스 움직임에 따라 연기 효과 만들기 (Vanilla JS + CSS) 반갑습니다. 아주 오랜만에 찾아 뵙게 되었습니다. 오늘은 순수 JavaScript와 CSS만으로 마우스를 따라다니는 연기(smoke) 효과를 만들어보는 방법을 소개해드리겠습니다. 마우스를 움직이면 흩날리는 연기처럼 보이는 원들이 생성되고, 자연스럽게 사라지는 애니메이션 효과가 적용됩니다.아주 간단한 코드지만 시각적으로 꽤 멋진 효과를 줄 수 있어요! 최종 결과 미리 보기마우스를 움직이면 연기 같은 둥근 원이 생기고 서서히 커지면서 위로 날아가듯 사라지는 효과가 구현됩니다. HTML 구조먼저 HTML은 아주 간단합니다.애니메이션 원들이 추가될 컨테이너 역할의 하나만 있으면 됩니다. CSS 스타일링연기 효과의 핵심은 CSS 애니메이션입니다. circle 클래스에 원형 모양을 주고, 커지면서 투명해지는 .. ✨AI도 그리다 포기하는 태극기, HTML과 CSS 로 제작하기(수정반영) 참고사항- 태극기 양은 (#d13642) 을 사용해야 하며, 음은 (#080884) 을 사용해야 합니다. 과정에는 음의 색상만 정확히 사용하고, 양의 색상은 임시 색상인 red 를 사용하고 있는데, 결과물에서는 정상적인 색상으로 설정되어 있습니다. 들어가는 말오늘 만들어볼 작품은 태극기 입니다. 1945년 8월 15 일 일본 제국의 패망으로 식민지로 벗어나 현재 대한민국은 눈부신 성장을 거쳐 지금과 같은 강국이 되었습니다. 오늘은 이 날을 맞이하여 나름의 광복절을 기념하며, 애국하는 마음으로 CSS 를 사용해 태극기를 만들어 보았습니다. 아래는 시연 영상입니다. 참고로 자바스크립트 부분은 설명하지 않았습니다. 만들고 정리하다보니 시간이 많이 지체되어서 생략하였습니다. 어려운 코드는 아니니 최하단.. 바탕화면 마우스 드래그 애니메이션 애니메이션 소개문득 바탕화면의 마우스를 드래그 하면서 저 드래그 애니메이션은 어떻게 동작하는 거지? 라는 궁금증이 생겼습니다. 그래서 동작과정을 하나하나 살펴보고, 직관적이게도 위치좌표 사이의 거리에 따라 크기가 변경되는 것을 알 수 있었습니다. 단순한 애니메이션이었지만, 실제 구현을 할 때는 크기의 반전과 같은 생각지 못한 부분에서 예상과 다른 문제가 있었는데요. 이번 포스트는 그렇게 완성된 간단한 애니메이션인 바탕화면 마우스 드래그 애니메이션에 대해서 정리해보는 시간을 가져볼까 합니다. 아래는 시작전에 참고하시라고 준비된 완성된 코드 예시입니다. See the Pen 바탕화면 마우스 드래그 애니메이션 by youngwan2 (@youngwan2) on CodePen.">See the Pen.. HTML,CSS,JS + GSAP 로 만드는 버블 어택 애니메이션 버블 어택 애니메이션이란?여름철 물 대신에 거품이 나오는 장난감 총을 보고 영감을 받아서 제작한 애니메이션 입니다. 그래서 이름도 버블 어택 애니메이션이죠. 완성하게 된다면, 하단 영상처럼 거대한 장난감총이 마우스의 위치에 따라 각도를 조절하고, 클릭한 위치에 무수히 많은 거품이 날아가는 애니메이션을 볼 수 있습니다. HTMLsvg 는 커서 입니다. CSS* { margin: 0; padding: 0; box-sizing: border-box;}body { position: relative; overflow: hidden; background: #333; height: 100vh; width: 100%; dis.. JS와 GSAP stagger API 로 만드는 스트리밍 써클 애니메이션! 이전 애니메이션 | 스크롤 트리거 애니메이션 바닐라 자바스크립트를 이용한 스크롤 트리거 애니메이션의 원리와 구현이전 애니메이션 | 드래그 가능한 슬라이드 구현하기 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!!이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으duklook.tistory.com 들어가는 말최근에 데이터 패킷이 네트워크를 통해 스트리밍 되는 시뮬레이션 영상을 보게 되었고, 이에 영감을 받아서 제작하게 되었습니다. 동작원리해당 애니메이션의 동작 원리는 GSAP Stagger API 에 있습니다. Stagger API 는 애니메이션이 각 요소에 적용될 때, 요소와 요소 사이에 실행되는 간격을 두는 것으로 언뜻보면 애니메이션 delay 를 설정하는.. 바닐라 자바스크립트를 이용한 스크롤 트리거 애니메이션의 원리와 구현 이전 애니메이션 | 드래그 가능한 슬라이드 구현하기 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!!이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마duklook.tistory.com 스크롤 트리거오늘은 바닐라 자바스크립트를 이용하여 스크롤 트리거를 구현해보는 시간을 가져볼까 합니다. 보통 스크롤 트리거는 스크롤 애니메이션, 스크롤 트리거 애니메이션 등으로 불리는데요, 스크롤의 특정 위치 마다 서로 다른 동작이나 애니메이션, 트랜잭션을 실행하는 기법을 지칭합니다. 시작 전에 아래 영상을 통해서 스크롤 트리거가 어떻게 동작하는지 살.. 캐러셀 라이브러리에서 보던 드래그 가능한 슬라이드, 원리 부터 구현까지!! 이전 애니메이션 | 액자 모양 로고 애니메이션 HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터duklook.tistory.com 드래그 가능한 슬라이드보통 모바일 환경에서든 웹 환경에서든 사용자가 마우스나 패드를 이용해서 드래그를 하면 슬라이드가 따라 움직이는 것을 볼 수 있습니다. 오늘은 그 기능을 구현해보는 시간을 가져볼까 합니다. 아래는 구현된 예시인데요. 한 번 시작전에 어떻게 동작하는지 한 번 확인해보세요! 드래그 가능한 슬라이드의 원리일단, 기능을 구현하기 전에는 해당 기능이.. HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션 이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시duklook.tistory.com결과 미리보기이번 과정을 따라 하신다면, 아래와 같은 애니메이션을 구현하실 수 있습니다. 이번에 소개하는 액자 로고 애니메이션사실 해당 애니메이션의 이름을 별도로 정해진게 없습니다. 액자 형태의 로고 디자인이 박힌 티셔츠를 보게 되었는데, 거기서 영감을 받아 만들었기 때문이죠. 오늘은 해당 애니메이션을 어떻게 구현할 수 있는지 주석을 메인으로 설명을 첨부하고, 주요한 부분만 .. 이전 1 2 3 4 다음
