INDIES BAND

PROFILEなまえをここにいれます。

ここにプロフィールを入れます。サンプルテキスト。

タグ解説

イラストのブロックと、文字ブロックの2カラム構成になっています。それぞれのブロックには、回り込み(float)の指定と、幅の指定が入っています。左のイラストの場合は、class="fl w25"です。flは左に回り込み(float:left)、w25は幅25%になるスタイルで、間に半角スペースを挟む事で2つ指定しています。

ここの文字ブロックは、class="fr w70"です。frは右に回り込み(float:right)、w70は幅70%です。

2カラムを囲む一番外側のブロックには、class="clear"指定を入れておいて下さい。これがないと前のブロックに次のブロックの内容が流れ込んでしまいます。PCで見た場合にいい感じに見えても、小さな端末で崩れるので入れておいた方がいいでしょう。

PROFILEなまえをここにいれます。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

こちらのブロックは、イラストブロックが、class="fr w25"となり、文字ブロックが、class="fl w70"です。回り込み(float)の指定を逆にしただけです。

Transformアニメーション加工

transform2

アニメーションにしたいブロックなどに、class="transform2"とすると、このブロックの動きになります。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

up

アニメーションにしたいブロックなどに、class="up"とすると、このブロックの動きになります。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

left

アニメーションにしたいブロックなどに、class="left"とすると、このブロックの動きになります。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

right

アニメーションにしたいブロックなどに、class="right"とすると、このブロックの動きになります。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

部分的にも適用できます。

これは画像のasideタグにupスタイルを追加したタイプです。

XXXX年生まれ。
ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。ここにプロフィールを入れます。サンプルテキスト。

オリジナルのアニメーションを作りたい場合は

cssフォルダのinview.cssに、cssで動くアニメーションタグを追加します。
css冒頭の「共通設定」の2箇所にも追加するのを忘れないようご注意下さい。

スタイルを追加したら、jsフォルダのjquery.invie_set.jsにタグを追加して下さい。
既存のタグをコピペして、スタイル名を2箇所入れ替えればOKです。

transformのアニメーションが動作しない場合

htmlの下部に、
<!--パララックス用ファイル読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/jquery.inview_set.js"></script>

のタグがあるか確認して下さい。

httpsから始まるurlは将来リンク切れを起こす可能性もあります。その際は改めて「jQuery CDN」などでネット検索し、新しいurlに置き換えて下さい。