SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
jQueryでWordPress記事に対するつぶやかれ内容を表示する *Ateitexe
jQueryでWordPressの記事につぶやかれた内容を表示する方法を解説しています。その記事についてtwitterでつぶやかれている内容を取得・表示します。同じような機能のプラグインはたくさんあると思いますが、Topsy APIを利用して直接書いてしまうと好きなデザインにカスタマイズできるのが魅力ですね。 ※2013年1月よりAPI Keyがないと利用できなくなった模様で、現在は実装しておりません。 こんな感じになります 最新10件まで取得します。デザインは全てCSSでやっていますので、お好きにカスタマイズできます。また、ツイートがゼロの場合は見出しも非表示になります。ゼロなのに見出しだけあるのも寂しいので…。。 footer.php 読み込みに時間がかかることもあるので、</body>タグの直前あたりに入れると良いみたいです。<?php if (is_single()): ?>で、投
Lazy Load Plugin for jQueryをバージョンアップ前と比べてみる
サイトのページ読み込み高速化のひとつとして、画像の読み込みを後読みにするjavascriptを検討してみた。 jQueryのプラグインで『Lazy Load Plugin for jQuery』というのがあるみたい。 画面のスクロールにあわせて画像を読み込むらしくページを開いた時の読み込むリクエストを減らせるらしい。 いろいろなブログでみたところ、昔のバージョンといまのものでは違うらしい。 昔のバージョンでは思ったような挙動にはならないらしい。 スクロールするまで画像を読み込まない（はずの）Lazy Loadについて※リンク切れ 新しいブラウザだとこのスクリプトを実装してもページを開いた時にすべての画像を読み込んでしまうので意味が無いらしい。プラス、スクロールしたあとでもリクエストが発生するようなことも。 ただ新しいバージョンだとそこのところに対応してバージョンアップしているとのこと。 画
Basic Slider Australia | Importance of all features that most of the website hosts offer
Importance of all features that most of the website hosts offer You may browse the various web hosting service providers in Australia seeing that there are is a list of features and options offered on each of the service website. Though most of the users may understand with the help of the description given there, but there are many other things that play an important role in determining the featu
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル（socialcount-icons.css）を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod
jQuery 1.9 日本語リファレンス | js STUDIO
このサイトについて jQueryの日本語リファレンスです。 jQueryの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.03.13 ver1.9の内容に更新しました。 2012.12.02 jQueryの似ているAPIまとめ 2012.10.13 サイトをオープンしました。 API APIのカテゴリー分けについては、本家サイトでは1つのAPIが複数のカテゴリーに所属していますが、 このリファレンスでは分かりやすさを重視して1つのカテゴリーに絞っています。 また、一部本家サイトのカテゴリーを削り、別のカテゴリーに所属させているAPIがありますので、 予めご了承ください。 Ajax Ajaxに関する処理 Attri
Instagram APIを使用し、タグで絞った画像を一覧表示する方法 | Stronghold Archive
どうもこんばんは。今回のtipsは【Instagram APIを使用し、タグで絞った画像を一覧表示する方法】になります。方法に関してはとても便利なプラグインがありましたのでそちらを使用してみます。 実装方法 クライアントIDの取得 まずはクライアントIDが必要になります。コチラより開発者登録をしてください。 コード Potomakのダウンロード JS <script src="jquery.1.X.X.js"></script> <script src="jquery.instagram.js"></script> <script> $(function() { $(".instagram").instagram({ hash: ‘検索対象のタグ（ハッシュ）’, show: 12,//表示件数 clientId: ‘ここにクライアントID’ }); }); </script> HTML <
jquery.fadeMoverプラグインページを作成しました。 | 1：n – DETELU Blog
以前のjquery.fadeMoverプラグインの記事に不具合があった（というよりも単なるミスです。。。申し訳ないです。。。）ので、ちょっと機能アップを含め、別途ページを作成しました。 jquery.fadeMover – Fadein and Fadeout for jQuery 要素が複数あった場合に順番に処理する、という機能を新しくオプションでつけています。下記にデモページがあるんですが、ページ少し下の方にある「Box」と書かれている場所がぱらぱらとフェードインする、フェードアウトする感じになります。 jquery.fadeMover – demo4 順番にフェードイン jquery.fadeMover – demo5 順番にフェードアウト デモがわかりやすいように実行時間を長めに設定してるのでじれったい感じかもですが、もし利用の機会があれば、ご自身でスピードを変更して、いろいろ試し
[JS]あなたのウェブページがどのくらいスクロールされて見られているかが分かるスクリプト -jQuery Scroll Depth
Googleアナリティクスを使って、ウェブページがどのくらいスクロールされているか解析するjQueryのプラグインを紹介します。 下記のキャプチャはスクロールの量（パーセント）ですが、特定のエレメント（フッタや記事など）までスクロールされたかもできます。 Tracking Scroll Depth with jQuery and Google Analytics jQuery Scroll Depth -GitHub [ad#ad-2] Scroll Depthの使い方 Scroll Depthの対応ブラウザ Scroll Depthの使い方 Scroll Depthの設置は簡単です。 Gooleアナリティクス まず、Googleアナリティクスのトラッキングコードを設定します。 トラッキング コードの追加 -Googleアナリティクス ヘルプ スクリプト 「jQuery 1.7+」と当スク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
W3 Watch Reference
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
Chromeでjavascriptデバッグ！まず半歩♪
http://www.frescojs.com/
1216彩票-官网平台
Loading...
https://design-spice.com/2012/06/13/responsive-web-design-image/