少し前に「jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみた…

Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることからレスポンシブで構築する際のviewport設定に迷うことがあります。すべてのデバイスで画面幅に合わせて綺麗に表示させるにはviewportの値を切り替えてしまった方が楽な場合もあったのでスマートフォン［iPhone/Android］と…

Webサイト制作において使用する画像ファイルや動画ファイルをフォーマットの違ったファイル形式に変換する場面にちょくちょく遭遇することがあります。その都度、変換条件にあったツールやWebサービスを使用したりしていましたがこの先とても便利に使えそうなファイル変換サービスがあったので2つほど自分用メモとして紹介してみます。C…

iPhone6 / iPhone6 Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。中でも「iPhone6 Plus」は解像度が1920×1080と大きく、タブレットに近いサイズにまでなっておりこの先、Webページを作成する際に「iPh…

最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますがjQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置しスクロールすると下から通常のコンテンツが表示される、とい…

以前にも、「jQueryでページ遷移時にスライドアニメーションをつけてみる」と題して、jQueryを使ってWebページの遷移時にスライドなどのアニメーション効果を実装させるスクリプトを紹介しましたが、同様の動作を簡単に実装できるjQueryプラグインがいくつかあったのでメモ書きとして紹介してみます。Animsition…

最近ではWebページにアニメーションを組み込む方法はjQueryやHTML5またはGIFアニメなどさまざまありますが、jQueryを使ってパラパラアニメのようにコマ分けした連続画像を切り替えることで動きを見せるフレームアニメーションjQueryプラグイン「jquery.frameAnimation.js」を作ってみたの…

Webページ上にアニメーション演出を組み込もうとする場合、今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますがHTML5でのアニメーション動作を簡単に作成することができる気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。Google Web DesignerGoog…

以前に「jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法」と題して、JSON形式でで外部HTML化したコンテンツ要素を「もっと見る」ボタンで追加するUIを紹介しました。当時公開したスクリプトでは「もっと見る」動作はページ内で１つの設置のみの構成になっていたところ1ページで複数設置…

以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか試しに作ってみたので紹介してみたいと思います。jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法まずは動作サンプルから。「jQu…