데뷔

아무래도 업무 화면이란 느낌의 업무계 웹 화면 개발이 대부분이었기 때문에,
인터랙티브라든지 애니메이션이라든지, 전혀 무연의 세계에 있었습니다만,
마침내 애니메이션에 데뷔했습니다.

세상의 멋진 사이트는 CSS의 애니메이션과 JavaScript를 구사해 만들어졌네요. . .
transform이라면 어떻게든 괜찮을 것 같아!

일단 2개만 해봤어

・배경색의 그라데이션의 걸림 상태를 애니메이션으로 바꾸어 본다
· 문자를 확대 · 축소하거나 병행 이동

index.html

<body>
　・・・・・・

  <!-- ここをアニメーションで変える -->
  <main class="l-content"> <!-- 背景変える -->
    <div class="catchcopy-wrapper">
      <div class="catchcopy"></div>  <!-- ここの文字を動かしてみる -->
    </div>
  </main>

　・・・・・・
</body>
</html>

배경색 그라데이션의 걸림 상태를 애니메이션으로 바꾸어 본다

_layout.scss

.l-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - (#{$header-height} + #{$footer-height} + 100px));
  padding: 50px;
  margin-left: $navbar-width;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  background: radial-gradient($color-crystal, $color-darkness);
  color: $color-basic-font;
  // アニメーションの設定
  animation-name: anime-l-content;　　// 利用アニメーションを指定
  animation-duration: 5s;  // 5秒間隔でアニメーション
  animation-timing-function: ease;　  // 開始と完了を滑らかにする
  animation-delay: 0s; // ページ表示からアニメーション開始までの時間
  animation-iteration-count: infinite;　 // 繰り返し回数（無限）
  animation-direction: alternate;　 // 奇数回では普通方向の再生、偶数回では逆方向の再生
  animation-fill-mode: none; // アニメーション再生後は、元のスタイル適用
  animation-play-state: running; // アニメーションを再生中にする
}
@mixin gradient-l-content($lighten) {
    background: radial-gradient(lighten($color-crystal, $lighten), $color-darkness);
}
// 理由は無いけど、フィボナッチ数に従って、背景色を徐々に明るくしていく
@keyframes anime-l-content {
  0% { @include gradient-l-content(0%); }
  10% { @include gradient-l-content(1%); }
  20% { @include gradient-l-content(1%); }
  30% { @include gradient-l-content(2%); }
  40% { @include gradient-l-content(3%); }
  50% { @include gradient-l-content(5%); }
  60% { @include gradient-l-content(8%); }
  70% { @include gradient-l-content(13%); }
  80% { @include gradient-l-content(21%); }
  90% { @include gradient-l-content(34%); }
  100% { @include gradient-l-content(55%); }
}

문자를 확대·축소하거나 병행 이동

_object.scss

.catchcopy {
  animation-name: anime-catchcopy;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
}
// なんとなく拡大縮小したり、平行移動でキャッチコピーを動かしてみた
@keyframes anime-catchcopy {
  0% {　transform: scale(0.3) translateY(-5%) translateX(-5%);　}
  30% {　transform: scale(1);　}
  50% {　transform: scale(1.2);　}
  100% {　transform: scale(1) translateX(10%);　}
}

감상

다음은 transform3D에서 더 역동적으로 움직이고 싶다.
1문자씩 애니메이션으로 바꾸는 것도 하고 싶다.
자바스크립트도 사용해, 멋있는 이펙트의 버튼이라고도 만들고 싶다.

그보다, 반응 대응이 먼저일까. . .
아니, 오히려 아직 포트폴리오의 내용이 아직 아무것도 없지만, 무엇 쓰자. . .

Reference

이 문제에 관하여(포트폴리오를 만들기 시작하고 무료로 공개 (CSS3 애니메이션 데뷔)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uegaki-masaaki/items/a684ebb3f9f685bfe877

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다