본문 바로가기

애니메이션6

[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 패럴럭스 이펙트 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 04 포스팅에서는 지난 패럴럭스 이펙트 1, 2, 3보다 더욱 자연스럽고 스무스하게 사진과 명언이 등장하도록 애니메이션을 줘 보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크.. 2022. 9. 18.

[CSS] SVG란? - 도형·애니메이션 만들기 SVG Animation 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 01. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 02. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 03. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 04. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형.. 2022. 9. 7.

[CSS] 애니메이션 종류와 사용 방법 총정리 CSS Animation CSS 애니메이션 종류와 예시 정리. animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을.. 2022. 9. 7.

[CSS] 공이 정신없이 튀는 애니메이션 만들기 공이 튀는 애니메이션 만들기⚽ 이번 포스팅에서는 공이 정신없이🤪🤪🤪 무한으로 튀는 애니메이션을 만들어보도록 하겠습니다. HTML 코드 CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; .. 2022. 9. 2.

[CSS] 정사각형이 회전하는 애니메이션 만들기 정사각형이 회전하는 애니메이션 만들기⬜ 이번 포스팅에서는 정사각형이 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 HTML 코드는 매우 간단하다. box 클래스값을 가진 div만 넣는다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(to top, goldenrod, darkkhaki) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; righ.. 2022. 8. 29.

[CSS] 원 2개가 시계방향으로 회전하는 애니메이션 만들기 원 2개가 돌아가는 애니메이션 만들기⚪ 이번 포스팅에서는 동그라미 2개가 시계방향으로 계속 돌아가는 간단한 애니메이션을 만들어보도록 하겠다. HTML 코드 loading 클래스값을 가진 div 안에 circle1, circle2 클래스값을 가진 span 태그 2개를 종속시킨다. CSS 코드 linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @keyframes 등을 잘 활용하여 애니메이션을 완성시킬 수 있다. body { height: 100vh; background-image: linear-gradient(-60deg, darkorchid 0%, lightpink 100%); } .loading { position: absolute; lef.. 2022. 8. 29.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바