ホームページ制作フィールビー|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] ページ内リンクのアニメーション紹介

07 03 2016

ページ内リンクのアニメーション紹介

ページ内リンクのアニメーション紹介
jQueryで簡単に67種類のアニメーションが付けれる「PageTransitions」
これだけあると、便利ですね。

「PageTransitions」ダウンロードはこちら
「PageTransitions」ダウンローはこちら

ヘッダーに必要なcss、scriptを読み込みます。

<head>
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/multilevelmenu.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="css/animations.css" />
	<script src="js/modernizr.custom.js"></script>
</head>

その他のscriptを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/pagetransitions.js"></script>

アニメーションボタンの設置
「data-animation="1"」この数字を変更することによりアニメーションが変更できます。
詳しい動きはデモサイトをご覧ください。

<ul class="dl-menu">
	<li>
		<a href="#">Move</a>
			<ul class="dl-submenu">
				<li data-animation="1" data-url="#"><a href="#">Move to left/ from right</a></li>
				<li data-animation="2"><a href="#">Move to right/ from left</a></li>
				<li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
				<li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
			</ul>
		</li>
</ul>

ページ内のリンクが順番に表示されます。

<div id="pt-main" class="pt-perspective">
	<div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>01</h1></div>
	<div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>02</h1></div>
	<div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>03</h1></div>
	<div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>04</h1></div>
	<div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>05</h1></div>
	<div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions<br>06</h1></div>
</div>

デモサイト

「PageTransitions」は、サイトを大胆に見せたいときなど便利ですね。
以上「PageTransitions」のご紹介でした。

 

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

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.