jQuery Easing Plugin エフェクト一覧ページ
ほんのり解説 ＜script src="jquery-1.8.2.min.js"＞＜/script＞ ＜script src="jquery.easing.1.3.js"＞＜/script＞ ＜script＞ $(function(){ $(".button").toggle(function(){ $(".hoge").animate({ "marginLeft":"100px"},2000,"Easingの種類") },function(){ $(".hoge").animate({ "marginLeft":"0px"},2000,"Easingの種類"); }); }); ＜/script＞ headタグ内に「jquery本体」と「jquery.easing.js」を読み込むことで、"Easingの種類"の部分に記述したエフェクトを使用することが可能です。 （上記のコードは＜＞を半
jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた
様々な効果でWebページのUIをリッチにしてくれるjQuery。 今回は、そのjQueryのエフェクト動作を加速／減速させるためのプラグイン、「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを（自分用に）作ってみましたのでシェアしておきます。 「jQueryってなんじゃらほい」という方は先日書きました7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座をご一読ください。分かりやすいと僕の中で大評判です。 easingとは、エフェクトの動きを加速/減速させるための関数です。 （中略）特別なことをしなくても使うことの出来るeasingは”linear”と”swing”の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」
Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… imgを圧縮してアップロードするだけ サイトに訪れたらまずは画像配置のレイアウトと吐き出すコードのフォーマットを決めます。 ちなみにフォーマットはCSSだけではなく、SCSSやSASSも選択可能です。 次に、CSSスプライトにする画像をひとまとめにして、そのフォルダを圧縮、ZIPファイルにしましょう。 そしてそのファイルを上の場所にアップロードすると… 自動的に「spritemachine」というフォルダがダウンロードされます:) フォルダの中身はpng画像とc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ