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

公開日: : 最終更新日:2016/11/05 副業で稼ぐ仕組みの作り方

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

はじめに

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

注意事項

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

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>

デモを用意しました

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

デモはこちら

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

さいごに

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

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

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

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

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

関連記事

ドメインの申込み方法【サクラインターネット】

今回はオリジナルのドメインを取得する方法です。前回、サクラインターネットにてサーバーをお申込みした方

記事を読む

コンタクトフォーム7からの迷惑メールを防ぐ方法

コンタクトフォーム7を入れたけど、今度はここから迷惑メールが来ることが増えます。迷惑メールをブロック

記事を読む

Jetpackのメール記事投稿

メールから簡単にブログの投稿をする事が出来るJetpackのメール記事投稿機能のご紹介です。 はじ

記事を読む

Googleアドセンスを申し込む前に

Googleアドセンスを申し込む際に色々とやらなければならない事がございます。今回はやらなければなら

記事を読む

tinymce advancedで絵文字もフォントサイズも可能に

ワードプレスって、顔文字が使えなかったり、フォントサイズがいじれなかったりと日本人のブログとしては微

記事を読む

ワードプレスで記事の投稿数を表示させる方法

ワードプレスで全○記事とブログ記事の投稿数を表示させる事が出来る方法をご紹介いたします。 はじ

記事を読む

データベース接続確立エラーの解消法

ワードプレスにアクセスすると真っ白の背景にデータベース接続確立エラーと言う文字が出た時の対処法です。

記事を読む

FC2ショッピングカートの商品登録方法とデザイン変更

FC2ショッピングカートの商品登録方法とデザインの変更方法をご紹介いたします。 はじめに F

記事を読む

会員制サイトが作れるWP-Membersの使い方【ワードプレス】

ワードプレスを使った会員制サイトを作るならWP-Membersと言うプラグインがあれば非常に簡単に制

記事を読む

エックスサーバーからさくらサーバーにドメインを移管してみた

エックスサーバーからさくらに移管しているって情報が少なかったので自分のメモとしてやってみました は

記事を読む

Message

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

現在の総記事数: 323件

さくらサーバーでワードプレスの無料SSLを導入してみたよ

さすがにそろそろSSL化しないといけないのでやってみたよ はじめに

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

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

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

→もっと見る

PAGE TOP ↑