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

公開日: : 最終更新日: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>

デモを用意しました

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

デモはこちら

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

さいごに

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

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

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

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

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

広告

関連記事

EC-CUBEでPHPを使う方法

EC-CUBEでもPHPが使えました!これで色々捗るね はじめに 私みたいなコピペでしか

記事を読む

no image

cssのハックと確認方法

自分のホームぺージは見る人によってブラウザが異なります。表示が崩れている場合の事も考えて確認方法とc

記事を読む

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

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

記事を読む

ワードプレスに任意の画像サイズを追加する方法

2種類のサムネイル画像を表示させたいなぁって時に使えた技です。 はじめに ワードプレスだと元々サ

記事を読む

特定のカテゴリー情報一覧をquery_postsで取得する方法

query_postsを使ってランダム表示一覧で取得したところ、特定のカテゴリー情報しか取得されてい

記事を読む

無料アクセス解析 ace-analyzerの登録方法

完全無料で使えるアクセス解析 ace-analyzerの登録方法をご紹介いたします はじめに

記事を読む

お名前.comでドメインを取得する方法

お名前.comでドメインを取得した事がない方向けにご紹介させて頂きます はじめに 個人的

記事を読む

ワードプレスで503が出た時チェックしたいところ

ワードプレスをインストールしているさくらサーバーである日急に503が出たのでどうすれば元に戻ったのか

記事を読む

no image

WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう はじめに 最近クライアン

記事を読む

Jetpackの統計情報

ワードプレスにJetpackを利用するきっかけとなった機能の一つがこの統計情報です。 はじめに

記事を読む

広告

Message

広告

現在の総記事数: 288件

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

yahooリスティング広告のキーワード単価を調べる方法

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールで

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気

yahooリスティング広告らくアドの利用方法

yahooリスティング広告の使い方がわからない方はらくアドを利用してみ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑