2分割スライダーヘッダー-Volar2

2分割スライダーヘッダー-Volar2

SIRIUS2テンプレート【Volar2】ではトップページのヘッダーを2分割スライダー形式に変更できます。
 

アイキャッチ画像

《Volar2》ではヘッダー画像を2分割で表示かつ同時に次の画像にフェードで変わる《2分割スライダーヘッダー》機能を実装してます。
ビジネス系サイトなどで使えるかと。


キャプチャ画像


↓デモサイトはこちら↓
左右2枚の画像が同時にフェードで次の画像に変わっていきます。


概要

《2分割スライダーヘッダー》は以下のような特長があります。


  • 左右2枚の画像がゆっくりとズームイン。
  • (デモサイトは)8秒前後で次の2枚の画像にフェードで同時切り替わり。切り換え(トランジション)形態はフェード固定。
  • 6秒前後で切り替わるタイプもご用意。
  • 画像は左右2枚×2もしくは2枚×3のいずれか。
  • 表示領域はブラウザの高さいっぱい。
  • スマホでは縦並び。

有効化

この機能はデフォルトでは無効化されてます。


《2分割スライダーヘッダー》機能を利用するには専用モジュールを有効化する必要があります。

有効化のやり方

8秒タイプなら
①『【Volar2】2分割ヘッダー(HTML)
②『【Volar2】2分割ヘッダー(スクリプト)8秒
②『【Volar2】2分割ヘッダー(スタイル)8秒


6秒タイプなら
①『【Volar2】2分割ヘッダー(HTML)
③『【Volar2】2分割ヘッダー(スクリプト)6秒
③『【Volar2】2分割ヘッダー(スタイル)6秒


それぞれ上記モジュールの[有効]のチェックをONにします。


キャプチャ画像

設定概要

画像

事前に用意する画像は1回だけのスライド(切り換え)なら左右2枚×2で4枚必要です。(3回スライドさせるなら6枚)
それ以上は長くなるので推奨しません。


あとは画像を左右1枚ずつ登録していくだけ。
たとえば左1枚目の画像ならモジュール『【Volar2】2分割ヘッダー(画像左1)』をクリック→入力画面で記事装飾メニューの[画像]から当該画像を選択で完了。


キャプチャ画像


同様に残りの画像も1個ずつ登録していきます。


タイトル

画面中央にはテキストも表示できます。
モジュール『【Volar2】2分割ヘッダー(タイトル)』を開いて中にサイト名や説明文を記述します。

画像のオーバーレイ用のスタイルも用意してます。