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コード「アートスクリプティング」を特集します!

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

続きを読む

仲夏。HTMLファイ部の本多です。

jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。
QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう!

募集中のテーマはズバリ、

夏を涼しくする表現

暑い夏をひんやり涼しくしてくれる作品をお待ちしています!

本記事では、続々と集まっている投稿作品の一部をご紹介します。
夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ!

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

続きを読む

HTML5関連の情報源のまとめ(2012年4月版)

こんにちわ。HTMLファイ部のふちがみです。

HTML5のすごいコンテンツやニュースをキャッチアップしきれない!知らないところでバズってる!と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。

続きを読む

好きなプロパティは「-webkit-animation-delay」の渕上です。

昨年、卒制採用にのっかって行った「コーディング推薦」。今年もやることになりました!

コーディング推薦って?

KAYACの採用キャンペーンの一つです。
コーディング推薦用の課題にHTML・CSS・JavaScriptで回答していただき、弊社のHTMLファイ部のメンバーが「キュン」としたコードを書いた方を全力で推薦します!就活よりも卒業制作よりもコーディングを頑張ってしまった学生さん、履歴書よりもHTMLを書いていたい求職中のコーダーさんにぜひオススメしたいキャンペーンです!!

課題

以下の原稿をあなたらしくマークアップ・装飾してください!

HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

  • 写真袋」というiPhoneアプリのランディングページを想定しています
  • 検証環境はGoogle Chromeの最新版です
  • 画像の使用は自由です
  • 内容が伝われば、原稿の内容を多少イジっても構いません

素材

写真袋のマスコット「むらかみさん(クマ)」のウェブフォントが公開されています。自由に使ってください!

HTMLファイ部 コーディング推薦 フォント素材 - jsdo.it - share JavaScript, HTML5 and CSS

参加方法

jsdo.itでアカウントを作成し、課題のコードを「フォーク」して参加してください。
(フォークとは、元のコードを改変してあなたなりの作品を作ることです。)
作品が投稿されると自動的にエントリーとなります。

結果発表

投稿されたコードはファイ部のメンバーが随時チェックしていきます。
メンバーが「キュン」としたコードの制作者にはjsdo.itのマイページからご連絡いたします。

締切は3/31です。

ファイ部の @calmbooks が挑戦してみました

好きなタグは「em」、好きな女性は「PSDがキレイな人」だそうです。

回答サンプル forked: HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

jsdo.itで「SPEC」というコーディングコンテストを開催しています。
今回のテーマは以下の二つ。

  • CSSだけを使って必殺技の演出を加えてください
  • ローディングの演出を考えてください

「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…!」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。

開催期間中ですが、ぼくが個人的に「これは!」と思った作品をピックアップして紹介したいと思います。(コンテストの審査とは関係ないですよ!)

続きを読む

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を使ってみてくださいね!

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

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

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

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

ネタ系

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

あなたに足りない成分

変態系

ME診断

Javascript予約語診断

こんな凝った診断も

jsdo-monster maker

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

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

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

地獄のミサワがCSS3の勉強に最適と話題に

CSS3に興味はあるけど、きっかけが無いなあと思っている方へ

こんにちわ、jsdo.it担当のふちがみです。

最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。

「それ2年ぐらい前に見たわー」という方も続きからどうぞ!

続きを読む

弊社では「卒制採用」を始めました。

卒制採用2011

面白法人カヤックは、卒業制作をがんばったあなたを積極採用いたします。
卒業制作に打ち込みすぎて就職活動が終わってた!そんな方も大歓迎です。
私たちの経営理念は「つくる人を増やす。」
つくることに打ち込んで、力のこもった作品を生み出したあなたと、一緒に働きたいと思っています。

卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています!

とはいえ、、、

ME志望の学生さんの中には
「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・!
ぜひとも、そういう学生さんにもエントリーしてほしい・・・!

ということで、担当にかけあってきました!
「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います!

就活よりコーディングを頑張ったあなたを推薦します!「コーディング推薦」!

  1. 対象は 2011年3月に卒業予定の方
  2. jsdo.itで「課題」に挑戦していただきます(課題については後ほど説明します)
  3. 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部(ME課・コーティング推薦)」とご記入ください
  4. 集まった作品をME課のみんなで見させていただき、「これは!!」という作品を投稿頂いた方をME課から推薦・面接に進んでいただきます!
    ※その他詳細は、卒制採用に準じます

課題について

以下の原稿を「あなたらしく」マークアップ・装飾してください。

ME課 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

ポイント!

  • 上記の作品をフォーク(改変)して作成してください
  • htmlのテキスト情報を適切にマークアップしてください(多少の改変はOKです)
  • デザインは自由です。あなたらしく装飾してください。
  • javascriptは使用しても使用しなくても構いません

あなたらしい、学生生活の集大成のような作品をお待ちしております!

なんかワクワクする!! インフォグラフィックなWebまとめ

 
 

美しい! 格好良い! インフォグラフィックスまとめ記事って最近よく目にしますね。
一目見ただけで引き込まれる作品ばかりで、自分も沢山ストックしてます。

ちなみに、インフォグラフィックスとはデータ・情報・知識をダイアグラム、チャート、グラフ、マップ、ピクトグラムなんかでビジュアライズしたものです。
 
インフォグラフィックスまとめも面白いんですが、検索すると分かるように
膨大な数のインフォグラフィックスがひっかかります。
 
ですので、今回はWeb屋らしくHTML5(XHTML) / CSS3 / JavaScript  あたりで実装されている
インフォグラフィックなWebを集めてみました。まだそれほど数が多くないので...
Flashで作ったインフォグラフィックスも沢山あるんですが、今回はFlashは抜きで。

続きを読む

警告とメッセージ