例えば、fadeIn_plxの場合、要素が画面内にスクロールした時点でfadeInのClassを追加します。
fedeIn（_plxが無し）と指定した場合は、画面内かを問わず読み込み時に実行します。
下記以外の自作のClassでも同様に動作します。
例）hogehoge_plxならば、要素が画面内にスクロールした時点でhogehogeが追加される。
※hogehoge_plxに初期状態、hogehogeにアニメーションCSSを設定する。
※利用例.marker_plx
パララックスの自動設定について
「_setting.scss」でパララックスの自動設定の有効・無効を選択できます。
「setting/_parallax.scss」で、それぞれの要素に適用するエフェクトを選択できます。
自動パララックスを無効にしたい要素には「.no-effect」でアニメーションCSSをキャンセルできます。
「.effect_plx」に下記のいずれかのエフェクトが継承されているので、自動パララックスと併用しご利用ください。
クリップパス
- clipLeft_plx（左から）
- clipRight_plx（右から）
- clipTop_plx（上から）
- clipBottom_plx（下から）
- clipLeftTop_plx（左上から）
- clipCenter_plx（中央から）
- clipCircle_plx（円形から）
- clipPolygon_plx（ポリゴン１）
- clipPolygon2_plx（ポリゴン２）
ふわっ（フェード）
- fadeIn_plx（その場で）
- fadeUp_plx（下から）
- fadeDown_plx（上から）
- fadeLeft_plx（左から）
- fadeRight_plx（右から）
ぱたっ（フリップ）
- flipDown_plx（下へ）
- flipLeft_plx（左へ）
- flipLeftTop_plx（左上へ）
- flipRight_plx（右へ）
- flipRightTop_plx（右上へ）
くるっ
- rotateX_plx（X軸）
- rotateY_plx（Y軸）
- rotateLeftZ_plx（Z軸左）
- rotateRightZ_plx（Z軸右）
ズーム
- zoomIn_plx（ぽんっ、ズームイン）
- zoomOut_plx（どどんっ、ズームアウト）
- blur_plx（じわっ）
- smooth_plx（にょろっ）
背景色が伸びて出現
- bgLeftExtend_plx（左から右）
- bgRightExtend_plx（右から左）
- bgUpExtend_plx（下から上）
- bgDownExtend_plx（上から下）
枠線が伸びて出現
-
lineExtend_plx
-
lineCiecleExtend_plx
一文字づつに対してのエフェクト
※自動設定の場合、h1,h2,h3,h4,h5,h6にのみ指定できます。
fadeInText_plx（フェード）
flipDownText_plx（フリップ）
rotateXText_plx（回転）
zoomOutText_plx（ズーム）
blurText_plx（ブラー）
smoothText_plx（にょろっ）
glowText_plx（光る）
typingText_plx（タイピング）
アニメーションの開始を遅らせる
※１文字つつのエフェクトには利用できません。
- delay-time03（0.3秒遅らせる）
- delay-time06（0.6秒遅らせる）
- delay-time09（0.9秒遅らせる）
- delay-time12（1.2秒遅らせる）
- delay-time15（1.5秒遅らせる）
- delay-time18（1.8秒遅らせる）
- delay-time21（2.1秒遅らせる）
※背景色エフェクトはClass名が異なります。
- delay-time03-bg（0.3秒遅らせる）
- delay-time06-bg（0.6秒遅らせる）
- delay-time09-bg（0.9秒遅らせる）
- delay-time12-bg（1.2秒遅らせる）
- delay-time15-bg（1.5秒遅らせる）
- delay-time18-bg（1.8秒遅らせる）
- delay-time21-bg（2.1秒遅らせる）
※枠線エフェクトはClass名が異なります。
- delay-time03-line（0.3秒遅らせる）
- delay-time06-line（0.6秒遅らせる）
- delay-time09-line（0.9秒遅らせる）
- delay-time12-line（1.2秒遅らせる）
- delay-time15-line（1.5秒遅らせる）
- delay-time18-line（1.8秒遅らせる）
- delay-time21-line（2.1秒遅らせる）
アニメーションの変化する時間を変更
※背景色エフェクト・枠線エフェクト・１文字つつのエフェクトには利用できません。
- change-time05（0.5秒）
- change-time1（1秒）
- change-time15（1.5秒）
- change-time2（2秒）
- change-time25（2.5秒）
アニメーションの回数を変更
※背景色エフェクト・枠線エフェクト・１文字つつのエフェクトには利用できません。
- count-2（2回繰り返す）
- count-infinite（ループ）
上記でスクロール位置を指定して
パララックスの実行もできます。