写真をちりばめた感じのギャラリーを実装する
こんにちは、ウェブラボ技術メモです。 今回は、一味違ったギャラリーを実装できる「Photopile JS」を実装してみたいと思います。 まずはどんなものなのか作成したDEMOをご覧ください。 写真をちりばめたような変わったもので、ドラッグ＆ドロップで見たい画像を探すような感じですね。 しかもリロードするたびにランダムで画像が配置されます。 一見すると導入が大変そうに思えますが、とっても簡単です。...
View ArticleClik here to view.
instagramの写真をサイトに埋め込む
こんにちは！ウェブラボ技術メモです。 みなさんはinstagramを利用した事はありますか？ instagramとは写真や動画を撮影、加工、共有できるサービスの事で、今もっとも人気のあるSNSといっても良いでしょう。 今回はいつもとは少し趣向を変えて、instagramで投稿した写真をページに埋め込む方法をやっていきたいと思います。...
View Articleコードを公開共有できるサイト「CodePen」を活用してみる
こんにちは、ウェブラボ技術メモです。 今回は、HTML、CSS、Javascriptなどの様々なコードを公開共有できるサイト「CodePen」を活用してみたいと思います。 ■CodePen http://codepen.io/ このサイトの便利なところは公開されているコードをその場で編集できたり、webサイトに埋め込んだりすることができます。...
View ArticleFlexboxでコンテンツを入れ替える
こんにちは、8月ももうすぐ終わり、宿題を溜め込んだ子どもたちには憂鬱な時期ですね。 混雑しない9月にしたり顔で夏休みを取ろうと企てているコーダーがお送りします。 技術メモです。 今回はCSS3のFlexboxについて少し紹介したいと思います。 Flexboxとは、要素のサイズが不明なものでも変化するものでも、柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。...
View ArticlejQueryで外部にあるHTMLを読み込む
こんにちは、ウェブラボ技術メモです。 今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。 具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。 外部にあるお知らせ一覧ページは以下のようなものを作りました。 →お知らせ一覧ページ｜外部HTML ■外部ページの読み込みたい部分のHTML <div...
View ArticleJSとCSS3を使って画像にブラー効果をかける
こんにちは、すっかり秋めいてきましたが、気温なのか、花粉なのか、 おかげで鼻水が止まりません。ウェブラボ技術メモです。 さて、今回はCSSやJSを使用して作成されたエフェクトを共有、公開するサイト「codrops」で 公開されていたJSとCSS3を使ったホバーエフェクトをご紹介します。 これまでのようにJSを読み込ませるだけだったり、CSSを数行書けばできる！というものでは無いので...
View Article無限ループさせるスライダーを実装する
こんにちは、ウェブラボ技術メモです。 今回はコンテンツ要素を無限ループさせるスライダーを実装してみたいと思います。 まずはどのようなスライダーなのか、作成したDEMOをご覧ください。 横並びになっている5個の画像が自動でスライドしているのがわかりますね。 実装にあたってこちらの紹介ページを参考にさせていただきました。...
View Article要素を3D回転させられるプラグイン「TURNBOX.js」
こんにちは、最近どんどん寒くなってきました。 風邪など引かないよう気をつけて下さいね。 ではウェブラボ技術メモです。 要素を3D回転させられるjqueryプラグイン「TURNBOX.js」を使用してみたいと思います。 まずは公式のDOWNLOADタブ内のDownloadボタンからファイルを落としてきてください。 →TURNBOX.js公式...
View Article波紋のエフェクトを実装する「jQuery Rippleria」
新年1回目のウェブラボ技術メモです。 正月休みはいかがお過ごしだったでしょうか。 今年は姪っ子へのお年玉のあげ方を悩みすぎたお正月でした。 悩んで悩んだ結果、結局いつもの宝探し形式です。 あけましておめでとうございます。 さて、今回はマテリアルデザインでよく見かける、波紋のエフェクトをjqueryプラグイン「jQuery Rippleria」を使用して実装してみたいと思います。...
View Articleマウスカーソルの隣に吹き出しを表示する
こんにちは、ウェブラボ技術メモです。 今回はマウスカーソルの座標を使って、マウスカーソルの隣に吹き出しを表示してみます。 DEMOはこちら マウスカーソルの座標を取得する方法については、こちらのページを参考にさせていただきました。 http://hakuhin.jp/js/mouse.html それでは実装まで解説していきます。 まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、...
View Article背景画像でスライドショーを実装する
こんにちは、ウェブラボ技術メモです。 今回は、背景画像でスライドショーを実装できるjQueryプラグイン「Vegas」を利用してみたいと思います。 このプラグインでは動画も背景に埋め込めるみたいですが、今回は画像だけで実装していきます。 まずは公式からファイル一式をダウンロードしましょう。右下辺りにDOWNLOADとあります。 →「Vegas」公式...
View ArticleClik here to view.
IE9のサポートが終了して
こんにちは、技術メモです。 新年度が始まり、新人たちのキラキラした姿が眩しくて、 負けじとモチベーションを上げていきたいと思います。 この技術メモも次回からは少しリニューアルして、これまでの技術ブログと共に デザイナーによるデザインのネタブログも始めたいと思います。 これからもよろしくお願いいたします。 さて、今回はこれまでのプラグインの紹介とは少し趣向を変えて...
View Article要素をブルブル震わせるプラグイン「CSShake」
こんにちは、ウェブラボ技術メモです。 今回はテキストや画像といったHTML要素をブルブル震わせるプラグイン「CSShake」を使用してみようと思います。 まず公式サイトの一番下までスクロールし、「Download」ボタンからCSSファイルをダウンロードします。 「CSShake」公式サイト 公式サイトでも紹介されているような動きを利用して、簡単なDEMOを作成しました。 DEMOはこちら...
View Articleグラデーションのアニメーションが簡単に作れるGranim.js
こんにちは、ウェブラボ技術メモです。 最近、アニメーションがついたメインビジュアルが流行っていますよね。 そこで今回はメインビジュアルに使えそうな、グラデーションのアニメーションが簡単にできるgranim.jsを実装してみたいと思います。 グラデーションも2017年webデザインのトレンドなので、ぜひお試しください！ まず、下記サイトの「DOWNLOAD」から最新版をダウンロードします。...
View Article波紋を作るjQueryプラグイン「jQuery Ripples」
こんにちは、ウェブラボ技術メモです。 今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。 まずはDEMO用意致しましたのでご覧下さい。 →DEMO 背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。 一見難しそうに見えますが簡単に実装することが可能です。...
View Articleカラフルなメッシュ画像を表示させる「Trianglify」
こんにちは、ウェブラボ技術メモです。 今回はカラフルなメッシュ画像を表示させる「Trianglify」を使用してみようと思います。 設定を比較するDEMOを作成しました。 DEMOはこちら 様々なパターンがありますが、短いコードで簡単に設定できてしまいます。 それでは実際に実装していきましょう。 以下からプラグインをダウンロードしてください。 github...
View ArticleClik here to view.
キャッシュの解決方法
こんにちは、ウェブラボ技術メモです。 先日、GIFアニメをJSで表示させたところ、 キャッシュでうまくループされませんでした…(´；ω；`) 今回は、更新時の厄介者、キャッシュの解決方法についてまとめてみました。 1. キャッシュを削除するタグを入れる HTMLに入れるだけで簡単にキャッシュが残らなくなるそうです。 2. タイムスタンプなど日時を入れる 私が実際に試した方法です。...
View Articleフォームのメールアドレス入力欄に補完機能をつける
こんにちは、ウェブラボクリエイターズメモです。 10月に入ってから急に寒くなってきましたね、体調管理には気をつけていきましょう。 さて今回はフォームのメールアドレス入力欄に補完機能をつけるjQueryプラグイン「email-autocomplete」を紹介したいと思います。 では早速実装していきます。 まずは以下からプラグインをダウンロードしましょう。 →github...
View ArticleSVGでグラフを描写できるChartist.js
こんにちは、ウェブラボ技術メモです。 今回はSVGでグラフを描写できる「Chartist.js」を紹介いたします。 DEMOはこちら よく見かける円グラフなどが、簡単に設定できてしまいます。 ちょっと数値を変更したいといった修正作業もお手軽なので魅力的ですね。 それでは実際に実装していきましょう。 以下からプラグインをダウンロードしてください。 github...
View ArticleClik here to view.
スクロール時にアニメーションを実装できるScrollTrigger.js
こんにちは、ウェブラボ技術メモです。 今回は、画面スクロール時のアニメーション「ScrollTrigger.js」を紹介します。 まずデモページはこちら ■概要 スクロール時にアニメーションさせたい要素が表示範囲に入っているか、いないかを判定しクラスの付け替えをしてくれるプラグインです。 ■実装方法 1. まずプラグインをダウンロードします。(ScrollTrigger.min.js) 2....
View Article