CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法 | 株式会社LIG

2014/12/24 65 users 株式会社LIG オリジナル画像 方法

どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、secti... 続きを読む

ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう

2012/07/04 289 users HTML5 ローデ jQuery ローディング サンプル

以前の記事で「画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう」という形でCSS3でローディングアイコンを作成しました。 しかしあのままでは動きませんので今回は、jQueryを利用して実際にサイトでローディングを行う際のサンプルを作成しました。 サイトでローディングを使うと言っても、使用イメージがつかないと思いますので、まずはサンプルをご覧ください。 今回作成するローデ... 続きを読む

見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト | コリス

2011/11/29 412 users タイポグラフィ コリス エフェクト かっこいいエフェクト 瞬間

ページを開いた瞬間、ユーザーの目を引きつけるようなCSS3とjQueryを使ったタイポグラフィのかっこいいエフェクトを紹介します。 Typography Effects with CSS3 and jQuery かっこい [...] 続きを読む

CSS3とjQueryでクールな通知バーが作れるチュートリアル | IDEA*IDEA

2011/07/06 331 users IDEA jQuery チュートリアル シュ 通知バー

これはメモしておこう・・・。CSS3とjQueryでクールな通知バーが作れるチュートリアルですよ。上からしゅっと出てくる感じがかっこいいです。 ↑ なんかの情報を提示したり。 ↑ 処理の成功をお知らせしたり。 CSS3のコードが参考になりますな。詳細＆デモは以下からどうぞ。 » Cool notification messages with CSS3 & Jquery – Red Team Des... 続きを読む

CSS3とjQueryでフォームを美しく装飾する方法 | Webクリエイターボックス

2010/10/27 862 users Webクリエイターボックス 装飾 フォーム 仕様 方法

どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って... 続きを読む