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

アイキャッチ画像

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

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

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

アイテム比較

SIRIUS2の＜アイテム比較＞についての詳細ページ。

事前準備

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

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

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

キャプチャ画像

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

（説明文は省略可・価格欄には専用のコードをコピー＆ペースト）

キャプチャ画像

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

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

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

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

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

キャプチャ画像

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

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

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

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