私たちのこだわりOur Values

笑顔あふれる日常の支援Smiling Support

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

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

24時間体制の安心ケア24/7 Care

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

家族のような温かさFamily-like Warmth

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

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

私たちのこだわり

<!--▼▼▼▼▼ここから「私たちのこだわり」-->
<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>Smiling Support</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>24時間体制の安心ケア<span>24/7 Care</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を見ながら追加してみて下さい。