Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
2/2 アコーディオンメニュー/ドロップダウンメニュー - おかゆ学習帳
jQueryアコーディオンメニュー（jquery-1.6.min.js使用） HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>アコーディオンメニュー</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print" /> <script type="text/javascript" src="jquery-1.6.min.js"></s
たった1.3KBのJavascriptで機能するアコーディオン式スライダー
ウェブサイトの技術っておもしろいよね RDF Site Summary RSS 2.0 このブログは、ウェブサイトで使われる様々な技術や表現についてトモヒロが実際に作成したり 考えたりした事を綴るブログです。 仕事や趣味等についても綴っていきたいと思っています。 おすすめ 最近の記事 カテゴリ ウェブ技術の実践 【Javascript】 フォームの見栄えを良くする 軽量アコーディオンスライダー 【Javascript】[Ajax] 自動入力補完 データ処理中に画像を表示 【Javascript】[Ajax] [prototype] [jQuery] 郵便番号から住所の自動補完 【Javascript】[prototype] テーブルで列の並べ替え 【Javascript】[jQuery] アニメーションするテキストリンク 注目させたい部分を強調 【PHP】 キーワードクラウド 【CSS】
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
