カテゴリー別アーカイブ: Webプログラミング

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

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を数行書けば…続きを読む

  • このページを共有する

jQueryで外部にあるHTMLを読み込む

tecmemo1609

こんにちは、ウェブラボ技術メモです。 今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。 具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。 外部にあるお知らせ一覧ページは以下のようなものを作りました。 →お知らせ一覧ページ|外部HTML ■外部ページの読み込みたい部分のHTML …続きを読む

  • このページを共有する

Flexboxでコンテンツを入れ替える

tecmemo1608

こんにちは、8月ももうすぐ終わり、宿題を溜め込んだ子どもたちには憂鬱な時期ですね。 混雑しない9月にしたり顔で夏休みを取ろうと企てているコーダーがお送りします。 技術メモです。 今回はCSS3のFlexboxについて少し紹介したいと思います。 Flexboxとは、要素のサイズが不明なものでも変化するものでも、柔軟なレイアウトを実現できるCSS3の新しいレイア…続きを読む

  • このページを共有する

コードを公開共有できるWebサイト「CodePen」を活用してみる

tec1607_01

こんにちは、ウェブラボ技術メモです。 今回は、HTML、CSS、Javascriptなどの様々なコードを公開共有できるWebサイト「CodePen」を活用してみたいと思います。 ■CodePen http://codepen.io/ このWebサイトの便利なところは公開されているコードをその場で編集できたり、Webサイトに埋め込んだりすることができます。 ア…続きを読む

  • このページを共有する

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

tec1606_02

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

  • このページを共有する

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

1605tec

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

  • このページを共有する