READ MORE

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法としてパララックス(少々今さら感も感じますが・・・)効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ次画面へ遷移するさせる技法がよく見られます。そんなWebページ内でスク…

READ MORE

Googleさんの画像検索で使われているサムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がるUI。このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので実験がてらjQueryを使…

READ MORE

ちょっと前に話題になっていた、YouTubeやGoogleマップやInstagramなどのページ内に埋め込む際のURLや埋め込みコードを簡単にレスポンシブ化してくれるサービス「embedresponsively.com」が便利に使えそうだったので自分用メモとして紹介してみます。embedresponsively.com…

READ MORE

TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったのでjQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。jQueryでページ…

READ MORE

先日ここで、レスポンシブ対応のスライドショーとして、「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたがフェード切り替えばかりじゃおもしろくないと思い同様の構成で切り替わる際に、画像を分割してアニメーション…

READ MORE

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応さ…

READ MORE

jQueryなどを使ってページ遷移をしない構成で画面切り替えを作る際通常ではURLは変わることなく一つのURLみとなりブラウザの「戻る」や「進む」が効かなかったり直接、切り替え後の特定の画面へ遷移することができなかったりします。その様なページ遷移無しの切り替えの場合でもブラウザの「戻る」や「進む」を有効にし切り替え画面…

READ MORE

Android(アンドロイド)開発では通常のWebサイト制作では聞きなれないdp(dip)という単位を使用することがあります。Androidでの基本的な5つの解像度【ldpi】【mdpi】【hdpi】【xhdpi】【xxhdpi】の各画面で表示する際の共通単位になるようですが、このdp(dip)の値をpxに変換する必要…

READ MORE

レスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルがそこそこ溜まっていたので11種類ほどま…

READ MORE

先日ここでレスポンシブ対応のスライドショーの試作品として「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題してjQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを紹介しましたが、操作面に関してフリック操作には対応していなかったので、メイン部分に…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR