カウントアップカウンター-Volar2

カウントアップカウンター-Volar2

SIRIUS2テンプレート【Volar2】では【パーツ】→<アイテム比較>を利用したカウントアップカウンターを作成できます。
 

アイキャッチ画像

【Volar2】では【パーツ】→<アイテム比較>を利用して、可視領域に達したらカウントアップするカウンター機能を実装してます。

 

デモはトップページでご覧になれます。

<アイテム比較>についてはこちらの記事をご参照ください。


事前準備

事前準備ですが、トップページとエントリーページで若干異なります。

 

トップページ

上部メニューからテンプレートHTMLテンプレート編集トップページを開き、下のモジュールのコメントアウトを解除します

<!-- ★[% module(【Volar2】カウントアップ(スクリプト)) %]★ -->

 

エントリーページ

この機能を使いたいページの【個別ページの設定】を開き、[詳細設定]タブの『</body>タグ前に挿入する内容』のところに【Volar2】で用意しているモジュールを挿入します。

 

キャプチャ画像

操作のやり方

【パーツ】→<アイテム比較>を開いたら、指定箇所に表示したい内容を記入します。

(説明文は省略可・価格欄には専用のコードをコピー&ペースト)

 

キャプチャ画像

 

記入が済んだら独自タグで出力します。

その独自タグを【Volar2】で用意している専用のクラスで囲みます。

<div class="xxx">[% compare(※アイテム比較管理名) %]</div>

 

これでトップページのサンプルのようなカウンターが表示されます。

(実際にはアニメーションしながら表示)

 

キャプチャ画像

 

カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。

 

アニメーションは1回限りでページをリロード(更新)すれば再度アニメーションします。

 

数値の色や大きさは変更可。(スタイルシート上での変更)

 

「タイプ01」でのみ利用可。