【ANIME.JS】複数の連続したアニメーションを実装する方法 | ヨウスケのなるほどブログ。
「ANIME.JS」で複数の連続したアニメーションを実装する方法です delayで開始時間をずらして繋いだり、Keyframes、タイムラインでの実装など様々な方法が用意されています delayのみで連続メーションこの方法は簡単に利用できますが、同じアニメーションを別々に定義できない難点があります See the Pen ANIME.JS Continuous Animation（delay） by yochans (@yochans) on CodePen. JavaScript //delayのみで連続メーション anime({ targets: '#target', loop: true, translateX: { value: 250,duration: 800,delay: 0, }, rotate: { value: 360,duration: 800,delay: 800,
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」 デザインだけでなく、独自の動きを取り入れることでwebサイトはより魅力的なものに変化します。今回はそんな時に参考にしたい、webサイトの動きを魅力的に演出するフリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」を紹介したいと思います。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 組み込むだけで、webサイトを魅力的に演出してくれるプラグインが揃ってい
横スクロールを可能にできる「jquery.mousewheel」を使用してみた | スターフィールド株式会社
近々、個人的に横スクロールのサイトを作ってみようかなと思っていたので、 その前に、横スクロールだけでも試しておこうと思い、簡単なサイトを作ってみました。 使用するのは、「jquery.mousewheel」というプラグインは、 jQuery Mousewheel | jQuery Plugin Registry になります。 DEMOサイトは以下からご覧下さい。 DEMO 横スクロールの実装方法は以下になります。 「jquery.mousewheel」の実装方法 まず、プラグインをダウンロードします。 jQuery Mousewheel | jQuery Plugin Registry そして次に、 head内に以下を読み込みます。
さまざまな動きのタブデザイン表現を可能にする「11 Free CSS & jQuery Tabs Plugin And Tutorials」
TOP > plugin > さまざまな動きのタブデザイン表現を可能にする「11 Free CSS & jQuery Tabs Plugin And Tutorials」 複数のテーマ選択を1デザインで行うのに便利なツール・タブ。シンプルな切り替えが定番ですが、今回はさまざまな動きのタブデザイン表現を可能にする「11 Free CSS & jQuery Tabs Plugin And Tutorials」を紹介したいと思います。 CSS3 & jQuery folder tabs タブに独自の動きを再現することができるプラグイン、そして構築のためのチュートリアルが公開されています。 詳しくは以下 CSS3 tabs with beveled corners 角が斜めにカットされ、さらに立体的な表情を生み出せるCSS3タブ。タブ自体に存在感を出したい時に。 Tabslet jQuer
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
頭が$で始まる JavaScript の変数名―jQuery の命名則でドルマークを使う意味・由来 | 黒くないすべてのものはカラスではない
買ったまま長いことツンドクだった jQuery Cookbookを最近パラパラと読んでいます。 発行が2年前ということもあり、updateの速いjQueryの解説書としてはもうそろそろ 2nd Editonが出てもおかしくない時期(※)ですので今買うのはあまりお勧めしませんが、basic部分では十分役に立つ内容です。 ※ただし2013年1月5日時点ではまだ2nd editionはオライリの近刊予告リストにも入っていません。 パラパラとめくっているうちに、いくつか次のような変数宣言があるのに気が付きました。 var $element = … var $item = … JavaScriptで、$で始まる変数宣言というのをみた記憶がなかったので「アレッ」と思いました。 一瞬、著者が perlのコードと書き間違えたのではないかと思ったのですが、同書をよく読むと次のような一説がありました。 “…
jQuery maphilight documentation
maphilight applies to images with a 'usemap' attribute, and outlines the areas defined in their map on mouseover. It provides a single jQuery function: $('.foo').maphilight() This would hilight every image with a map on the page: $('img[usemap]').maphilight() Demos The simple demo (with awful art, and examples of data attributes) A map of the world A map of the USA A few feature-demonstrations Plu
サムネイル画像をクリックして拡大画像を切り替え表示のデモページ | CodingMania
◆ 1ページに複数設置の場合のデモ サムネイル画像のaタグと拡大画像の写真をくくるdivににクラスを指定。 class="gallery01"
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
【怖くないJavaScript + jQuery】ドラッグで要素を移動させる
おはようございます。今日もjQueryについて書いていこうと思います。 今回はjQueryに加えて、新たにもう一つ「jQuery UI」を使用します。これを使用できるようになるとできることもグンと幅広くなりますね。やってみると読み込むだけで結構簡単なのでぜひ一度試してみてください。 デモ ドラッグで好きな場所に 動かせます。 ↑こちらのボックス、ドラッグで好きな場所に動かすことができます。ちょっといじってみてください。 デモのファイルはこちらからダウンロードできます。 手順1：まず必要なファイルを読みこみ こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、jQuery UI、自分で作ったjavascriptのファイル（今回は move.js とします）を読み込みます。 <head> <script src="common/js/jquery
英語も学べて一石二鳥！webデザインやコーディングが学べる良質な海外サイト10選
日本のみなさん、こんにちはぁ！バンクーバーでWebを修行をしているのび太です。 Web制作を学ぼうと思ったらいろいろな方法があると思います。専門学校に通う（王道）、オンラインの通信講座を受ける、プロのWebデザイナーにレッスンをお願いするetc。 Webを勉強する1つの方法として、ネット上のWeb制作に関するサイトを利用するというのがあると思います。スクールに通ったり、通信講座を受けたりするのはお金の面で負担がかかりますからね… ありがたいことに今の世の中わかりやすいWebを学べるLIGのようなサイトが仰山あります。強い勉強意欲と気合さえあればオンラインのソースや教材をフル活用することで独学でも十分学べると思います。 その際に日本語サイトだけでも十分学べますが、あえて英語サイトを使うことで以下のようなメリットがあると思います。 Webと同時に英語が学べる。 日本語サイトより詳しく学べる。
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
qTip - The jQuery tooltip plugin - Home
About qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0's user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all... it's completely free under the MIT/GPLv2 licenses!
超絶簡単！JavaScriptの性質を10分で理解するための重要なポイントのまとめ - Y's note
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者: Douglas Crockford,水野貴明出版社/メーカー: オライリージャパン発売日: 2008/12/22メディア: 大型本購入: 94人 クリック: 1,643回この商品を含むブログ (187件) を見る JavaScriptのニーズ NodeJSやTitaniumMobileの普及によりサーバサイド/スマフォアプリの作成をJavaScriptで書こうとする動きが盛んです。それだけ注目を集めているせいかブログの記事でもJavaScriptのネタを書くとはてぶ登録されやすい傾向が現れます。一応今までJavaScript系の記事をいくつか書いてきたのでリンクを紹介します。 Javascriptによる正規表現まとめ - Yuta.Kikuchiの日記 WebSocket対応状況のまとめ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
法人研修・学校教育に強いWeb制作会社 | cshool（クスール）
WebデザインやHTMLやCSSを基礎からしっかりと学べる動画コンテンツ、日本語解説だから分かりやすい！
http://unirry.com/sample/fullcont/index3.html
http://webrocketsmagazine.com/demo/20111114/sample-01-holizontal.html
showjin.me