ページ

2015年7月25日土曜日

jQueryでページの中心にあるコンテンツのみフォーカスするやつ

おはようございます龍世(@rt1031_bot)です。

jQueryでページをスクロールした際、中心に見えてるコンテンツだけ不透明度を0にして、他のコンテンツの不透明度を上げるというのを作って見ました。

まぁこんな感じです。こないだ自分のサイトを作ってみたのですが、その時にこいつをやってみました。
まぁこんな感じです。見てください。


リンク


コードはこんな感じです。
$(".items").each(function(i) {

      //画面の半分のサイズと、要素の高さを調べる
      var sy = $(window).scrollTop();
      var y = $(window).height()/2 + sy;
      var yq = $(window).height() /4 + sy;
      var ctnsHeight = $(this).offset().top;
      var ctnsBottom = $(this).height() + ctnsHeight;

      //画面の半分より上に要素が来たら表示。それ以外は薄くする。
      if(ctnsBottom < yq || ctnsHeight > y) {
      $(this).css("opacity", 0.2);
      } else {
      $(this).css("opacity", 1);
      }
});

itemというクラスの要素をforeachで取得して、画面の真ん中らへんに来たら不透明度を変更って感じです。

単純ですね。

やっぱjsって書いたのがすぐに目に見えるから書いてて楽しいですよね!


もうちょいなめらかに動かしたり、色々こう出来たらな〜!って思う点はありますが、とりあえず動くのでこれ使ってますw

もっとjs力欲しいのん。。。

ではまた!