UI 디자인 애니메이션 연구소 (24) 썸네일형 리스트형 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.. ✨AI도 그리다 포기하는 태극기, HTML과 CSS 로 제작하기 참고사항- 태극기 양은 (#d13642) 을 사용해야 하며, 음은 (#080884) 을 사용해야 합니다. 과정에는 음의 색상만 정확히 사용하고, 양의 색상은 임시 색상인 red 를 사용하고 있는데, 결과물에서는 정상적인 색상으로 설정되어 있습니다. 들어가는 말오늘 만들어볼 작품은 태극기 입니다. 1945년 8월 15 일 일본 제국의 패망으로 식민지로 벗어나 현재 대한민국은 눈부신 성장을 거쳐 지금과 같은 강국이 되었습니다. 오늘은 이 날을 맞이하여 나름의 광복절을 기념하며, 애국하는 마음으로 CSS 를 사용해 태극기를 만들어 보았습니다. 아래는 시연 영상입니다. 참고로 자바스크립트 부분은 설명하지 않았습니다. 만들고 정리하다보니 시간이 많이 지체되어서 생략하였습니다. 어려운 코드는 아니니 최하단.. 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결과 미리보기이번 과정을 따라 하신다면, 아래와 같은 애니메이션을 구현하실 수 있습니다. 이번에 소개하는 액자 로고 애니메이션사실 해당 애니메이션의 이름을 별도로 정해진게 없습니다. 액자 형태의 로고 디자인이 박힌 티셔츠를 보게 되었는데, 거기서 영감을 받아 만들었기 때문이죠. 오늘은 해당 애니메이션을 어떻게 구현할 수 있는지 주석을 메인으로 설명을 첨부하고, 주요한 부분만 .. 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션 이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인duklook.tistory.com결과물 미리보기단지 HTML 과 CSS 몇 스푼만 던져주면 구현해볼 수 있는 마키 UI, 같이 구현해 봅시다.여러 줄기로 꼬아보았는데, 실제 결과물은 2개 로 줄었습니다. 이번에 구현해볼 친구는?오늘 인프런의 INFCON 을 소개하는 렌딩 페이지에서 아래와 같이 무한으로 흐르는 UI 를 볼 수 있었습니다. 왠지 구현해보면 재밌을 것 같아서, 이 친구가 동작.. 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지 이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을duklook.tistory.com 들어가기 전 | 포스트 작성 방식 변경 합니다.오늘 부터 UI 디자인 애니메이션 연구소 라는 카테고리 타이틀에 맞게 포스트를 작성하는 방식을 바꿔볼까 합니다. Codepen 을 이용해서 여러 가지를 시도하다보니, 나중에 포스트에 작성할 때는 작성한 코드를 일일이 설명하는 방식이 되었고, 게시글의 목적과는 다른 방향으로 적어왔던 것 같습니다. 그래서 2024.06.25 부터는 새로운 방식으.. 이전 1 2 3 다음
