본문 바로가기
디자인/HTML, CSS, JS

CSS 애니메이션 18가지 예제

by 코코리★ 2019. 1. 2.
728x90

최근에 점점 더 많은 CSS 애니메이션 예제가 웹 사이트에 게재되고 있음을 눈치 챘을 것입니다 . 애니메이션은 올해 웹의 주요 트렌드였으며 아무데도가는 흔적을 보이지 않고 있습니다. 웹 전반에서 디자이너는 창의력을 발휘하고 CSS 애니메이션을 사용하여 사이트에 개성을 부여하고 복잡한 아이디어를 손쉽게 캡처하며 사용자의 행동을 미묘하게 안내합니다.

여기서 가장 중요한 규칙은 CSS 애니메이션이 지나치게 강조되어서는 안되며 미묘한 움직임조차도 큰 영향을 미칠 수 있으며 너무 많은 경우 사용자를 혼란스럽게하거나 자극적으로 만들 수 있습니다. 온라인에서 볼 수있는 최고의 애니메이션은 여전히 ​​디즈니의 고전 12 애니메이션 원칙에 뿌리를두고 있습니다. 

여기서는 전 세계 웹 사이트에서 가장 우수한 CSS 애니메이션 예제를 선택하고 코드를 파헤 치어 이러한 효과를 직접 얻는 방법을 보여줍니다. 이 페이지는 심층적 인 튜토리얼을 제공합니다 . 2 번 에서 2 번 까지 클릭 하면 깊은 경험을 할 수있는 흥미로운 효과와 코드로 연결됩니다.

CSS 애니메이션이란 무엇입니까?

CSS 애니메이션은 프로세서 및 메모리가 부족한 JavaScript 또는 Flash를 사용하지 않고도 특정 HTML 요소에 애니메이션을 적용하는 방법입니다. 변경할 수있는 CSS 속성의 수 또는 빈도에는 제한이 없습니다. CSS 애니메이션은 애니메이션의 키 프레임을 지정하여 시작됩니다.이 키 프레임에는 요소에 적용될 스타일이 포함되어 있습니다.

01. 거품 불기

7UP 기능을 갖춘 CSS 버블 애니메이션은 브랜드 테마를 웹 사이트 디자인으로 전달하는 아름다운 예입니다. 애니메이션은 몇 가지 요소로 구성됩니다. 하나는 거품의 SVG '드로잉'이고 두 번째 애니메이션은 각 거품에 적용됩니다. 

첫 번째 애니메이션은 거품의 불투명도를 변경하고 뷰 상자에서 세로로 이동합니다. 두 번째는 사실감을 더하기 위해 흔들 흔들 효과를 만듭니다. 오프셋은 각 버블을 대상으로하고 다른 애니메이션 지속 시간과 지연을 적용하여 처리됩니다.

우리 거품을 만들기 위해서 우리는 SVG를 사용할 것 입니다. SVG에서 우리는 두 개의 거품 층을 만듭니다. 하나는 큰 거품을위한 것이고 다른 하나는 작은 거품을위한 것입니다. SVG 내부에서 뷰 박스의 아래쪽에 모든 거품을 배치합니다.


<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

변환 속성을 사용하는 SVG에 두 개의 개별 애니메이션을 적용하려면 애니메이션을 개별 요소에 적용해야합니다. SVG 의 <g> 요소는 HTML의 div처럼 많이 사용될 수 있습니다. 우리는 그룹 태그 안에 이미 그룹에있는 각 거품을 싸야합니다.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS에는 복잡한 애니메이션을 제작하기위한 강력한 애니메이션 엔진과 간단한 코드가 있습니다. 먼저 애니메이션의 시작과 끝에서 애니메이션을 페이드 아웃하기 위해 화면 위로 거품을 이동하고 불투명도를 변경하는 것으로 시작합니다.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

흔들 리는 효과를 내기 위해서는 거품을 좌우로 움직여야합니다. 너무 많으면 애니메이션이 너무 조그만하게 보이거나 연결이 끊어지는 현상이 발생하는 반면 너무 적 으면 거의 눈에 띄지 않게됩니다. 실험은 애니메이션 작업시 중요합니다.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

우리의 거품에 애니메이션을 적용하기 위해 이전에 사용한 그룹과 n 번째 유형 의 도움을 받아 각 거품 그룹을 개별적으로 식별합니다. 우리는 거품과에 불투명도 값 적용하여 시작하는 의지 변화 하드웨어 가속을 사용하기 위해 속성을.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

우리는 애니메이션 시간과 지연을 서로 몇 초 내에 유지하고 무한히 반복하도록 설정하려고합니다. 마지막으로 우리는 흔들림 애니메이션에 ease-in-out 타이밍 기능을 적용하여 좀 더 자연스러워 보입니다.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

02. 스크롤링 마우스

미묘한 스크롤 마우스 애니메이션은 사용자가 처음 웹 사이트를 방문했을 때 사용자에게 방향을 제시 할 수 있습니다. 이 작업은 HTML 요소와 속성을 사용하여 수행 할 수 있지만 SVG를 사용하기 때문에 드로잉에 더 적합합니다.

SVG 안에는 모서리가 둥근 직사각형이 필요하고 애니메이션을 적용 할 요소에 원이 있어야합니다. SVG를 사용하여 아이콘을 필요한 크기로 확장 할 수 있습니다.

<svg class="mouse" xmlns="..." viewBox="0 0 76 130" preserveAspectRatio="xMidYmid meet">
  <g fill="none" fill-rule="evenodd">
  <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
  <circle cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
  </g>
</svg>

이제는 SVG를 만들었습니다. 우리 컨테이너에서 아이콘의 크기와 위치를 제어하기 위해 간단한 스타일을 적용해야합니다. 우리는 마우스 SVG 주위에 링크를 감싸서 화면 하단에 위치 시켰습니다.

.scroll-link {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;
}

다음으로 애니메이션을 만듭니다. 우리 애니메이션을 통해 0과 20 퍼센트가 진행될 때 우리는 요소의 상태를 시작으로 설정하려고합니다. 끝까지 20 %로 설정하면 무한 반복되는 시간의 일부분 동안 계속 유지됩니다.

@keyframes scroll {
  0%, 20% {
  transform: translateY(0) scaleY(1);
  }
}

불투명도 시작점을 추가 한 다음 애니메이션의 끝인 100 % 표시에서 Y 위치와 수직 스케일을 모두 변환해야합니다. 우리가해야 할 마지막 일은 우리의 원을 페이드 아웃하기 위해 불투명도를 떨어 뜨리는 것입니다.

@keyframes scroll {
  ...
  10% {
  opacity: 1;
  }
  100% {
  transform: translateY(36px) scaleY(2);
  opacity: 0.01;
  }
}

마지막으로 'transform-origin'속성과 will-change 속성을 사용 하여 애니메이션을 원에 적용하여 하드웨어 가속을 허용합니다. 애니메이션 속성은 매우 자명합니다. 큐빅 베 지어 타이밍 함수는 최초로 우리 마우스 형상의 바닥으로 낙하 전에 원을 추출하는 데 사용된다; 애니메이션에 장난기있는 느낌을 더합니다.

.scroll {
  animation-name: scroll;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

03. 애니메이션 작문

CSS 애니메이션 : 글쓰기

클릭하면 실제 애니메이션보기

Garden Eight 웹 사이트는 텍스트가 쓰여지는 것처럼 보이는 일반적인 애니메이션 기술을 사용합니다. 이 효과를 얻으려면 SVG를 사용해야합니다. 먼저 SVG를 생성합니다. 여기에는 텍스트를 경로로 변환하여 애니메이션을 적용하거나 SVG 텍스트를 사용하는 두 가지 방법이 있습니다. 두 접근법 모두 장단점이 있습니다.

먼저 키 프레임 애니메이션을 만듭니다. 수행 할 수있는 유일한 기능은 획 대시 오프셋을 변경하는 것 입니다. 이제 애니메이션을 만들었으므로 애니메이션을 적용 할 값을 적용해야합니다. 우리는 설정 뇌졸중 dasharray 스트로크에서 차이를 만들 것입니다. 스트로크를 전체 요소를 포괄하는 충분히 큰 값으로 설정하여 마침내 획의 길이만큼 대시를 상쇄하려고합니다.

우리의 애니메이션을 적용 할 때 마술이 발생합니다. 오프셋을 애니메이션 처리하여 스트로크를 뷰에 가져 와서 드로잉 효과를 만듭니다. 한 요소를 그리는 끝과 다음 요소를 그리는 시작 사이에 일부 겹치는 부분을 포함하여 요소를 한 번에 하나씩 그립니다. 이것을 달성하기 위해 Sass / SCSS와 nth-of-type 을 사용하여 각 문자를 애니메이션 길이의 절반만큼 지연시키고 해당 문자의 위치를 ​​곱합니다.

04. 날아 다니는 새들

완전히 직선 인 벡터 선으로 시작하여 애니메이션의 각 프레임을 그리며 다른 비행 상태의 새를 묘사합니다. 그런 다음 벡터 점을 조작하고 선과 모서리를 반올림합니다. 마지막으로 각 프레임을 동일한 크기의 상자에 넣고 나란히 배치합니다. 파일을 SVG로 내 보냅니다.

HTML 설정은 정말 간단합니다. 새를 날아 다니고 다른 하나는 화면을 가로 질러 움직이게하는 여러 애니메이션을 적용하기 위해 각 새를 컨테이너에 넣기 만하면됩니다.

<div class="bird-container">
  <div class="bird"></div>
</div>

우리는 우리의 조류 SVG를 조류 div의 배경으로 적용하고 각 프레임이 원하는 크기를 선택합니다. 새 배경 위치를 대략적으로 계산하기 위해 너비를 사용합니다. SVG에는 10 개의 셀이 있으므로 우리는 너비에 10을 곱한 다음 올바른 것으로 나타날 때까지 숫자를 약간 변경합니다.

.bird {
  background-image: url('bird.svg');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
}
@keyframes fly-cycle {
  100% {
  background-position: -900px 0;
  } 
}

CSS 애니메이션에는 사용자가 모르는 몇 가지 트릭이 있습니다. 애니메이션 타이밍 기능 을 사용하여 이미지를 단계별로 표시 할 수 있습니다. 이는 노트북의 페이지를 통해 애니메이션을 암시하는 것과 같습니다.

animation-name: fly-cycle;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: -0.5s;

이제 우리는 비행 사이클을 만들었습니다. 우리의 새는 현재 날개를 치고 있지만 어디에도 가지 않습니다. 화면에서 그녀를 움직이게하기 위해 또 다른 키 프레임 애니메이션을 만듭니다. 이 애니메이션은 수직 위치와 스케일을 변경하면서 새가 스크린을 가로 질러 수평으로 움직이면서 새가 더 현실적으로 사행하게합니다.

애니메이션을 만든 후에는 애니메이션을 적용하기 만하면됩니다. 새의 복사본을 여러 개 만들고 서로 다른 애니메이션 시간과 지연을 적용 할 수 있습니다. 

.bird--one {
  animation-duration: 1s;
  animation-delay: -0.5s;
}
.bird--two {
  animation-duration: 0.9s;
  animation-delay: -0.75s;
}

05. 내 햄버거 건너기.

이 애니메이션은 세 줄을 교차 또는 닫기 아이콘으로 바꾸면서 웹 전체에서 사용됩니다. 비교적 최근까지 HTML 요소를 사용하여 대부분의 구현이 이루어졌지만 사실 SVG는 이러한 종류의 애니메이션에 훨씬 더 적합합니다. 더 이상 버튼 코드를 여러 범위로 늘릴 필요가 없습니다. 

애니메이션이 가능한 특성과 SVG 및 탐색 가능한 DOM으로 인해 애니메이션 또는 전환을 수행하는 코드는 거의 변경되지 않습니다. 기술은 동일합니다. 

먼저 SVG 내부의 div 나 경로 내부에 4 개의 요소를 만들어야합니다. 스팬을 사용하는 경우 div를 div에 배치하려면 CSS를 사용해야합니다. 우리가 SVG를 사용한다면, 이미 처리되고 있습니다. 우리는 라인 2와 3을 중심에 위치 시키려고합니다. 하나는 다른 하나가 위를 향하게하고 1과 4는 위아래로 균등하게 간격을두고 변환 원점을 중심에 두도록합니다.

우리는 불투명도와 회전이라는 두 가지 속성을 전환하는 것에 의존 할 것입니다. 우선, 우리는 : nth-child selector를 사용하여 목표로 할 수있는 1 번과 4 번 선을 페이드 아웃 (fade out)하려고합니다 .

.menu-icon.is-active {element-type}:nth-child(1),
.menu-icon.is-active {element-type}:nth-child(4) {
  opacity: 0; }

남은 유일한 작업은 두 중간 선을 대상으로하고 반대 방향으로 45도 회전시킵니다.

.menu-icon.is-active {element-type}:nth-child(2) {
  transform: rotate(45deg); }
.menu-icon.is-active {element-type}:nth-child(3) {
transform: rotate(-45deg); }

06. 체이스 서클

애니메이션로드 아이콘은 네 개의 원으로 구성됩니다. 원에는 채우기가 없지만 획 색상이 번갈아 표시됩니다.

<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
  <circle cx="170" cy="170" r="160" stroke="#E2007C"/>
  <circle cx="170" cy="170" r="135" stroke="#404041"/>
  <circle cx="170" cy="170" r="110" stroke="#E2007C"/>
  <circle cx="170" cy="170" r="85" stroke="#404041"/>
</svg>

CSS에서는 모든 서클에 기본 속성을 설정 한 다음 : nth-of-type selector를 사용 하여 각 원에 다른 획 - 대시 배열 을 적용 할 수 있습니다 .

circle:nth-of-type(1) {
  stroke-dasharray: 550; 
}
circle:nth-of-type(2) {
  stroke-dasharray: 500; 
}
circle:nth-of-type(3) {
  stroke-dasharray: 450;}
circle:nth-of-type(4) {
  stroke-dasharray: 300; 
}

다음으로 키 프레임 애니메이션을 만들어야합니다. 우리의 애니메이션은 정말 간단합니다. 우리가해야 할 일은 원을 360도 회전시키는 것뿐입니다. 애니메이션의 50 % 표시에서 변형을 배치하면 원이 원래 위치로 다시 회전합니다.

@keyframes preloader {
  50% {
  transform: rotate(360deg);
  } 
}

우리의 애니메이션을 만들었으니 지금 우리 서클에 적용하면됩니다. 애니메이션 이름을 설정합니다. 지속; 반복 횟수 및 타이밍 기능. 'ease-in-out'은 애니메이션에 더 재미있는 느낌을줍니다. 

animation-name: preloader;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

현재 로더가 있지만 모든 요소가 동시에 회전합니다. 이 문제를 해결하기 위해 일부 지연이 적용됩니다. Sass for 루프를 사용하여 딜레이를 생성합니다.

@for $i from 1 through 4 {
  &:nth-of-type(#{$i}) {
  animation-delay: #{$i * 0.15}s;
} }

지연으로 인해 이제 우리의 원이 차례로 움직이며 서클이 서로 쫓는 환상을 만듭니다. 이것에 대한 유일한 문제는 페이지가 처음으로로드 될 때 서클이 정적이어서 한 번에 하나씩 이동하기 시작한다는 것입니다. 동일한 오프셋 효과를 얻을 수 있지만 지연을 음의 값으로 설정하여 애니메이션에서 원하지 않는 일시 중지를 중지하십시오.

animation-delay: -#{$i * 0.15}s;

07. 레트로 클릭 아코디언

벨기에의 인터페이스 디자이너이자 CSS 트릭스터 인 Benjamin de Cock은 CSS3의 힘을 사용하여 애니메이션 중심의 자동 클릭 가능한 아코디언을 만드는 방법을 보여줍니다.

이 아코디언에 대해 간단한 HTML5 코드를 사용하겠습니다. 기본적으로 아코디언의 각 섹션은 섹션 요소 (이해가 안되니?)이며 제목과 단락을 포함합니다.

<div>
<section>
<h1>Introduction</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>General information</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<h1>Contact us</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>

아이디어는 자신에게 연결되는 앵커에 섹션 제목을 래핑하는 것입니다. 이후 : target을 사용하면 대상 요소를 선택할 수 있으며 인접한 형제 선택 도구를 사용하여 그 뒤에 오는 요소를 선택할 수도 있습니다. 해보자. 다음은 수정 된 HTML 마크 업입니다.

<div>
<section>
<a href="#intro" id="intro">
<h1>Introduction</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#info" id="info">
<h1>General information</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
<section>
<a href="#contact" id="contact">
<h1>Contact us</h1>
</a>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</div>

첫 번째 토글 동작을 얻는 데 매우 간단한 CSS가 있습니다.

p {
display:none;
}
:target + p {
display:block;
}

나는 아코디언을 수평과 수직으로 중심에 두어 시작할 것입니다. flexbox 모델은 차원을 지정하지 않고 블록의 중심 (항상 : 페이지)에 요소를 항상 표시 할 수 있으므로 이러한 종류의 효과를위한 완벽한 위치 지정 방법입니다. 이 튜토리얼에서는 표준 표기법을 사용 하겠지만 최종 코드에서 공급 업체 접두사를 사용하는 것을 잊지 마십시오.

* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
/* For Firefox */ width:100%;
}
div {
width:250px;
}

중심이지만 시각적으로는 여전히 끔찍합니다. 더 많은 CSS 섹시 함 추가하기 :

body {
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
}
div {
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}

우와! 그것은 지금까지 기능적이고 섹시한 모두를 찾고 있습니다. 내 요구 사항에 관해서, 나는 거의 다 왔어. 실제로 애니메이션 부분을 놓치고 있습니다. 나쁜 소식 : 전환을 추가하는 것은 쉽지 않습니다.

주된 문제는 디스플레이와 같은 속성에서 전환을 수행 할 수 없다는 것이므로 숫자 값을 사용해야합니다. 따라서 display를 사용하여 섹션을 숨기고 표시하는 대신 height 속성을 사용하여 0에서 콘텐츠 높이로 전환합니다.

두 번째 나쁜 소식 : 현재 숫자 값과 "자동"사이의 전환을 수행 할 수 없습니다. 즉, 각 섹션의 높이를 수동으로 지정해야합니다. 내가 알 수있는 한, 이것은 W3C가 알고 있으며 가능한 것이어야한다는 것에 동의합니다. 브라우저 공급 업체가이를 구현하기를 바랍니다. 도움이 될 것입니다. 다음은 최종 코드입니다.

* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
display:box;
box-orient:vertical;
box-pack:center;
box-align:center;
font:.7em/1.5 "lucida grande", arial, sans-serif;
background:#f3faff;
/* For Firefox */ width:100%;
}
div {
width:250px;
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,.3);
}
p {
height:0;
padding:0 15px;
overflow:hidden;
transition:height .4s ease-out, padding .4s ease-out;
}
h1 {
font-size:1em;
}
a {
display:block;
height:23px;
line-height:23px;
background:linear-gradient(#eee, #ccc);
color:#333;
text-decoration:none;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.5);
border-bottom:1px solid #aaa;
}
#intro {
border-radius:2px 2px 0 0;
}
#contact {
border-radius:0 0 3px 3px;
}
a:hover, a:focus {
opacity:.9;
}
a:active {
background:linear-gradient(#ccc, #ddd);
color:#000;
}
:target + p {
padding:10px 15px;
border-bottom:1px solid #ccc;
}
#intro:target + p {
height:70px;
}
#info:target + p {
height:230px;
}
#contact:target {
border-radius:0;
}
#contact:target + p {
height:180px;
}




08. 떨어지는 눈

눈은 SVG를 사용하여 만들어지며 기술은 우리가 이전에 거품을 만든 방식과 매우 유사합니다. 시작하려면 SVG 안에 두 개의 원을 만들고 그 다음에 Y 값을 키 프레임 애니메이션으로 변환하여 두 레이어를 애니메이션으로 만듭니다. 

개별 요소 대신 각 레이어에 애니메이션을 적용하고 두 레이어에 동일한 애니메이션을 재사용합니다. 서로 다른 시간을 주기만하면 장면에 깊이를 더할 수 있습니다.

09. 배경 이동

웹 사이트 폭력 법 (Violent Act)은 마스킹과 미묘한 움직임을 사용하여 사용자의주의를 끌고 있습니다. 대부분의 작업은 SVG를 설정하고 만드는 과정에 있습니다.

10. 다채로운 전환

DaInk 웹 사이트는 페이지 사이를 전환하는 데 정말로 효과적인 기술을 사용합니다. 전환은 간단하며 다른 색상의 서로 다른 크기의 직사각형을 여러 개 포함하는 SVG로 구성됩니다. 

애니메이션은 X 위치를 SVG의 너비로 변환하는 것으로 구성됩니다. 그런 다음 nth-of-type을 사용하여 지연을 적용하여 마지막부터 75ms 씩 오프셋하여 부드러운 전환을 만듭니다.

11. 무작위로 나타나는 글자들

Jam3 은 자바 스크립트와 CSS를 사용하여 사이트 Nuclear Dissent에서 전체 화면 비디오 배경에 대한 애니메이션 콘텐츠 오버레이를 만들었습니다. 


이 CSS 애니메이션을 복사하려면 먼저 HTML 문서의 구조를 초기화해야합니다. 이것은 헤드 섹션과 바디 섹션을 저장하는 문서 컨테이너로 구성됩니다. 헤드 섹션이 외부 CSS 및 JavaScript 리소스를로드하는 데 사용되는 동안 본문에는 다음 단계에서 생성 된 표시 페이지 콘텐츠가 포함됩니다.

포 그라운드 페이지 컨텐트는 컨텐트 플로우를 쉽게 제어 할 수있는 이점을 제공하기 위해 주 컨테이너 내에 배치됩니다 . 텍스트 요소에는 오버레이 클래스가 적용되어 텍스트 애니메이션을 적용하기 위해 JavaScript 및 CSS에서 참조 할 수 있습니다. 여러 요소는 오버레이 클래스 를 사용하여 애니메이션을 적용 할 수 있습니다 .

<main>
<h2 class="overlay">
  This is a story all about how...
</h2>
</main>

HTML의 마지막 부분은 배경 비디오 요소를 정의하는 것입니다. 모든 브라우저가 각 비디오 표준을 지원할 수있는 것은 아니므로 다른 소스를 지정할 필요가 없습니다. 브라우저는 지원할 수있는 첫 번째 소스를 표시합니다. 동영상 요소에 자동 재생 , 음소거 및 루프 속성이 적용되어 사운드없이 자동으로 재생되고 반복되도록하는 방법을 기록해 둡니다 .

<video autoplay muted loop>
	<source src="http://techslides.com/ 
demos/sample-videos/small.webm" type="video/
webm" />
	<source src="http://techslides.com/
demos/sample-videos/small.mp4" type="video/
mp4" />
	<source src="http://techslides.com/
demos/sample-videos/small.ogv" type="video/
ogg" />
	<source src="http://techslides.com/
demos/sample-videos/small.3gp" type="video/3gp" 
/>
</video>

styles.css 라는 새 파일을 만듭니다 . 이 파일의 첫 번째 단계는 주 콘텐츠 컨테이너 의 속성을 정의하는 것 입니다. 글꼴 및 색상의 기본 설정은 상속 할 하위 내용에 적용됩니다. 자동 값은 하위 여백에 적용되므로 하위 내용이 중앙 정렬됩니다.

main {
	font-family: Helvetica, sans-serif;
	color: #fff;
	padding: 2em;
	width: 75%;
	min-height: 100vh;
	margin: 0 auto 0 auto; }

배경 요소는 효과가 작동하도록 특정 스타일을 필요로합니다. 첫째, 고정 된 위치 지정은 사용자가 페이지를 스크롤 할 때 동일한 위치에 있도록 보장하는 것이 중요합니다. 둘째, 메인 페이지 내용 아래에서의 위치를 ​​보장 하는 음의 z- 인덱스 를 사용해야합니다 . 변환 및 크기 는 전체 페이지 창을 포함하도록 요소의 크기와 위치를 설정하는데도 사용됩니다.

video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	z-index: -9999;
	transform: translateX(-50%) 
translateY(-50%);
	background: #000; }

오버레이 요소는 span 태그에 의해 포장되는 자사의 텍스트 내용의 각 문자를 분할 자바 스크립트에 의해 조작됩니다. CSS를 통해 개별 문자를 애니메이션으로 표시 할 수 있습니다. 첫째, 스팬 문자 의 기본 설정 은 상대적 위치 지정, 보이지 않는 불투명도 및 적용된 animateOverlay 애니메이션 을 갖도록 정의됩니다 . 둘째, 자녀의 위치에 따라 애니메이션 지연이 적용됩니다.

.overlay span{
	position: relative;
	opacity: 0;
	top: 1em;
	animation: animateOverlay 1s ease-in-
out forwards;
}
.overlay span:nth-child(4n) { animation-delay: 
0s; }
.overlay span:nth-child(4n+1) { animation-
delay: 1s; }
.overlay span:nth-child(4n+3) { animation-
delay: 2s; }
.overlay span:nth-child(4n+2) { animation-
delay: 3s; }

각 스팬 요소에 적용된 애니메이션은 요소가 애니메이션을 생성하는 하나의 프레임으로 구성됩니다. 이렇게하면 불투명도가 완전히 표시되고 세로 위치가 기본 텍스트 흐름 위치로 움직 이도록 설정됩니다. 6 단계가 각 스팬 요소를 1em만큼 아래로 밀어 넣는 방법을 기록하십시오.

@keyframes animateOverlay {
  to {
opacity: 1;
top: 0;
} }

code.js 라는 새 파일을 만듭니다 . 이 첫 번째 단계에서는 오버레이 클래스를 사용하여 모든 요소를 ​​검색합니다. 그 중 for 루프는 나중에 코드를 적용하는 데 사용됩니다. 이러한 요소는 페이지가로드 될 때까지 사용할 수 없으므로 브라우저 창에서로드 완료시 트리거되는 이벤트 수신기 내부에 배치해야합니다.

indow.addEventListener("load", function(){
	var nodes = document.
querySelectorAll(".overlay");
	for(var i=0; i<nodes.length; i++){
	} 
});

여기에있는 각 요소는 HTML 내용이 다시 정의되어야하므로 각 문자가 span 요소 안에 있습니다. 이는 innerText를 사용하여 일반 텍스트를 읽은 다음 두 번째 for 루프를 사용하여 각 문자를 HTML의 새 버전에 개별적으로 추가합니다 (span 태그 내에서 완료 됨). 각 글자를 읽은 후, 부모 노드의 innerHTML 이 새 HTML로 업데이트됩니다.

var words = nodes[i].innerText;
var html = "";
for(var i2=0; i2<words.length; i2++){
	if(words[i2] == " ")html += 
words[i2];
		else html += 
"<span>"+words[i2]+"</span>"
}
nodes[i].innerHTML = html;

12. 펄싱 서클

Peek-a-Beat 웹 사이트에서 사용되는 펄스 애니메이션은 간단하지만 효과적이며 재현하기가 어렵지 않습니다. SVG 안에는 세 개의 원으로 구성되어 있습니다. 단순히 크기와 불투명도를 애니메이션으로 처리합니다.

13. 강조 표시

이것은 매우 간단하면서도 효과적인 기술입니다. 전환은 :: before 의사 요소를 사용하여 수행됩니다 . 우선 pseudo 요소는 전체 너비에 걸쳐 있지만 높이가 몇 픽셀에 불과하면서 하단에 배치됩니다. 

요소가 상호 작용할 때 의사 요소의 너비와 높이가 텍스트의 색상을 전환 할뿐만 아니라 부모 크기의 105 %로 변경됩니다 (변경 사항이 수직 방향보다 훨씬 뚜렷합니다). 

14. 높은 제목

Ensemble Correspondances는 간단한 애니메이션을 사용하여 음악의 움직임을 전달합니다. 디자인은 느슨하게 악보를 나타냅니다. 

15. 회전 메뉴 아이콘

애니메이션 메뉴 버튼은 SVG를 사용하여 만듭니다. 애니메이션은 사용자가 메뉴 버튼과 상호 작용할 때 발생합니다. 두 전환이 발생합니다. 메뉴 주위의 원형 그룹이 360도 회전하여 중앙의 메뉴 아이콘이 색이 바뀝니다. 

가장 복잡한 부분은 타이밍 기능입니다. 활용 입방 베 지어을 완벽하게 제어 할, 우리는 중간 부분을 통해 천천히 경주를 애니메이션을 시작하고 마지막에 다시 속도를 느리게 할 수있어.

16. 센터에서 밑줄

CSS 애니메이션 : 중심에서 밑줄

클릭하면 실제 애니메이션보기

애니메이션은 :: after 의사 요소를 맨 아래에 배치 한 다음 버튼이 상호 작용할 때 크기를 조절하는 것으로 구성됩니다.

17. 코너 확장하기

Princess Alexandra Auditorium 웹 사이트는 쇼의 카테고리를 시각적으로 보여줍니다. 각 쇼 카드에는 범주를 나타내는 색상으로 설정된 삼각형 모서리가 있으며, 그 다음 호버 위에 범주 이름이 표시됩니다. 

이 효과는 :: before 및 :: after 의사 요소를 사용하여 수행 되며 삼각형의 크기를 전환하고 요소가 상호 작용할 때 이름을 희미하게합니다.

18. 슬라이딩 화살표

그리니치 도서관에는 버튼에 대한 흥미로운 전환이 있습니다. 버튼과 상호 작용할 때 두 가지 일이 발생합니다. 버튼의 텍스트 부분이 덮여 있고 화살표가 버튼의 오른쪽에서 애니메이션되고 왼쪽에서 다시 움직입니다. 

색상 전환은 간단한 키 프레임 애니메이션을 사용하여 전환 속성과 화살표로 수행됩니다. 장면 전환과 애니메이션은 움직임을 동기화하기 위해 동일한 지속 시간을 사용합니다.


728x90
저작자표시 동일조건

'디자인 > HTML, CSS, JS' 카테고리의 다른 글

2020 React Developer RoadMap 최신 프론트 엔드 웹 개발자가되기위한 가이드  (2) 2019.12.28
예제 별 그리드  (0) 2019.01.16
예제 별 그리드  (0) 2019.01.15
SVG에 대한 완벽한 가이드  (0) 2019.01.05
CSS Grid로 반응형 레이아웃 만들기  (0) 2019.01.01
CSS 그리드로 어떻게 디자인하나요?  (0) 2019.01.01
CSS Grid Examples  (1) 2018.12.24
CSS[14] 그리드 레이아웃을위한 브라우저 지원  (0) 2018.12.23

관련글

댓글

티스토리툴바