おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

記事を読み終えた時に関連記事をさりげなくアピールするスクリプト

      2015/01/12

自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロールしても付いてくるやつはもっと苦手ですw
でも、やはり記事を読み終わった人には関連記事を読んでほしいとは思う訳です。SNSボタンを押してもらいたいとか。
そこで、記事を読み終えた時に関連記事やSNSボタンのエリアをアピールするだけにしたらどうかな? と思いまして、そのアイディアを少し紹介してみます。

関連記事の辺りまでスクロールしたらアニメーションさせる

ちょっと言葉で説明するのが難しいのですが、全く新たなエリアで関連記事などを表示するのではなくて、元々表示されている関連記事をアピールする、という考えです。
例えば以下にスクロールしてみて下さい。

関連記事とか

なんか、表示された瞬間にちょろっとアニメーションがあったかと思います。環境によっては無いかもですが、jQueryでの簡単なアニメーションだけなので多くの環境では動いたはずです。
そんな様に、元々表示されている位置でちょっとしたアピールをするなら、そんなに目障りじゃないし良いかなーと思いました。

スクロールで表示された時にアニメーションさせる

では、まず先程の例で使ったコードを紹介します。ところどころ汚いコードもありますが^^;


var wh = $(window).height();
var kanren = $("#kanren"),
kanrent = kanren.offset().top,
kanrenh = kanren.outerHeight();
$(window).scroll(function (){
  var wst = $(window).scrollTop();
  if( kanrent + kanrenh < wst + wh && kanren.css("display").match("none")){
    kanren.animate({
      width: "toggle",
      opacity: "toggle"
    },
    "slow");
  }
  else if( kanrent + kanrenh > wst + wh && !kanren.css("display").match("none")){
    kanren.hide();
  }
});

このコードのアニメーション部分を自分で好きな様に変更すれば色々できるかと思います。
また、今回の例では画面から見えなくなって、再度見えた時にもアニメーションが動く様になっています。1度だけで良い、という場合には以下の様に簡単なコードになります。

var wh = $(window).height();
var kanren = $("#kanren"),
kanrent = kanren.offset().top,
kanrenh = kanren.outerHeight();
kanren.hide();
$(window).scroll(function (){
  var wst = $(window).scrollTop();
  if( kanrent + kanrenh < wst + wh ){
    kanren.animate({
      width: "toggle",
      opacity: "toggle"
    },
    "slow");
  }
});

では、以下でいくつかアニメーションの例を紹介します。かなり簡単なアニメーションしか紹介しませんので、凝った物にしたい場合はホバー時のアニメーションなどを調べたりして、それを応用すると良いかと思います。
ちなみに、以下で紹介するコードは、上で最初に紹介したコードの7〜16行目の部分に相当する箇所のみです。

ニョロっと表示場所の上から表示される

関連記事とか
  if( kanrent + kanrenh < wst + wh && kanren.css("display").match("none")){
    kanren.slideDown();
  }
  else if( kanrent + kanrenh > wst + wh && !kanren.css("display").match("none")){
    kanren.hide();
  }

じわっと表示される

関連記事とか
  if( kanrent + kanrenh < wst + wh && kanren.css("display").match("none")){
    kanren.animate({
      "opacity": "toggle"
    },
      "slow");
  }
  else if( kanrent + kanrenh > wst + wh && !kanren.css("display").match("none")){
    kanren.hide();
  }

チカチカっと点滅する

関連記事とか
  if( kanrent + kanrenh < wst + wh && kanren.css("display").match("none")){
    kanren.fadeIn(100).fadeOut(100).fadeIn("fast");
  }
  else if( kanrent + kanrenh > wst + wh && !kanren.css("display").match("none")){
    kanren.hide();
  }

右から左にスライドして来る

関連記事とか
  if( kanrent + kanrenh < wst + wh && kanren.css("display").match("none")){
    kanren.css({
      "position": "relative",
      "right": "-600px",
    });
    kanren.animate({
      "right": "0",
      "opacity": "toggle"
    },
      "fast");
  }
  else if( kanrent + kanrenh > wst + wh && !kanren.css("display").match("none")){
    kanren.hide();
  }

最後に

どうでしたでしょうか。
あまり多くのブログなどを見ていないだけかもですが、あまり見ない気はします。でも、これくらいのアニメーションでも十分じゃないかなと思いますし、このさりげなさが個人的には良いなーって思ってますw
少し汚いコードですので、綺麗にできる部分は綺麗にしていただいてw
勝手に使っていただければ幸いです。

 - ブログデザイン

Message

メールアドレスが公開されることはありません。

  関連記事

cssの:hoverの色々な使い方

cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …

no image
blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

こんにちは、面倒臭がりです。 自分は面倒臭がりなので、ちょっとデザインをいじりた …

サイドバーって死んだの? 〜STINGER5のスマホ表示をカスタマイズ〜

こんにちは。 社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw …

qlookblogdesign2
素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」

時間は万能薬のデザインを少し変更しました! その際、素人ながらに何を考えて、どう …

no image
暇潰しの為のアンテナサイト「6sec.」を少し更新しました

前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたい …

no image
アクセスが増えてきたのでブログデザインを改良しました

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記 …

フッターの表示をjQueryでほんのちょっと格好良くしてみた

前に、Stocker.jp / diaryのページに行った時に「このサイトのフッ …