作成者別アーカイブ: Coding_team

波紋を作るjQueryプラグイン「jQuery Ripples」

tecmemo1707

こんにちは、ウェブラボ技術メモです。 今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。 まずはDEMO用意致しましたのでご覧下さい。 →DEMO 背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。 一見難しそうに見えますが簡単に実装することが可能です。 では解説していきま…続きを読む

  • このページを共有する

グラデーションのアニメーションが簡単に作れるGranim.js

こんにちは、ウェブラボ技術メモです。 最近、アニメーションがついたメインビジュアルが流行っていますよね。 そこで今回はメインビジュアルに使えそうな、グラデーションのアニメーションが簡単にできるgranim.jsを実装してみたいと思います。 グラデーションも2017年webデザインのトレンドなので、ぜひお試しください! まず、下記サイトの「DOWNLOAD」か…続きを読む

  • このページを共有する

要素をブルブル震わせるプラグイン「CSShake」

tec1705

こんにちは、ウェブラボ技術メモです。 今回はテキストや画像といったHTML要素をブルブル震わせるプラグイン「CSShake」を使用してみようと思います。 まず公式サイトの一番下までスクロールし、「Download」ボタンからCSSファイルをダウンロードします。 「CSShake」公式サイト 公式サイトでも紹介されているような動きを利用して、簡単なDEMOを作…続きを読む

  • このページを共有する

IE9のサポートが終了して

1704_tech

こんにちは、技術メモです。 新年度が始まり、新人たちのキラキラした姿が眩しくて、 負けじとモチベーションを上げていきたいと思います。 この技術メモも次回からは少しリニューアルして、これまでの技術ブログと共に デザイナーによるデザインのネタブログも始めたいと思います。 これからもよろしくお願いいたします。 さて、今回はこれまでのプラグインの紹介とは少し趣向を変…続きを読む

  • このページを共有する

背景画像でスライドショーを実装する

tech1703

こんにちは、ウェブラボ技術メモです。 今回は、背景画像でスライドショーを実装できるjQueryプラグイン「Vegas」を利用してみたいと思います。 このプラグインでは動画も背景に埋め込めるみたいですが、今回は画像だけで実装していきます。 まずは公式からファイル一式をダウンロードしましょう。右下辺りにDOWNLOADとあります。 →「Vegas」公式 HTML…続きを読む

  • このページを共有する

マウスカーソルの隣に吹き出しを表示する

tec1702

こんにちは、ウェブラボ技術メモです。 今回はマウスカーソルの座標を使って、マウスカーソルの隣に吹き出しを表示してみます。 DEMOはこちら マウスカーソルの座標を取得する方法については、こちらのページを参考にさせていただきました。 http://hakuhin.jp/js/mouse.html それでは実装まで解説していきます。 まずはhead内でjquer…続きを読む

  • このページを共有する

波紋のエフェクトを実装する「jQuery Rippleria」

tec1701

新年1回目のウェブラボ技術メモです。 正月休みはいかがお過ごしだったでしょうか。 今年は姪っ子へのお年玉のあげ方を悩みすぎたお正月でした。 悩んで悩んだ結果、結局いつもの宝探し形式です。 あけましておめでとうございます。 さて、今回はマテリアルデザインでよく見かける、波紋のエフェクトをjqueryプラグイン「jQuery Rippleria」を使用して実装し…続きを読む

  • このページを共有する

要素を3D回転させられるプラグイン「TURNBOX.js」

tecmemo1612

こんにちは、最近どんどん寒くなってきました。 風邪など引かないよう気をつけて下さいね。 ではウェブラボ技術メモです。 要素を3D回転させられるjqueryプラグイン「TURNBOX.js」を使用してみたいと思います。 まずは公式のDOWNLOADタブ内のDownloadボタンからファイルを落としてきてください。 →TURNBOX.js公式 公式にもDEMOが…続きを読む

  • このページを共有する

無限ループさせるスライダーを実装する

demo

こんにちは、ウェブラボ技術メモです。 今回はコンテンツ要素を無限ループさせるスライダーを実装してみたいと思います。 まずはどのようなスライダーなのか、作成したDEMOをご覧ください。 横並びになっている5個の画像が自動でスライドしているのがわかりますね。 実装にあたってこちらの紹介ページを参考にさせていただきました。 http://black-flag.ne…続きを読む

  • このページを共有する

JSとCSS3を使って画像にブラー効果をかける

4

こんにちは、すっかり秋めいてきましたが、気温なのか、花粉なのか、 おかげで鼻水が止まりません。ウェブラボ技術メモです。 さて、今回はCSSやJSを使用して作成されたエフェクトを共有、公開するWebサイト「codrops」で 公開されていたJSとCSS3を使ったホバーエフェクトをご紹介します。 これまでのようにJSを読み込ませるだけだったり、CSSを数行書けば…続きを読む

  • このページを共有する