2015年の記事一覧

CSS3で画像キャプションのマウスホバーアニメーション5種

CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。
ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。

iPhoneだと電話番号に自動でリンクを付けてくれますが、電話番号が画像だったりするとリンクしてくれません。
そんなときの為にjQueryで自動でリンクする方法をご紹介します。

jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。

Wixはコーディング不要で、ドラッグ＆ドロップの簡単操作だけでホームページを作ることができるWebサービスです。

CakePHP3になりPHPのビルトインウェブサーバーを利用した簡易的なサーバーが内臓されました。
この機能とSQLite（これもPHPに含まれている）を使用すればApacheなど環境を構築しなくてもWebアプリの開発を始めることができます。

CSSDevices はクラス指定するだけで画像にiPhone/iPad/Apple Watch/Mac bookのフレームを付けてくれるCSSです。

YoutubeAPI v2が廃止になりまして過去に書いた方法が使えなくなったので、とりあえずお手軽に表示する方法をご紹介します。

ファーストビューでは大きめのナビゲーションで、スクロールするとアニメーションしてナビゲーションの幅が狭くなって固定されるという動きのやつです。

指定した数値までカウントアニメーションしてくれるjQueryプラグイン「jquery-countTo」のご紹介をいたします。

セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない!
斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。