私たちのこだわりOur Values

丁寧で親身な診療対応Compassionate Care

ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。

ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

清潔で安心な院内環境Clean & Safe Facility

ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。

経験豊富な医療スタッフExperienced Staff

ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。

ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。

私たちのこだわり

<!--▼▼▼▼▼ここから「私たちのこだわり」-->
<section id="kodawari">

<h2 class="c"><span class="fade-in-text">私たちのこだわり</span><span class="small">Our Values</span></h2>

<div class="list-half">

<div class="list up">

<div class="text">
<h4>丁寧で親身な診療対応<span>Compassionate Care</span></h4>
<p>ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。<br>
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。</p>
<p>ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。<br>
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="image-r">
<figure><img src="images/kodawari-1.jpg" alt=""></figure>
</div>

</div>
<!--/.list-->

<div class="list up">

<div class="text">
<h4>清潔で安心な院内環境<span>Clean &amp; Safe Facility</span></h4>
<p>ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。<br>
ここに挨拶文を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。</p>
</div>

<div class="image-l">
<figure><img src="images/kodawari-2.jpg" alt=""></figure>
</div>

</div>
<!--/.list-->
・
・
・
</div>
<!--/.list-half-->

</section>
<!--▲▲▲▲▲ここまで「私たちのこだわり」-->

設定は

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

私たちのこだわり」のテキストアニメーション

class="fade-in-text"
を使うと1文字ずつ現れるアニメーションになります。

style.cssの、
/* アニメーションを適用するクラス
の中にある、
animation: fadeIn 0.2s linear both;
の0.2sが文字の出現のなめらかさです。0に近いほどキーボード入力のようにカクカクした感じになります。
1文字ずつの出現する際の時差は、main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。

画像の左右の配置指定

<div class="image-r">だと画像は右側に配置され、<div class="image-l">だと左側に配置されます。

ブロックがふわっと浮き上がるパララックス

<div class="list up">upがパララックス効果のスタイルです。
すぐ使えるパララックスは以下です。

▼upスタイル

▼downスタイル

▼transform1

▼transform2

▼transform3

▼blur

別のアニメーションを追加したい場合は、css/inview.cssとjs/jquery.inview_set.jsを見ながら追加してみて下さい。