comments trackbacks you may also like

FC2ブログのヘッダー画像を徐々に表示させるアニメーションのカスタマイズ

2019年11月14日
#FC2ブログ #FC2ブログカスタマイズ #FC2ブログヘッダー画像 #スクロールアニメーション #ウェブデザイン #ブログカスタマイズ #IMG要素 #ヘッダー画像カスタマイズ #アニメーション #ブログ運営

ヘッダー画像 – ゆうらり Happy Smile


FC2ブログヘッダー画像に、ちょっとした小ワザを使ったカスタマイズを施してみました。


今回やったことは、ブログのヘッダー部分に設定してある画像がアニメーション効果によって徐々に表示されていくというカスタマイズです。


▼デモはこちら。

ブログのトップページへ


画像が画面内に入ると、アニメーションが始まるんですね。一度、画像が見えなくなるまでスクロールしてから再び戻りますと、何度でもアニメーションが動作します。面白いですね(^^)


FC2ブログのテンプレートに限らず、img要素の画像でしたら記事内の画像などにも簡単に装飾を施すことが可能だと思います。クリエイティブウェブデザインのブログを表現するのにもおすすめかも知れません。


そこで今回は、コピペでカスタマイズできる設定コードに加え、僕が現在使っているFC2ブログテンプレートAmple」に実装した手順をご紹介します。

画像を徐々に表示するスクロールアニメーションの基本コード

まずは、「画像を徐々に表示するスクロールアニメーション」の基本コードから。

html

div要素を使ってimg要素を下のコードのように囲みます。なお、クラス名はご自身で使用するテンプレートのものとダブらないように便宜変更して下さいね。(F3を押して、.img-wrapと入力すれば同じクラス名が使われているかすぐに調べられます)。


▼htmlコード

<div class="img-wrap">
<img要素の画像>
</div>

JavaScript

続いて、下にあるネイティヴJavaScriptコードを、htmlの</body>の真上にコピペします。


▼JavaScript

<script>( function() {
const image = document.querySelectorAll( '.img-wrap' );

const observer = new IntersectionObserver( function( entries ) {
entries.forEach( function( entry ) {
if( entry.intersectionRatio > 0 ) {
entry.target.classList.add( 'img-animation' );
} else {
entry.target.classList.remove( 'img-animation' );
}
});
});

Array.prototype.forEach.call( image, function( img ) {
observer.observe( img );
});
})();</script>

もしもクラス名を変更した場合は、赤字の部分を書き換えて下さいね。

CSS

最後は、CSSコードになります。スタイルシートの1番下に、次のCSSコードをコピペして下さい。なお、赤字の部分は画像が表示される前の背景色ですが、テンプレートの背景色と同じ色にしておくと良いですね。


▼CSSコード

.img-animation {
animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
overflow: hidden;
position: relative;
}

.img-animation:before {
animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
background: #fff;
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}

@keyframes img-opacity {
0% {
opacity: 0;
}
}

@keyframes img-animation {
100% {
transform: translateX(100%);
}
}

僕の使用するFC2ブログテンプレート「Ample」に実装してみた

さっそく、僕の使用するFC2ブログテンプレートAmple」に実装してみたわけですが、最初はちょっと手間取ってしまいました…。


なぜなら、テンプレートにあるhtmlの該当部分を探してみたところ、img要素が見当たらないんです!


あっ、そうか!僕の使ってる「Ample」は、ヘッダー画像がランダム表示されるから、CSSのほうに記述してあるんだ( ̄O ̄;)


そうすると、img要素を囲んでいるタグの所をdiv要素で囲めば良いわけか…。


というわけで、僕が実装した手順は次のとおりです。


まず、htmlの該当箇所にdiv要素を記述。


▼具体例(最初に<div>を記述する場所)

<!--index_area--><div class="img-wrap">
<div id=blog-name-container>
<h1 id=blog-title>

▼具体例(最後に</div>を記述する場所)

</h1>
<p id=site-desc><%introduction></p>
</div></div>
<!--/index_area-->

次に、CSSコードを記述。この時、クラス名の.img-animationがダブっていたので、.img-wrap-animationに変更しました。


最後に、JavaScriptコードを記述。この時も、.img-animationの部分を.img-wrap-animationに書き換えています。


以上で、ヘッダー画像が徐々に表示するアニメーション効果のカスタマイズが完了です。

おわりに

僕の使用する「Ample」は、複数枚の画像がランダム表示されるのだけれど、それに今回のアニメーション効果を加えるのはちょっとクドイかな?とも思いました。何しろ、すでにブログタイトルと説明文にまでアニメーション効果を実装してますから( ̄▽ ̄;)


▼関連記事

【FC2ブログテンプレート】Ampleのヘッダー画像、ランダム表示数を追加したけど文句ある?

FC2ブロガーのMです。ご訪問いただきありがとうございます(^^)今回は、FC2ブログのテンプレートについての話しを。Akiraさんが期間限定(すでに終了しました)で公開された「Ample」に変更した僕は、このテンプレートがとても気に入っています(^^)Ample - ブログ内期間限定配布「配布終了」Ampleテンプレートはレスポンシブウェブデザインです。パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。「ス...

【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪

FC2ブロガーのMです。とうとうやってしまいました。FC2ブログのテンプレート製作者Akiraさんがブログ記事を更新されたんで気になって覗いてみたんです。すると…。Ample - ブログ内期間限定配布Ampleテンプレートはレスポンシブウェブデザインです。パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。設定ページ...vanillaic...

この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (50)
┣  AVANT:癌の余命宣告~共存 (37)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5950)
┣  胃がんブログ (286)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (569)
┣  がんブログ (334)
┗  がんニュース (235)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (170)
┣  Amazonセール (4)
┗  Kindleセール (165)
おもしろグッズ (12)
今日のエッセイ (154)
ニュース-芸能-話題 (888)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (118)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (261)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (26)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)