[B! Must][jQuery] beth321のブックマーク

beth321 id:beth321

MustとjQueryに関するbeth321のブックマーク (8)

レスポンシブ時代の制作フロー「インブラウザデザイン」など、スマフォ向けサイトの企画から制作まで丁寧に優しく解説 -マカロン本改訂新版
スマートフォン向けサイトの構築はまったく初めての人、基本からしっかり復習したい人、スマフォ対応サイトの企画・設計から、制作環境の構築、デザイン・制作まで、これ一冊で実務の流れが把握できる「スマートフォンサイト制作入門改訂新版」を紹介します。
beth321 2013/09/20
web制作

book

レスポンシブ

スマホサイト

本

jQuery

review

あとでみる

web

Must
リンク
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。デモページ実装はHTML+CSSです。もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v
beth321 2013/09/15
css

アニメーション

CSS3

jQuery

animation

html

HTML5

Web制作

ローディング

Must
リンク
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブタブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方ステップは2つです。 Step 1: 外部ファイル当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
beth321 2013/07/01
jQuery

Must

javascript

スマートフォン

Plugin

webdesign

js lib

あとでみる

UI tab

Article
リンク
[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
beth321 2013/06/21
　[コリス]

()

JavaScript

jQuery

パスワードを可視化

ユーザビリティ

一時的

js

フォーム

Must

表示
リンク
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。類似スクリプトで生じる隙間も埋めます。比率全てのエレメントのベースとなる比率を設定サイズグリッドに応じたサイズを設定カラム複数のブレイクポイントごとにカラムを設定フィルター空白スペースを埋めるための要素を設定ガターエレメント間の溝を設定 Mason.jsのデモページには
beth321 2013/06/18
　コリス

レスポンシブ

jQuery

レイアウト

jQueryプラグイン

pinterest

Must

整列

webdesign

JS
リンク
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
beth321 2013/05/16
　コリス

*javascript

jQuery

javascript

スマートフォン

ナビゲーション

スライド

コリス

Must

Menu
リンク
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月
jResponsive 表示サイズに合わせて、さまざまな要素のサイズを変更します。要素ごとにmin-size, max-size, height, hspace, vspace, animationの設定可。
beth321 2013/04/22
*thresh25

*webデザイン

jQuery

まとめ

プラグイン

memo

jQueryプラグイン

あとでみる

Must

☆☆☆☆☆
リンク
[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモデモでは3枚のパネルをダイナミックなアニメーションで切り替えます。操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
beth321 2013/02/28
iPad

javascript

CSS

js

jQuery

アニメーション

iOS

web制作

ui

Must
リンク
1