スクロールアニメーション色々なスクロールアニメーション

スクロールアニメーション(非表示→フェードINで現れる)を設定したい要素にCSSを当てるだけで、設定出来るようにしています。
カーテンから表示や パララックス等は、オプションが増えて複雑なため、今後作る予定です。

【フェードイン】.u-anime--fadeIn 【フェードイン:ゆっくり】.u-anime--fadeIn-slowly 【フェードイン:左から】.u-anime--fadeIn-left 【フェードイン:左から:ゆっくり】.u-anime--fadeIn-leftSlowly 【フェードイン:左から:拡大しながら】.u-anime--fadeIn-leftExpansion 【フェードイン:右から】.u-anime--fadeIn-right 【フェードイン:右から:ゆっくり】.u-anime--fadeIn-rightSlowly 【フェードイン:右から:拡大しながら】.u-anime--fadeIn-rightExpansion 【フェードイン:下から】.u-anime--fadeIn-down 【フェードイン:下から:ゆっくり】.u-anime--fadeIn-downSlowly 【フェードイン:下から:拡大しながら】.u-anime--fadeIn-downExpansion 【フェードイン:上から】.u-anime--fadeIn-up
【スクロール無しで表示】.has-showを追加
※ページ読み込み時の画面に表示されている要素を、スクロール無しでアニメーション開始したい時など。

【表示遅延】.u-anime--delay1~30 【表示遅延:SP】.u-anime--delay1~30_sp
※スマホレイアウト時に、変更されたレイアウトに合った表示遅延に上書きしたい時。

【アニメーションする要素の親要素】overflow: hidden; //アニメーション用
※横からフェードIN表示などした時に、親要素からハミ出て 画面がガタつくのを防止する。

#PAGE TOP