副業で稼ぐ仕組みの作り方

ふわっと表示したらごっつカッコええやん

投稿日:2016年11月5日 更新日:

スクロールしたらふわっと表示されるやつ作ってみたよ

はじめに

縦長系のサイトで下にスクロールしていくとふわっと内容が表示されるのってカッコ良くないっすか?

注意事項

ジャバスクリプトを使うので必ずテストが必要です

htmlを作ろう

まずはふわっと表示させたい内容を作りましょう


<p class="animation text1">ふわっと表示される</p>

<p class="animation text2">スクロールで見えると</p>

<p class="animation text3">ふわっと表示されます</p>

ふわっとさせたい内容に「animation」というクラスをつけておきます。

cssを作ろう

次は装飾です。この部分は皆さまの好きにしてやってください。

<style type="text/css">
.text1{
	font-size:16px;
	line-height:200%;
	margin-top:800px;
	}
.text2{
	font-size:20px;
	line-height:200%;
	margin-top:400px;
	}
.text3{
	font-size:30px;
	line-height:200%;
	margin-top:400px;
	}

.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); }
}
</style>

さいごにjavascriptを入れる

さいごにjavascriptを入れれば完成です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$('.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 + 50){
   $(this).addClass("fadeInDown");
  }
 });
});
</script>

デモを用意しました

では、実際にどんな動くをするのかデモをご用意させていただきましたのでご確認ください。

デモはこちら

以上でふわっと表示したらごっつカッコええやんの説明を終了いたします。

さいごに

しょぼいサイトも良くなる?

ジャバスクリプトを使ってスクロールするとコンテンツをふわっと表示させると、いつものコンテンツもなんだか見栄えが良く感じませんか?

私個人は最近知ったのですが、海外サイトでよく使われていたらしいですね。

本当に情報収集全然してなかったのでダメっすね。

稼げる副業として何かコンテンツを探しているのですが、見つける時間がなくなってきた・・・

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Gmailでメールの配信エラーを解消する方法

ある日急にGmailからのメールが「メールの配信エラー」と出て送信できなくなった時の対処法をご説明いたします。

EC-CUBE特定の商品ステータスのみを特定の箇所に表示させる

代引きが出来ない商品やメール便が対応できない商品を目立たせたい時などに利用できます。

echoで連結する際に.(ドット)と,(カンマ)の違いについて

PHPを勉強中わからない事が出てきた時用のメモです。echoで連結する際に.(ドット)と,(カンマ)の違いについて

Googleアナリティクスにユーザー(自社)を追加する方法

クライアント様側のGoogleアナリティクスの情報を自分の持っているアカウントからアクセスできるようにする設定方法です。

カスタムフィールドを使った()を使う計算WordPress

金額と時間から時給を割り出す計算が結構簡単だったのでご紹介させて頂きます。

人気の副業記事(24時間で更新)