書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみました。

最近良く目にするあれ

とは、スクロールしていくと突然何もなかったところからふわっと現れる文字や画像のこと。何て言うのか知らないので「あれ」と表現しました。すみません。。。

つまりこれのこと

そしてこれもそう

さらにこれもです

コード

HTML

<div>
 <p id="animation">ここの文字が現れる</p>
</div>

テキスト部分を画像(img)にすれば、画像をふわっとさせることができますね。divやpの装飾は適宜行ってください。

JS

$('#animation').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#animation').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});

とりあえずp#animationを非表示にさせなくちゃいけないわけですが、それを今回はjQueryでやってます。cssで当初からvisibilityでhiddenしてもいいのですが、念のためJavaScriptがオフられている環境を考慮しました。そんなやついねーよと言われそうですけども…

「if(topWindow > targetPosition - windowHeight + 100)」の「100」という数値を変更することで、表示のタイミングを変えることができます。

CSS

#animation {
margin: 50px 0;
font-size: 40px;
font-weight: bold;
color: #ff0000;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

ここのcss(#animationは文字の装飾)を変えることで、横からでてきたり下から出てきたりさせることができるわけですね。これは上からフェードインしてくるタイプです。

css3のアニメーションは以下のサイトが参考になります、というかいつもお世話になってます。ありがとうございますm(__)m

Animate.css

デモ

既に一度やっているので、デモといってもあまり意味はありませんが、一応、デモっておきます。

ここの文字が現れる

まとめ

このままだと限りなくダサいのでcssで色々とやってみてください。色々なcss3のアニメーションと組み合わせることで、かなり可能性が拡がりますね。

こんな感じでした。