jQueryを使ってアハ体験？？
復活第2回目となりました、ウェブラボ技術メモです。 今回はなんと自作のjQueryとなります。 少し前にテレビやゲーム等で流行った、アハ体験をjQueryを使って再現致しました。 DEMOはこちら 今回使用させて頂いた画像は、友人のペットのフェレットです。 フェレットばかりに目がいってしまうと、画像の変化になかなか気が付かないかもしれませんね笑...
View ArticlejQuery NailThumbを使って自動でサムネイルを生成する
こんにちは。ウェブラボ技術メモです。 突然ですが、こんな事はありませんか？ 沢山写真を並べたギャラリーページを作りたい！！ でもサムネイルを用意するのが大変… 持っている画像はサイズも縦横比もバラバラだし… 第3回となる今回の技術メモでは、そんな時に便利なこちらのプラグインを紹介します。 jQuery NailThumb このプラグインを使うと簡単にサムネイルが生成されるのです。...
View ArticlejQueryを利用してシンプルなティッカーを作る
こんにちは。ウェブラボ技術メモ第4回目です。 今回はjquery.simpleTicker.jsを使ってシンプルなニュースティッカーを作ってみたいと思います。 ティッカーとは…特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。 IT用語辞典より...
View ArticlejQueryを利用して画像の遅延読み込みを行う
こんにちは。ウェブラボ技術メモ第5回目です。 今回はjQueryプラグイン「Lazy Load」を使って画像の遅延読み込みを行ってみたいと思います。 こんな事はありませんか？ ページに画像が多くて読み込みが遅い…少しでも表示速度を早くしたい… 表示の速さはサイトにとって大事です。ではなぜ表示が遅いとダメなのか？ 以下に例を2つ示します。 1.GoogleがSEOに影響があると発表したから...
View ArticlejQueryプラグイン『iCheck』を使ってカッコいいチェックボックス、ラジオボタンを作る
こんにちは。ウェブラボ技術メモも6回目となりました。 普段webサイトを制作していると、チェックボックスやラジオボタンなどはデフォルトのものから変更できないものと思い込んでしまう人もいるかと思います。恥ずかしながら私もそうでした。 ところが、実はJQueryでカスタマイズすることが可能なのです。...
View ArticlejQueryでWebサイトの背景をおしゃれにする
こんにちは、第7回ウェブラボ技術メモです。 今回は、Webサイトの背景をおしゃれにするプラグイン『Particleground』を実装してみたいと思います。...
View Articlegoogleの画像検索のようなギャラリーをつくる
こんにちは、ウェブラボ技術メモです。 第8回目となる2015年最初の技術メモでは、ギャラリーに使えるjavascriptを紹介したいと思います。 ギャラリーと言えば、lightboxを使って、画面の上に大きな画像が表示されるようなものをよく見かけますが、今回は誰もが見慣れたgoogleの画像検索画面のようなギャラリーを作成したいと思います。...
View Articleセレクトボックスのタグ拡張
サイト https://select2.github.io/ DL https://github.com/select2/select2/tags まずはこちらのサイトから今回使用するcssやjavascriptなどのファイルをダウンロードし、htmlのhead内にcssとjavascriptを読み込ませます。 <link...
View Articleページのローディング画面を作成する
第10回目ウェブラボ技術メモです。 今回はjQueryを使って、ページが読み込まれるまで表示されるローディング画面を作ります。 ページの表示速度が遅いのは、ユーザーが見るのをやめてしまう大きな原因になってしまいます。そこで、少しでも待ってもらう為にページの読み込み状況を表示させたいと思います。 参考にさせて頂いたサイトはこちら。では早速実装してみましょう。...
View ArticleClik here to view.
SVGアニメーション
こんにちは、ウェブラボ技術メモ第12回目です。 今回はSVGを使って、アニメーションをつけたいと思います。 まずはSVG作成からです。 1.イラストレータにて適当な文字を作成 イラストレータにて適当な文字を作成し、文字をアウトライン化してください。 2.SVGファイルとして保存する 保存する時にSVGファイルを選択することができるので、SVGで保存してください。 3.Lazy Line...
View Article画像並び替えプラグイン レスポンシブ対応
こんにちは、ウェブラボ技術メモ第15回目です。 今回は画像を綺麗に並べてくれるプラグインの紹介です。 今回使用するプラグインはこちらです。 http://miromannino.github.io/Justified-Gallery/ DLしたファイルの、jsとcssを読み込ませます。 <link rel="stylesheet" type="text/css"...
View ArticleJSで動画を後から読み込む
こんにちは、ウェブラボ技術メモ第16回目です。 1つのページに複数の動画を埋め込むとページの表示速度が遅くなりますよね。 これを改善するために「最初に代替画像を表示しておき、クリックしたら動画を読み込む」という処理をするJavascriptを実装してみたいと思います。 今回はyoutubeに対応したものを実装していきます。...
View ArticleCSS3で画像にマウスオーバーした時に効果をつける
こんにちは、ウェブラボ技術メモ第11回目です。 今回はcss3を使って、画像に少し効果をつけてみたいと思います。 今回使うのはhtmlとcssだけです。 まずはhtmlに画像ファイルを一つ記述します。 imgの後にspanがついていますが、これも効果を与えるのに必要なので記述します。 続いてcssを書いていきます a { position: relative; display:...
View ArticleClik here to view.
JSを使わずに背景に動画を使う
こんにちは。 ウェブラボ技術メモ第14回です。 ここ数年で、背景に動画を使ったサイトを見る機会が増えました。 製品の使用イメージやお店などの雰囲気をインパクトと共に伝えることができ、よりユーザーの視点を画面に集中させることができますが、動画を用いるため、重くなる、旧ブラウザに対応できないなどといったデメリットもあります。 動画の表示にはjavascriptを使う方法もありますが、...
View Articleサイトのツアーを実装するプラグイン
第18回目になりました。技術メモです。こんにちは。 今回ご紹介するjqueryプラグインは、SNSやCMSなどで見た事がある方もいらっしゃるのではないでしょうか。 サイトのツアーを実装するプラグインです。 「サイトのツアー？？？」と疑問に思われる方もおられると思いますので、 具体的にどのような事が出来るのか、まずはデモ画面をご覧ください。 デモ画面はこちら...
View Article画像をパズルにしてくれるプラグイン
こんにちは。 第19回目になりました。 クリスマスですね！ クリスマスと言えばサンタですね！！ サンタといえば、パズルですね（？） ということで、画像をパズルにしてくれるプラグインを紹介します。 jqPuzzle – Customizable Sliding Puzzles with jQuery http://www.2meter3.de/jqPuzzle/index.html...
View Article印刷用CSSを使わずに特定の要素のみを印刷する
こんにちは。 第20回目ウェブラボ技術メモです。 今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。 普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。 しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。 ですが、このプラグインを使えば、もうそんな必要はありません!！...
View Articleレイアウトを二分割してスライドさせるプラグイン
こんにちは。 ウェブラボ技術メモです。 今回は少し動きのあるサイトで使えそうなプラグインをご紹介します。 どんなプラグインか、説明するより見て操作してみるのが一番でしょう。 ということで、まずはデモをご覧ください。 レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。...
View Article簡単にフリップコンテンツを実装する
こんにちは、ウェブラボ技術メモです。 今回は簡単にフリップコンテンツを実装できるプラグイン「jQuery.Flipster」を紹介したいと思います。 フリップコンテンツと聞くと導入に敷居が高そうに聞こえますが、全然そんなことはありません！！すごい簡単に実装できてしまうんです！！ では早速実装していきます。 プラグインは下記よりダウンロードしてください。 ・Github...
View Article白黒画像をマウスオーバーでカラーに
こんにちは。ウェブラボ技術メモです。 画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。 まずは下記ページからファイルをダウンロードします http://gianlucaguarini.github.io/jQuery.BlackAndWhite/ 1.外部ファイル読み込み...
View Article