READ MORE
jQueryなどでアニメーションを実装した際にはアニメーション終了時に処理を実行させるのは比較的簡単なのですがCSSアニメーション制御の場合は少々面倒だったりします。そんなCSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition…
READ MORE
今やWebサイトを作る際にはほぼ必須アイテムとなっているページの最上部に戻るための「ページトップへ」ボタン。最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。そんな「ページトップへ」ボタンの出現方法をフェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、の3つ…
READ MORE
レスポンシブWebデザインのサイトでテーブル(表組み)を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQuer…
READ MORE
Webページ上にある画像やコンテンツ要素をページをロードするたびにランダムで表示を切り替える方法についてお問い合わせやコメントで聞かれることが数多くあったので<img>タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパ…
READ MORE
jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。アニメーションの実行判別方法はいろいろなやり方があり使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうのでいくつかの判別パターンをまとめてみま…
READ MORE
jQueryを使った複雑なアニメーションを実装しようとするとCSSのプロパティ値を細かく操作して設定することが必要になりますが複雑なアニメーションからシンプルなものまで、簡単かつ軽量なかたちで実装することができるプラグイン「jQueryTween」がとても便利そうだったので紹介してみます。jQueryTween - L…
READ MORE
CSSでエリアの幅や高さに合わせて背景画像をフィットさせることができる「background-size:cover」。とても便利なプロパティなのですがIE8以下のIEブラウザには対応していません。IE8以下で「background-size:cover」を実装させるjQueryプラグインもいくつかありますが実際に使って…
READ MORE
スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。jQueryで特定の要素が存在するかどうかを判別する処理【.length】タグそのものに対して判別させることも可能ですがサンプルでは…
READ MORE
会員制Webサイトやストレージサービスなどでinput入力フォームでファイルをアップロードさせる[type=file]を使用する際、選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったのでFile APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。jQueryでINPUT[t…
READ MORE
少し前に「jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみた…