稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

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

投稿日: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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPressでCSV登録が出来るReally Simple CSV Importer

とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいですよね。 関連記事: ワードプレスで記事の投稿数を表示させる方法 カスタムフィールドで画像を出力する …

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 関連記事: ECCUBE2.12のカテゴリに子カテゴリを表示させる方法 カスタムフィールドのループ内でループを使う方法 EC-CUBE特定の商品 …

WordPressで記事の盗用をさせないWP-Copyright-Protection

5時間かけて書いた記事が色々なところで盗用されているなんて悲しい事ありますよね 関連記事: Googleアドセンスから警告がきました WordPressのビジュアルとテキストの切り替えが出来ない時 年 …

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにありませんか? 関連記事: 検索結果に著者情報を掲載する方法 【2019年版】googleショッピング …

[2020年]百度baiduアカウントを日本から作る方法

百度Baiduアカウントが日本で作れないと言う情弱の皆さんのために日本でも簡単に作る方法をご紹介いたします。 関連記事: SMS認証突破アプリtextPlusの設定方法 エックスサーバーからさくらサー …