アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css コンテンツ 新着情報

cssのanimationで文字に変化を付ける ⇒ トップページの作り込み1

投稿日:

animationとは

cssのanimationを使うことで簡単に動きを付けられる。

animation-CSS3リファレンスanimationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する際に使用します。

animation-CSS3リファレンスから引用

今回はスプラッシュ画面に文字を「じんわりと」表示させてみた。

webフォント

表示させる文字は、webフォントのNoto JPを利用することにした。

HTMLにwebフォントを読み込むコードを追加。

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">

クラス名を付ける。

    .amiens-font-noto {
        font-family: 'Noto Serif JP', serif;
    }

アニメーション

最初のブロックに、アニメーションを付ける。
HTMLは、

<div id="01" class="amiens-box100 amiens-font-noto amiens-fadein">あなたのネットショップは<br />売れていますか?</div>

ブロックを設定。

.amiens-box100{
    box-sizing: border-box;
    min-height: 100%;
    min-height: 100vh;
    color:white;
    font-size:1rem;
    background-color:black;
    padding:40% 30px;
    padding:40vh 30px;
    text-align: center;
}

これにcssでアニメーションを付けた。

.amiens-fadein{
    animation-name: fadein;
    animation-duration: 10s;
    font-family: 'Noto Serif JP', serif !important;
}
@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ちょっと手抜きかも。

-CMS, css, コンテンツ, 新着情報
-, ,

執筆者:

関連記事

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …

Googleリアルタイム検索の「上位順の最新情報」にはユーザーのオーソリティが関係している

Amplify’d from www.suzukikenichi.com 「上位順の最新情報」に表示するユーザーは何を基準に選んでいるのだろうかと疑問に思っていたのですが、ツイートしたユーザーの“Au …

foursquare

foursquareのiPhoneアプリからfacebookにポストできなくなったよ

位置情報サービスとして多くの利用者が使っているfoursquareだが、1ヶ月前くらいからfacebookにポストできなくなった。 いろいろ試してみると、どうやら認証方式が変わったのに自動対応していな …

stinger8

wordpessテーマのSTINGER8にしてみた ⇒ 設定その1

STINGER8を導入 このサイトはwordpressで構築している。 数ヶ月間Grapheneテーマを使ってみたのだが、どうも重い気がする。 そこで試しに、国産テーマで人気が高いSTINGERを使っ …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …