作成者別アーカイブ: Coding_team

簡単にフリップコンテンツを実装する

memo1603

こんにちは、ウェブラボ技術メモです。 今回は簡単にフリップコンテンツを実装できるプラグイン「jQuery.Flipster」を紹介したいと思います。 フリップコンテンツと聞くと導入に敷居が高そうに聞こえますが、全然そんなことはありません!!すごい簡単に実装できてしまうんです!! では早速実装していきます。 プラグインは下記よりダウンロードしてください。 ・G…続きを読む

  • このページを共有する

レイアウトを二分割してスライドさせるプラグイン

multiscroll

こんにちは。 ウェブラボ技術メモです。 今回は少し動きのあるWebサイトで使えそうなプラグインをご紹介します。 どんなプラグインか、説明するより見て操作してみるのが一番でしょう。 ということで、まずはデモをご覧ください。 レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。 何か対比したいものを左右に並べても良いでしょうし、…続きを読む

  • このページを共有する

印刷用CSSを使わずに特定の要素のみを印刷する

印刷用CSSを使わずに特定の要素のみを印刷する

こんにちは。 第20回目ウェブラボ技術メモです。 今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。 普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。 しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。 ですが、このプラグインを使えば、もう…続きを読む

  • このページを共有する

画像をパズルにしてくれるプラグイン

santa

こんにちは。 第19回目になりました。 クリスマスですね! クリスマスと言えばサンタですね!! サンタといえば、パズルですね(?) ということで、画像をパズルにしてくれるプラグインを紹介します。 jqPuzzle – Customizable Sliding Puzzles with jQuery http://www.2meter3.de/jqPuzzle…続きを読む

  • このページを共有する

Webサイトのツアーを実装するプラグイン

第18回目になりました。技術メモです。こんにちは。 今回ご紹介するjqueryプラグインは、SNSやCMSなどで見た事がある方もいらっしゃるのではないでしょうか。 Webサイトのツアーを実装するプラグインです。 「Webサイトのツアー???」と疑問に思われる方もおられると思いますので、 具体的にどのような事が出来るのか、まずはデモ画面をご覧ください。 デモ画…続きを読む

  • このページを共有する

JSで動画を後から読み込む

movie_click

こんにちは、ウェブラボ技術メモ第16回目です。 1つのページに複数の動画を埋め込むとページの表示速度が遅くなりますよね。 これを改善するために「最初に代替画像を表示しておき、クリックしたら動画を読み込む」という処理をするJavascriptを実装してみたいと思います。 今回はyoutubeに対応したものを実装していきます。 まずはhtmlのhead内でjqu…続きを読む

  • このページを共有する

画像並び替えプラグイン レスポンシブ対応

こんにちは、ウェブラボ技術メモ第15回目です。 今回は画像を綺麗に並べてくれるプラグインの紹介です。 今回使用するプラグインはこちらです。 http://miromannino.github.io/Justified-Gallery/ DLしたファイルの、jsとcssを読み込ませます。

オプシ…続きを読む

  • このページを共有する

JSを使わずに背景に動画を使う

thumb_demo1507

こんにちは。 ウェブラボ技術メモ第14回です。 ここ数年で、背景に動画を使ったWebサイトを見る機会が増えました。 製品の使用イメージやお店などの雰囲気をインパクトと共に伝えることができ、よりユーザーの視点を画面に集中させることができますが、動画を用いるため、重くなる、旧ブラウザに対応できないなどといったデメリットもあります。 動画の表示にはjavascri…続きを読む

  • このページを共有する

SVGアニメーション

150525001

こんにちは、ウェブラボ技術メモ第12回目です。 今回はSVGを使って、アニメーションをつけたいと思います。 まずはSVG作成からです。 1.イラストレータにて適当な文字を作成 イラストレータにて適当な文字を作成し、文字をアウトライン化してください。 2.SVGファイルとして保存する 保存する時にSVGファイルを選択することができるので、SVGで保存してくださ…続きを読む

  • このページを共有する

CSS3で画像にマウスオーバーした時に効果をつける

こんにちは、ウェブラボ技術メモ第11回目です。 今回はcss3を使って、画像に少し効果をつけてみたいと思います。   今回使うのはhtmlとcssだけです。 まずはhtmlに画像ファイルを一つ記述します。   imgの後にspanがついていますが、これも効果を与えるのに必要なので記述します。   続いてcssを書いていきます […続きを読む

  • このページを共有する