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

公開日: : 最終更新日: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サイトカスタマイズ

前回お話した無料でECサイトが3分で作れるのデザインなどのカスタマイズ方法についてご紹介いたします。

記事を読む

no image

PS Auto Sitemapでサイトマップを自動生成(ワードプレス)

ブログやホームページを見に来られた人向けのサイトマップをワードプレスであれば自動生成してくれるプラグ

記事を読む

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 はじめに

記事を読む

ワードプレスでステップメールを無料で使えるプラグイン

ステップメールが無料で使えるワードプレスのプラグインをご紹介させて頂きます。 はじめに

記事を読む

日付の分岐を簡単に導入する方法

これでオートメーション化が捗ります はじめに ブログを書く時って、私のように稼げる副業をしている

記事を読む

ムーバブルタイプからワードプレスに引越しする方法

ムーバブルタイプからワードプレスに引越しをした時のメモです。 はじめに 今回はムーバブルタイプか

記事を読む

カスタムフィールドを全ページに表示させる方法

カスタムフィールドって特定のページにしか表示出来ない物だと思っていましたが、全ページに反映する方法を

記事を読む

カスタムフィールドをor条件で表示させる

AもしくはBの条件に当てはまる場合に表示させると言う分岐?のやり方がわかったのでご紹介いたします。

記事を読む

アメブロのRSS内にあるPRを削除してワードプレスに表示させる方法

アメブロのRSSに「PR」と言う広告が出てしまい何とか削除したい人へ はじめに ワードプレスにア

記事を読む

ワードプレスでメルマガが使えるSubscribe2

無料でメルマガを使う事が出来るワードプレスのプラグインSubscribe2のご紹介です。

記事を読む

広告

Message

広告

現在の総記事数: 301件

大型らくらくメルカリ便の登録から発送までの流れ

めったにはありませんが、大型メルカリ便を利用してみましたのでその時の流

メルカリで商品購入から評価までの流れ

メルカリで購入したいけど色々不安な人へ はじめに メルカリでは商品

googleの検索結果から特定の言葉を非表示させる方法

googleの検索結果にある特定のサイトを表示させたくない時にお勧めの

WordPressで特定の画像名だとアップされない

画像にバナーサイズを記載してアップする人もいるでしょうが、これアッ

【無料公開】メルカリで月10万以上稼いだテクニック

メルカリに出品しているけど、なかなか売れない人の参考になれば嬉しいです

→もっと見る

  • まだデータがありません。


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