以前も当ブログでjQueryを使ったループスライダーを紹介しましたがフリック（ドラッグ）操作が実装されていませんでした。ループスライダーにフリック（ドラッグ）動作が実装されたパターンはわりと需要があるのにそのような仕様のプラグイン等はあまり一般的に公開されていないようだったので、以前紹介したスクリプトを改良してフリック…

最近ではTHETAやGoProなどのカメラを使って360度見渡せる写真を撮影することが簡単になり、Webサイト上にも360度の写真を掲載するコンテンツを見かけるようになりました。室内の様子やきれいな風景などユーザーが自ら画面を操作して360度の世界を見渡せることでWebサイト上で今までとは違った体験ができ、臨場感のある…

ポスターやフライヤー、名刺やロゴ、SNS用画像などのさまざまなグラフィックデザインをクオリティの高い素材を使ってブラウザ上でドラッグ&ドロップで簡単に作成できてしまうオンラインサービス「Canva（キャンバ）」がとても便利に活用できそうだったのでご紹介。ポスターやフライヤーなどのグラフィックデザインを無料で簡単に作成す…

Webページ上の要素が一定時間の間隔でスライドしてループし続けるカルーセルパネルUI。単純に並べられた要素がスライドするカルーセルはよくありますが並べられた要素の中央に位置する要素のみを拡大表示させるという少し変わった演出を加えたカルーセルパネルUIをjQueryを使って作ってみたので紹介してみます。jQueryで中央…

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…

jQueryプラグインをまとめて紹介している記事やWebサイトは数多くありますが約1000個のjQueryプラグインを収集している「Unheap - A tidy repository of jQuery plugins」がプラグインを探す際にとても活用できそうだったので自分用メモとしてご紹介。Unheap - A t…

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

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

一年以上前の記事になりますが「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」と題して、画像がクロスフェードするだけのシンプルな画像ビューアーを実装するスクリプトを紹介しましたが紹介後、１ページ内に複数設置やリンクを張ったりキャプション（テキスト）を追加するパターンなどなど数多…

jQueryを使ってのコンテンツスライダーや画像スライドショーなどを出来るだけシンプルなスクリプトでに実装する実験やサンプルをいくつか紹介してきていますが最近よく見かける（流行り？）ブラウザウィンドウ画面の幅をめいっぱい使ってコンテンツ要素をスライドさせて魅せるコンテンツスライダーをまだ試したことがなかったので実験的に…