・　このページの説明

　ページ内にある、クラス名"scroll_anis_imgs"のdiv要素に挟まれたimg要素の写真は、ページを縦にスクロールすると連動してアニメーションします。 最上部の見本の様にメインビジュアルとしても、他の見本の様に差し込み画像としても使用できます。 用途に合わせてクラス名"scroll_anis_imgs"のdiv要素にスタイルを設定してください。 このページでは個々のdiv要素内でstyle属性を使って設定しています。

　アニメーションは、クラス名"scroll_anis_imgs"のdiv要素のdata-type属性で、「フェード拡大ズーム」「Z回転フェード縮小ズーム」「X回転フェード縮小ズーム」の三種類から設定できます。 また、data-kaiten属性で回転方向や大きさも設定できます。

　個人・商用を問わず無料で永久に自由に使用できます。 掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。

　このページは文字コード「utf-8」で書いています。掲載しているソースの一部を、他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　使用している画像は生成AIのGeminiで作ったものです。

⇔

・　このページのソース

　ページ全体のソースです。他のページに貼り付けるタイプではありません。 他のページに貼り付けるときは、スタイルシートの必要部分とスクリプトをHEAD内にコピーし、アニメーションさせる写真をクラス名"scroll_anis_imgs"のdiv要素で囲んでください。

　ソースを「メモ帳」などのテキストエディターに貼り付け「名前を付けて保存」してください。 その際、文字コードを、ソースの４行目の meta charset="～" の記述と統一してください。因みに、このページは「utf-8」で書いています。

オプション部分の説明
data-type = "Para_Z_Fe"	「フェード拡大ズーム」はPara_Z_Fe、「Z回転フェード縮小ズーム」はPara_RotZ_Z_Fe 、「X回転フェード縮小ズーム」はPara_RotX_Z_Fe。
data-kaiten = "1.5"	回転の大きさ。1は180deg、-1は-180degで、小数でも設定できる。必ず、シングルまたはダブルクォーテーションで囲む。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.