アニメーション・エコシステムの伝道者、ユゲタです。
いや〜、アニメーションすると、人の視線を注目させる事ができ、
なかなかのエンターテイメントです。
Webページにおいて、ちょっとしたワンポイントで効果的なアニメーションを実装することで、そのホームページのクオリティが、格段にアップする事ができます。
ローディングアニメって、ゲームなどのコンテンツサイトじゃないかぎり、そんなに長い間表示するワケではないですが、
そうしたちょっとしたワンポイントでのこだわりが、閲覧する人の印象に残りやすいんですよね。
今回は、ちょっとトリッキーに見えるグリッド機能を使用した、Box型のCubeアニメをご紹介します。
波打って見えるのが、非常に効果的だと思いませんか？
デモ
ソース
html
<div class="cube">
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
</div>
css
.cube{
width : 128px;
height : 128px;
display : grid;
grid-template-columns : 1fr 1fr 1fr;
grid-template-rows : 1fr 1fr 1fr;
overflow : hidden;
}
.cube > .grid{
position : relative;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
border : 0;
font-size : 0;
background-color : black;
animation : anim-cube-grid 1.5s ease-in-out infinite;
}
.cube > .grid:nth-child(3){animation-delay: -0.0s;}
.cube > .grid:nth-child(2),
.cube > .grid:nth-child(6){animation-delay: -0.1s;}
.cube > .grid:nth-child(1),
.cube > .grid:nth-child(5),
.cube > .grid:nth-child(9){animation-delay: -0.2s;}
.cube > .grid:nth-child(4),
.cube > .grid:nth-child(8){animation-delay: -0.3s;}
.cube > .grid:nth-child(7){animation-delay: -0.4s;}
@keyframes anim-cube-grid{
0%{transform:scale(1.1)}
25%{transform:scale(0.0)}
50%{transform:scale(1.1)}
100%{transform:scale(1.1)}
}
関連リンク
他のNowLoadingも見る
