sample

動作サンプル:windowをスクロールして対象が画面内に入ったらclassを変更するjavascript

marginとopacityを変更してみる

お洒落なブランディングサイトなんかでよく見る形を再現してみる。
なんか最近多いですよねこういうの。とりあえずclassを変更するだけだからやっていることは単純です。う~ん書くことが無い・・・ だってただサンプル見せたいだけのページなんですもの。。えっと~、じゃあ関係ないんですが、北海道札幌は今の季節は暖かかったり寒かったり微妙で風邪をひきやすい季節となっております。因みに今はGW。札幌も遂に桜が咲きましたが、北海道で多く見られる桜は「エゾヤマザクラ」という種類の桜で、一般的な「ソメイヨシノ」よりも開花が早い為、札幌の花見の時期は寒い!!油断すると次の日風邪を引くレベル。そんな寒い中で温かい服来て桜見て鼻水垂らしてどおする!!という・・・
すみません。。。書くことなかったもので・・・

詳しくはコチラ

windowをスクロールして対象が画面内に入ったらclassを変更するjavascript

imgでやってみる

動作サンプルimg でWatchScroll


アセアセo(^^;o)Ξ(o;^^)oΞo(^^;o)Ξ(o;^^)oドウモ~♪

サンプル sample

サンプル sample

サンプル sample

サンプル sample

サンプル sample

サンプル sample

もいちどimgでやってみる

動作サンプルimg でWatchScroll

まとめ

デフォルトのclassの方にトランジション付けるのは忘れないで下さいね。忘れるとカチッと変わって変ですので(;~〓~) アセアセ
スピードとかはトランジションで各々で変更したほうが良いかと思いますので。。。

著者

[jetpack-related-posts]