作成者別アーカイブ: Coding_team

instagramの写真をWebサイトに埋め込む

tec1606_02

こんにちは!ウェブラボ技術メモです。 みなさんはinstagramを利用した事はありますか? instagramとは写真や動画を撮影、加工、共有できるサービスの事で、今もっとも人気のあるSNSといっても良いでしょう。 今回はいつもとは少し趣向を変えて、instagramで投稿した写真をページに埋め込む方法をやっていきたいと思います。 埋め込みにあたって、ここ…続きを読む

  • このページを共有する

写真をちりばめた感じのギャラリーを実装する

1605tec

こんにちは、ウェブラボ技術メモです。 今回は、一味違ったギャラリーを実装できる「Photopile JS」を実装してみたいと思います。 まずはどんなものなのか作成したDEMOをご覧ください。 写真をちりばめたような変わったもので、ドラッグ&ドロップで見たい画像を探すような感じですね。 しかもリロードするたびにランダムで画像が配置されます。 一見すると導入が大…続きを読む

  • このページを共有する

白黒画像をマウスオーバーでカラーに

1604tec

こんにちは。ウェブラボ技術メモです。 画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。 まずは下記ページからファイルをダウンロードします http://gianlucaguarini.github.io/jQuery.BlackAndWhite/ 1.外部ファイル読み込…続きを読む

  • このページを共有する

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

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を読み込ませます。

オプシ…続きを読む

  • このページを共有する