2012-03-25のJS: jQuery1.7.2、PhantomJS 1.5、JavaScript「再」紹介
JSer.info #62 - A re-introduction to JavaScriptの日本語訳がやっと完結したそうです。 原文が書かれたのは結構前ですが、基本的なJavaScriptのコア部分の話が中心なので今とあまり大きな違いはないと思います。(ES3的な内容) 逆にMDNの文章を翻訳したい人はMDN 翻訳への私家版イントロダクションなどを見るといいのかもしれないですね。 JavaScriptの非同期なコードの扱いについて書かれたAsync JavaScript Recipes for Event-Driven Codeがちょっときになる本です。
jQueryの.clone()でdata属性までコピーするには？ - F.Ko-Jiの「一秒後は未来」
jQueryで「ここにあるのと同じ要素を、そっくりそのままここにappend()したい」ということがよくあって、そんな時に var source = $('#source'); $('#dst').append(source); とかすると元の要素が「移動」してしまうので、そうではなくて「コピー」したいという時に「.clone()」を使います。 var source = $('#source').clone(); $('#dst').append(source); しかしこれだと元の要素に .data() 属性が指定してあっても、.clone()で新しく生成したほうの要素には .data() 属性が引き継がれません。で、これはドキュメントを読めば分かるのですが、引数に「true」を与えれば解決します。 » .clone() – jQuery API var source = $('#sou
Jquery Content Slider
Lorem Ipsum Sit Dolor! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet pretium nisi, non elementum ligula scelerisque ut. Duis a nisi nulla. Nam elementum ligula at mi sodales id tincidunt erat tempus. Nullam vulputate lectus vitae mi mollis ac condimentum eros lobortis. Sed non mi eget urna scelerisque posuere. In at lacus congue urna varius porta. In pulvinar sem nec nibh
Post by @hamalog
でも昔書いたのだけども、IE8以下ではopacityに対応していないので、jQueryでアニメーションしようとすると、色々なことが面倒。そこで、ばっさりIE8以下対応をさっさとやるのが以下。どうのこうのでブラウザ判別でもして
ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」:phpspot開発日誌
Pretty Pie Menu Demo ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」 次のような円形のメニューを実装できます。アニメーションがカッコいいので実際に見てみましょう デモページ 使い方は以下のようにオプションを渡すみたいです。画像は自分で作れるので画像を変えれば全く印象の違ったものを作れそうです 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 折り畳み可能なシンプルツリーメニュー実装jQ
画像にマウスホバーするとズームする拡大鏡っぽいやつを簡単に実装できる2KBの軽量jQueryプラグイン・loupe - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか？ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも喜びそうですし、うまく使えばプロダクトの訴求力も上げられるのではないでしょうか。 こういうやつ。個人的にはこれ付けてくれるとかなり購買意欲湧きます。ECサイトでは現物見れないので写真は大事ですね。 オークションなんかは傷や汚れの関係でトラブルになりやすいので導入してくれると
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
レスポンシブデザインに使えるjQueryプラグイン集 – creamu
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
Skitter
30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい！導入方法など 公開日：2012年3月19日 カテゴリ：Web制作が捗るツール ぱくたそのトップページでも利用しているjQueryスライドショー"Skitter"が新しくなりましたよ。30種類以上のアニメーションにプログレスバーまで実装され『もうFLASHやめてこれでいいんじゃね？』的な高機能っぷりです。今回は導入方法とアニメーションのサンプルを動画にてUPしておきました。参考になったらGrow！してね。ｗ Skitter - Slideshow for anytime! Skitterを導入してWEBサイトをカッコよく魅せよう どこのWEBサイトもトップページに綺麗な写真をスライドショーさせるスタイルは定着しているけれど、未だにFlash使っていたり、フェードだけの画像切り替えで動きがなかっ
テキストをランダム表示してから整列していくjQueryプラグインを作ってみました | bl6.jp
テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっちゃ簡単です。以下のページからファイルをダウンロードします。 ダウンロードページ head内にjQuery本体とダウンロードしたプラグインを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <
dotdotdot – はみ出したテキストを「…」に変えてくれるjQueryプラグイン – creamu
dotdotdotは、はみ出したテキストを「…」に変えてくれるjQueryプラグインです。 日本語の2バイトでの確認は必要かもですが、簡単に実装できるようです。 dotdotdot
jq.carouselっていうカルーセルのjQueryプラグインつくった :: 5509
githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。 ドキュメント・サンプルは以下のリンク先を参考にしてください。（変な英語ですけど、なんとなく言いたいことは分かると思います。 jq.carousel 日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ！っていう方は見てみてください。 特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。 要望とかバグ報告などはgithubのIssuesへお願いします。 github repository 5509/jq.carousel Leave a comment If
スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」:phpspot開発日誌
natrixnatrix89/promptumenu @ GitHub スマホのホーム画面っぽいものを作れるjQueryプラグイン「Promptumenu」 iPhoneのホーム画面でフリックによってメニューがスライドできるというようなものをブラウザ上で実現できます。 当然、PCだけでなく、スマホでもフリック可能で、動きがなめらかなのもいいです。スマホのメニューを作るなら使えそうです フリック可能 実装も超簡単です。ulにメニューを並べて初期化するだけ 自分で作ると大変そうなところをやってくれるのはありがたいですね。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションする
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」:phpspot開発日誌
画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 2012年03月19日- jQuery File Upload Demo 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 Twitter Bootstrap を使ったアップロードのデモなんですが、ファイルを選択するとサムネイルが直ぐに出てくれてます。（複数選択が可能） そして、選択後、すぐアップロードは開始されず、Startボタンを押すと開始されます。 なんか選択したらすぐアップされたなんていうケースがありますのでこれは安心です。 更に、個別にキャンセルが可能なので、アップしようと思った画像と違う物を間違ってアップする事をサムネイルで未然に防げます。 アップした後も、Del
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon! - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH - かちびと.net
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Courses and Tutorials in Navigation | Envato Tuts+
CSS 20 stunning examples of CSS 3D transforms