今やWebサイトを作る際にはほぼ必須アイテムとなっているページの最上部に戻るための「ページトップへ」ボタン。最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。そんな「ページトップへ」ボタンの出現方法をフェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、の3つ… →ReadMore

レスポンシブWebデザインのサイトでテーブル(表組み)を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQuer… →ReadMore

Webページ上にある画像やコンテンツ要素をページをロードするたびにランダムで表示を切り替える方法についてお問い合わせやコメントで聞かれることが数多くあったので<img>タグのsrc属性をランダムで設定することで画像をランダムに切り替えるパターンと複数のCSSクラスをランダムで付与することで表示する背景画像を切り替えるパ… →ReadMore

jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。アニメーションの実行判別方法はいろいろなやり方があり使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうのでいくつかの判別パターンをまとめてみま… →ReadMore

jQueryを使った複雑なアニメーションを実装しようとするとCSSのプロパティ値を細かく操作して設定することが必要になりますが複雑なアニメーションからシンプルなものまで、簡単かつ軽量なかたちで実装することができるプラグイン「jQueryTween」がとても便利そうだったので紹介してみます。jQueryTween - L… →ReadMore

スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。jQueryで特定の要素が存在するかどうかを判別する処理【.length】タグそのものに対して判別させることも可能ですがサンプルでは… →ReadMore

HTMLやCSSなどの知識がなくても簡単にWebサイトを構築することができるホームページ作成サービスは今では様々な種類がありますがそんな中でもデザインのクオリティがとても高く、デザインテンプレートパターンも豊富に揃っている「Wix.com」ホームページ作成サービスがとても便利そうだったのでご紹介してみます。無料で簡単に… →ReadMore

会員制Webサイトやストレージサービスなどでinput入力フォームでファイルをアップロードさせる[type=file]を使用する際、選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったのでFile APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。jQueryでINPUT[t… →ReadMore

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

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