전체 글 (397) 썸네일형 리스트형 CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작 [이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다. 부연설명을 해보자면, 3D 효duklook.tistory.com 미리보기해당 과정을 따라오시면 아래와 같은 놀라운 자석 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다. 이번에 자바스크립트에서 투자되는 코드가 비중이 큰 편입니다. 요소를 동적으로 생성하고, 생성된 각 요소에 각도 변환을 이용한 자석 효과를 표현하기 위한 조치가 필요하기 때문입니다. [버전1] gap 과 자석의 수를 적당히 [버전2] 빼곡한 버전, 웅장함을 느낄 .. [푸드피커] 기능 구현 정리본 오늘의 명언 들어가기 전프로젝트를 진행하면서 구현한 기능들을 향후 재참고 하기 위한 혹은 포트폴리오를 위해 정리해두는 모음 형식의 포스트 입니다. 해당 기능 구현 목록은 2024.05.24 ~ 이후로 재개발에 들어가면서 변경된 혹은 추가된 로직에 대한 구현을 담고 있습니다. 참고로, 사용된 코드는 실제 프로젝트 코드와는 차이가 있을 수 있습니다. 해당 기능들이 프로젝트에서 구현된 모든 기능을 대변하지는 않습니다. 혹시나 이 글을 참고하시는 분이 있으시다면, 이러한 방식으로 작성하기도 하는구나 용도로 보시면 좋을 것 같습니다. 최대한 신경써서 작성하지만 제가 아는 수준에서 작성되는 만큼 코드의 퀄리티는 장담하지 못 합니다. 따라서 사용하시는 부분이 있다면, 직접 검증하셔서 필요한 부분만 재사용해도 좋을 것.. 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 에서는.. 리액트의 다양한 활용 팁을 정리하였습니다. 모르셨다면 하나 알아가세요. 해당 포스트는..해당 포스트는 리액트를 사용하면서 알게된 팁이나 주요하다고 판단되는 활용 예제를 만들어 정리 후 모아두는 공간입니다. 참고한 자료가 있으면 하단의 참고문헌에 모아둘 예정입니다. 해당 포스트는 추가되는 내용이 있으면 관리 효율성을 위해 그 날을 기준으로 갱신되어 업로드 됩니다. 동적으로 래퍼 컴포넌트를 생성하는 팁보통 재사용성을 높이기 위한 방식으로 Card 와 같은 컴포넌트를 만듭니다. Card 컴포넌트의 래퍼가 되는 태그는 ul 이 될 수도 있고, div 가 될수도 있고, article 이 될 수도 있죠. 그런데 이러한 경우에는 정적이기 때문에, 개발자가 직접 해당 컴포넌트에 들어가서 수정하지 않는 이상은 불변한 상태에 있게 됩니다. 하지만, 리액트는 한 가지 특별한 동작이 있습니다.. 자바스크립트 활용 모음집 해당 포스트는..자바스크립트 활용을 위한 간단한 예제를 정리해두는 모음집입니다. 필요에 따라 추가될 수 있고, 추가되는 경우 해당 날짜를 기준으로 갱신됩니다. 이미지 미리보기 기능을 구현하는 방법 FileReader 객체를 사용하여 이미지 미리보기FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. 참고로, File 객체는 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() AP.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 50 다음
