UI 디자인 애니메이션 연구소 (25) 썸네일형 리스트형 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지 이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을duklook.tistory.com 들어가기 전 | 포스트 작성 방식 변경 합니다.오늘 부터 UI 디자인 애니메이션 연구소 라는 카테고리 타이틀에 맞게 포스트를 작성하는 방식을 바꿔볼까 합니다. Codepen 을 이용해서 여러 가지를 시도하다보니, 나중에 포스트에 작성할 때는 작성한 코드를 일일이 설명하는 방식이 되었고, 게시글의 목적과는 다른 방향으로 적어왔던 것 같습니다. 그래서 2024.06.25 부터는 새로운 방식으.. HTML, CSS 로 불타는 입력창(Input) 만들기 미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을 위치시켜 줍니다. 또한 input 의 경우 속성으로 required 를 지정해 줍니다. 유효성 검사를 통과하는 경우 input:valid { 속성들 } 로 지정한 속성들이 유지되도록 해주기 위해서 꼭 필요한 속성입니다. 아이디 비밀번호 CSSCSS 초기화해당 부분은 불필요한 기본 CSS 속성을 제거하는 부분입니다. input 의 경우에는 기본 border 의 색상을 gray 로 설정하기 위해 border: 1px s.. HTML/CSS/JS 를 이용한 스트리밍효과 토글 UI 만들기 이전 애니메이션 CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작[이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3Dduklook.tistory.com 미리보기이번 과정을 따라오시면 아래와 같이 스트리밍 되는 듯한 토글 애니메이션을 구현하실 수 있게 됩니다. HTML마크업은 크게 추가할 것은 없습니다. 아래와 같이 두 가지 요소만 만들어주면 됩니다. 나중에 box 태그 내부에 스트리밍 효과의 span 태그를 추가할 예정입니다. CSSCSS 기본 여백 제거우선 브라우저에 기본 적용된 여백을 제거하고, 콘텐츠의 길이와 높이를 계산 시 margi.. CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작 [이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다. 부연설명을 해보자면, 3D 효duklook.tistory.com 미리보기해당 과정을 따라오시면 아래와 같은 놀라운 자석 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다. 이번에 자바스크립트에서 투자되는 코드가 비중이 큰 편입니다. 요소를 동적으로 생성하고, 생성된 각 요소에 각도 변환을 이용한 자석 효과를 표현하기 위한 조치가 필요하기 때문입니다. [버전1] gap 과 자석의 수를 적당히 [버전2] 빼곡한 버전, 웅장함을 느낄 .. HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기 미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다. 부연설명을 해보자면, 3D 효과를 적용하고, 카드의 중심축이 되어 실제 회전 효과를 구현하는데 사용되는 .container 요소와 각 카드를 표현하는 .card 요소들을 만들어줍니다. 그리고, 각 카드의 각도를 계산하는데 사용할 CSS 변수인 --i 에 각각 1 ~ 8 까지 값들을 순서대로 할당해 줍니다. CSSCSS 초기화 및 초기 설정이번에는 기초 셋팅으로 기본설정된 값을 초기화하고, container 요소를 수직-수평으로 중앙정렬 해보겠습니다.* { margin:0; padding:0; box-s.. HTML,CSS,JS 로 간단한 무한 슬라이드 만들기 3탄 이전 애니메니션 ※ 이 부분은 작성 예정입니다(사정상 순서가 뒤로 미뤄졌습니다.) HTML/CSS/JS 로 초간단 무한 슬라이드 갤러리 만들기 [2탄] (1탄 이후 작성예정)이전 애니메이션 | 1탄(작성중) HTML+CSS+JS로 초간단 무한 슬라이드 만들기 [1탄] (작성예정) duklook.tistory.com 미리보기HTMLCSSJSduklook.tistory.com 미리 보기이번에 구현하는 애니메이션은 이전 시간에 이어서 무한 슬라이드 입니다. 이전과 다른 점이 있다면, 이전 방식은 첫 번째 슬라이드의 이미지를 확대하는 방식이었다면, 이번 슬라이드는 가운데 슬라이드 카드를 기준으로 게단식으로 깊이감이 생기는 애니메이션 입니다. 진짜 별거 없으니 잠깐 시간내셔서 알고 가세요. 분명 쓰이는 곳이 많을.. HTML+CSS+JS로 초간단 무한 슬라이드 만들기 [1탄] 이전 애니메이션 HTML+CSS+JS 를 이용한 써클 프로그래스 애니메이션을 만들어 봅시다이전 애니메이션 CSS +JS 를 이용한 톡톡 튀는 폭죽(스파크) 애니메이션 만들기이전 애니메이션 | 로딩 스피너 HTML/CSS 를 이용한 로딩 스피너 만들기3탄 | 마우스 호버 시 따라다니는 언더라인 만duklook.tistory.com 미리보기이번에 만들 슬라이드의 핵심은 첫 번째 자리에 오는 슬라이드가 확대 되면서 커다란 영역을 차지하도록 해주는 겁니다. 그리고 슬라이드1 부터 4 까지 진행 후 다시 1로 돌아갈 때, 자연스럽게 다시 슬라이드 4에서 슬라이드 1로 이어지도록 해주는 것이 포인트 입니다. HTML우선 마크업은 다음과 같이 해줍니다. 각 .item 이 부여한 div 태그가 슬라이드1~5 까지 총 .. HTML+CSS+JS 를 이용한 써클 프로그래스 애니메이션을 만들어 봅시다 이전 애니메이션 CSS +JS 를 이용한 톡톡 튀는 폭죽(스파크) 애니메이션 만들기이전 애니메이션 | 로딩 스피너 HTML/CSS 를 이용한 로딩 스피너 만들기3탄 | 마우스 호버 시 따라다니는 언더라인 만들기 바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)2탄 | HTML/CSS 만duklook.tistory.com 미리보기이 포스트를 따라오시면 아래와 같은 프로그래스 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다. HTML우선 마크업을 만들어 줍니다. 필요한 마크업은 프로그래스의 트리거 역할을 하는 button 과 프로그래스 역할을 하는 div, span 이 필요 합니다. 크게 건드릴 부분은 없으므로 이대로 적어 줍니다.충전하기 0% CSSCSS 초기화CSS 에서는.. 이전 1 2 3 4 다음
