ホームページ制作フィールビー|FEELBEE

  • SERVICE
  • WORKS
  • NEWS & TOPICS
  • ABOUT
  • RECRUIT
  • CONTACT
  • Facebook
  • Instagram

  • HOME
  • SERVICE
    • ホームページ制作Website Design
    • スマートフォンサイト制作Smartphone site Design
    • ランディングページ制作Landing page Design
    • ポータルサイト制作Portal site Design
    • 下北沢ジャック広告Shimokita Jack
  • WORKS
  • NEWS & TOPICS
  • ABOUT US
  • RECRUIT
  • CONATCT
    • 採用情報Careers
    • パートナー募集Partner
  • facebook
  • Instagram

NEWS & TOPICS

  • NEWS TOP
  • お知らせ
  • ウェブブランディング
  • ウェブマーケティング
  • LIFE
  • WEB

[WEB] jQueryで簡単に動きを付ける

25 02 2016

簡単に動きを付けれるjQueryをご紹介致します。

簡単に動きを付けれるjQueryをご紹介致します。

今回ご紹介するjQueryはHPに簡単に動きが付けれる「wow.js」です。
HPをスクロールして表示されたら、指定した色々なアニメーションで表示させることが出来ます。

デモサイトはこちらWOWデモサイト

WOWデモサイト

動きのバリエーション「animate.css」を利用しています。
動きのバリエーションは、こちらから確認できます。Animate.css

【 使い方の説明 】

01.WOW.jsファイルをダウンロードします。GitHub WOW

<head>に「animate.css」「wow.js」「スクリプト」をセットします。

<head>
  ...
   <link rel="stylesheet" href="css/libs/animate.css">
   
   <script src="js/jquery-1.10.1.min.js"></script>
   <script src="dist/wow.js"></script>
   <script>
	 new WOW().init();
	</script>
  ...
</head>

02.「wow.js」の要素を設定します。
「class="wow"」を入力します。

<div class="wow">
動きをつけたいコンテンツ
</div>

03.「Animate.css」の動きを設定します。
Animate.cssから好きな動きを確認し、今回は「bounceInUp」を使用した場合下記コードのように書きます。

<div class="wow bounceInUp">
	動きをつけたいコンテンツ
</div>

これで完成です。

デモサイト

ニューストップに戻るニューストップに戻る

SERVICE

ホームページ・スマートフォンサイト・ランディングページ・ポータルサイト・ECサイトなどの
制作を通じてクライアント様のウェブ上での目標を実現化いたします。

Small ideas make a Big innovation

「小さなアイデアが大きなイノベーションを起こす!」
をコンセプトに、クライアントとユーザーの双方がイノベーションを起こすご提案をいたします。

クライアント様も気が付かない小さなアイデアを積み重ねて、大きなインパクトのあるソリューションを創造いたします。

  • Website Designホームページ制作
  • Smartphone site Designスマートフォンサイト制作
  • Landing page Designランディングページ制作
  • Portal site Designポータルサイト制作
  • Shimokita Jack下北沢ジャック広告

ABOUT
FEELBEEについて

ABOUT
FEELBEEについて

受付 平日10:00-18:00

03-6416-3903

お問合せフォーム

ホームページリニューアル制作サービス ブラボーウェブ

 

rindo

  • HOMEホームページ制作 トップ
  • ABOUT会社案内
  • 採用情報
  • パートナー募集
  • WORKS制作実績
  • NEWS & TOPICSお知らせ・最新情報
  • CONTACTお問合せ
  • SERVICEサービス紹介
  • ホームページ制作
  • スマートフォンサイト制作
  • ランディングページ制作
  • ポータルサイト制作
  • facebook
  • twitter

ホームページ制作フィールビー|FEELBEE

© Copyright FEELBEE. All Rights Reserved.