お客様の声Customer Testimonials

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

サンプル見出し。

サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

お客様の声

<!--▼▼▼▼▼ここから「お客様の声」-->
<div id="voice" class="bg-slideup slideup1">

<section>

<h2 class="c"><span class="fade-in-text">お客様の声</span><span class="small">Customer Testimonials</span></h2>

<div class="list-yoko-scroll">

<div class="list">
<h4>サンプル見出し。</h4>
<p class="text">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>
・
・
・
</div>
<!--/.list-yoko-scroll-->

</section>

</div>
<!--▲▲▲▲▲ここまで「お客様の声」-->

設定は

cssフォルダのstyle.cssから「.list-yoko-scroll」や「.bg-slideup」「.slideup1」でテキスト検索してみて下さい。詳しい解説もあります。

ふきだし部分を手動でスクロールすると横に動きます

ふきだしの幅や色はcssで調整できます。

お客様の声」のテキストアニメーション

汎用的に使えるテキストアニメーションです。
詳細はmanual4_kodawari.htmlを読んで下さい。

背景画像は

正方形か縦長程度のものを準備して下さい。ボックスの高さにもよりますが、あまり横長だとスクロールしても背景画像が固定されたまま動きません。背景画像はcssでの設定ですが、動きに関してはmain.jsの// 背景画像が少しずつ上に移動するというブロックで設定しています。