Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “Javascript“ の検索結果

初めまして!
14年新卒で入社予定の、HTMLファイ部のゴンです!

現在は入社前インターンシップとして、カヤックに通い、
一流のマークアップエンジニアになるべく、研鑽を積んでおります。

今回は、CSSアニメーションやjQueryで使う、イージングの話を書こうと思います。

イージングの話!

イージングとは

イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。

CSSではanimation-timing-functionjQueryではEasingと呼ばれるものです。

いろんな呼び方があるとは思うのですが、この記事ではイージングで統一します。

下はjQueryでアニメーションをするときの例です。

$("div.ball").animate({
    left: "300px";
}, 3000, "easeInQuad");

この"easeInQuad"にあたる部分が、イージングです!
イージングを設定することで、動きに、勢いや波をつけることができます。

イージングを設定して、ボールを左右に動かしたものがこちら!

ball_in_quint.gif

ちなみに、イージングがないとこんな感じです。

ball_linear.gif

イージングを使いこなそう!

イージングは結構、種類が多いです。
例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています!

でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか?
今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します!

続きを読む

動くぞ!きれいだぞ! ヘ(・_・ヘ)

とにかく痩せたい、HTMLファイ部のほんだです。

jsdo.itnakamapPaberishHTML5実力テストといった自社運営Webサービス
HTML5エンジニアを担当している者です。

jsdo.it、ユーザー数 5万人突破!

手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、
ユーザー数 5万人を突破しました!(わーい!)

今回の記事では、jsdo.itのユーザー5万人を記念して、
HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します!

あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。

続きを読む

超定番のjQueryのプラグインを厳選して集めました。
商用利用が可能なものを優先的にピックアップしています。
(利用する際はそれぞれライセンスをご確認くださいね)

続きを読む

HTML5花火大会から学ぶcanvasの表現力

HTML5花火大会が始まりました!

HTML5花火大会

jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています!
本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。

続きを読む

4月から入社した2011年度新卒社員です。

ハロこんにゃんセヨ
がぜんウェブウェブしているほんだです。

今年4月より、意匠部のME課(めか)でマークアップエンジニアとして働いているほんだです。
入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType(ブログ構築ツール)での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。

そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript(以下 JS)プログラミングです。
jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。

この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。

続きを読む

SVG女子が公開されて2週間がたちました

たいへん多くの方に視聴していただいているようで、感激しています!
「SVG」がすっかりバズワードになっていますね。
まだの方はぜひご覧ください!

続きを読む

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング&クリエイティブ コンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。(コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています)

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。(※音が鳴るので注意)

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

昨今のHTML5ブームで、今後ますますJavaScriptの需要と重要性は増して行くことは間違いないでしょう。
きたるHTML5時代に向けて、今からJSを学んでおくことは間違っていません。

そんな中、最近自分がはまっているサイトが「jsdo.it」です。
(まぁ弊社で運営しているサービスなので宣伝みたいですが、実際に自分のアカウントの投稿一覧を見てもらうと、かなり投稿してますw)

最近では、JS関係の質問を、コードプレビュー付きで投稿できるQ&Aコンテンツも出来たので、なかなか検索で目的の情報が見つからないときに質問してみてはどうでしょうか。
自分が作成した作品のバックアップにもなるので、これからJavaScriptを勉強しよう、という人はぜひぜひjsdo.itを使ってみてくださいね!

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング&クリエイティブ コンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。(コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています)

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。(※音が鳴るので注意)

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

jsdo.itを使って手軽にJavaScriptを学ぼう!

jsdo.itでこんなキャンペーンが始まったようです。

初めての方もカンタンに始めることができます。
2種類のお手本コードを用意しました!
お手本コードをあなたらしくアレンジ(=Fork)するだけで、
とっても簡単に○○診断が作れます!
今ならNINTENDO 3DSが当たるキャンペーンを実施中です!

jsdo.itはhtml、CSS、javascriptを書いてその場で実行→シェアできるサービスです。
お手本コードをアレンジするだけなので、変数の基礎や配列の基礎を遊びながら覚えられる企画ですね。

こんな診断が投稿されています

ネタ系

ぼくと契約して魔法少...じゃなくて

あなたに足りない成分

変態系

ME診断

Javascript予約語診断

こんな凝った診断も

jsdo-monster maker

3/23までに診断を作ればNINTENDO 3DSが当たる!

javascriptのことが気になってていたけどキッカケがなかった人にはちょうどいいイベントなのではないでしょうか。

jsdo.itの最新情報はtwitterで!

インターン生だけど書いちゃいます。

こんにちは!(`・ω・)
来年の春に入社予定のどうもぽんたです。
 
夏休みを利用して、デザイナーとしてインターンシップに参加しています。
まだ始ったばかりなのですが、アドレナリンに満ち溢れております。
 
そしてこちらは僕の研修の意味で、書いているエントリーです。
どうか暖かいまなざしで見守って下さいませ!
 
さて今回はカヤックのサービス「jsdo.it」にてJavaScript(以下JS)を学ぶコツを紹介します。
JS初心者の僕が解説していきたいと思います。
 
気合い入れすぎてちょっと長くなっちゃったのですが、
最後までお付き合い頂けると嬉しいです!
 

jsdo.itってご存知?

このブログを読んでくれているということは、すでにご存知の方も多いと思います。
「つくる人を増やす」を理念に掲げているカヤックの象徴ともいえるサービスです!
 
画像:jsdo.it.gif

せーの!jsdo.it!

続きを読む