ホームページ制作フィールビー|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] スマートな画像の見せ方

14 03 2016

写真の見せ方の紹介

スマートな写真の見せ方が素敵なzoom.js
「zoom.js」は、記事にある写真を見るときに、とってもスマートに素敵に写真を見せてくれます。
画像を拡大した後、元に戻す方法も、「クリック」、「スクロール」、「Escボタン」で元に戻るので動作に無駄がなくていいですね。

「zoom.js」ダウンロードはこちら
「zoom.js」ダウンローはこちら

必要なcss、scriptを読み込みます。

<head>
<link rel="stylesheet" type="text/css" href="css/zoom.css">
</head>
<body>
・・・
コンテンツ
・・・
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <script src="js/zoom.js"></script>
</body>
</html>

次に画像のimg要素に「data-action="zoom"」を加えて、画像の大きさはcssで調整で完成です。
詳しい動きはデモサイトをご覧ください。

<img src="img/palm.jpg" data-action="zoom">

デモサイト

「zoom.js」の動作で画像の見やすさと、動作に無駄がないところがいいですね。
以上「zoom.js」のご紹介でした。

 

Share on Facebook
Facebook
Pin on Pinterest
Pinterest
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

share...

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

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サービス紹介
  • ホームページ制作
  • スマートフォンサイト制作
  • ランディングページ制作
  • ポータルサイト制作
  • 下北沢ジャック広告

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

© Copyright FEELBEE. All Rights Reserved.