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

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

FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など
2019/11/14
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#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...

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

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など