今回の記事はjsのふわっと動かす技術についてまとめてみようかと思います。

 

 

 

 

こんな感じで記述してあげることで

 

class属性 huwattoを持つ要素がスクロールの範囲に入ってくれた時に

 

ふわっと〜

 

浮いてくれるようになります。

 

基本的なとこからなぜこうなっていくのかを解説していきます。

 

基礎から

 

 

ここからになってくるのですが

$(function(){

});

 

でここからjQueryを開始しますよ〜

って合図を示してます。

これ以降ではここから何を始めるのか記述していきます。

 

そして

$(window).scroll(function(){

});

 

ここでは最初のwindow指定で

window全体に対してメソッドをかけていきます。

 

そしてこれはscrollメソッドでスクロールした際にfunction

以降で示してあげます。

 

ここまではできて当たり前言われそうで恥ずかしいレベルですが

このコツコツを積んでいきます。

 

 

定数

 

 

$('.huwatto').each(function(){

});

 

ここではhuwattoクラスに対してこれ以降のメソッドをかけていくことになります。

 

 

each

 

 

 

で続いてこの部分なのですが

 

varは変数を定義することになっていて三列に

windowHeight

elementPos

scroll

 

これらの変数に =以降の部分

を代入していきます。

 

それぞれ何を示しているか把握していきましょう。

 

これは画面の高さを示しています。

ページが全体だとして今あなたが見ているページって

一部ですよね。その見ている画面の高さを取得してあげます。

macbookなので1440pxです

 

そしてそこから

 

 

thisでこの関数内の親からクラスを持ってきているので

'huwatto'クラスを持ってきています。

 

'huwatto'クラスの中の要素のページ上部からの距離を

offset().top;

から引っ張ってきています。

 

 

このscroll変数はページの一番上から

今見えている範囲の画面の高さのことを指しています。

 

これで定義自体はできたのでこれ以降で

何が行われているのか見ていきましょう!!

 

実際にCSSにスタイルを適用

 

 

最後にこの関数の部分ですが

端的にまとめるとcssのプロパティと値を変更しています。

 

ここだけ見るとわかりづらいですが

 

というのが適用されています。

これは何を示しているかというと

opacity = 透明度 なので0ということは何も見えないということです。

 

それを 1に変えることで可視化できるんですよね。

もちろん0.1でも見えますが薄い表示です。

 

そしてtransformですが

これは元いるポジションからどこの位置に移動させてあげるかを示しています。

 

なので元のCSSの場合は20px分元の位置から離れて表示させることを示しています。

 

そしてjsで改めてtranslateY(0)

で改めて元の場所に戻してあげているのです。

 

この二つの操作を

 

 

ここではしています。

 

そして解説が遅れましたが

 

 

これは条件式で

 

(scroll変数の値) >(elementPosからwindowHeightの値を引いたとこに200pxの値を足した)

になれば先ほどのCSSに変更を加えるというのを示しています。

 

 

こんなことがこの

 

数行で行われています。

 

書くの大変だよ〜

 

 

少しずつ脳みそがプログラミング脳に変わりつつあるので

理解が追いついてきてます。

 

昨日の自分よりも何か身につけた自分でありたいです。

これからもコツコツっす。

 

 

 

 

 

 

 

 

 

おすすめの記事