jQueryとCSS3で手軽に実装できるスクロールエフェクト | Webクリエイターボックス

2015/10/07 107 users スクロールエフェクト Webクリエイターボックス

近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あと... 続きを読む

jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark

2013/01/23 249 users Webpark アコーディオンメニュー マウス ul id

jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accord... 続きを読む

[JS]入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス

2011/04/07 136 users コリス プログレスバー チュートリアル アニメーション機能

jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。フォームの実装HTML：基本構造フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 続きを読む