Tags

閉じる

Category

閉じる

Search

Search

閉じる

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

初めまして!
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のイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します!

続きを読む

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だけを使って必殺技の演出を加えてください
  • ローディングの演出を考えてください

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

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

続きを読む

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

卒制採用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は使用しても使用しなくても構いません

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

CSS3のアニメーションってスゴい!

先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。

ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。
SafariやChromeなどwebkitブラウザで表示してみてください。

※PLAYボタンをクリックすると表示されますよ

見れない人のために動画も撮ってみました。

どうですか?CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。

今回はこのCSSのアニメーションのチュートリアルをご紹介します。

続きを読む

めちゃイケの新メンバーよりマークアップエンジニアでしょ

recruit.png

業務拡大につきマークアップエンジニア募集中です。
html5もCSS3も書き放題だったり、ソーシャルゲームも作れたり、リア充できますよ。

使用言語・スキル

  • html、CSSが好き
  • javascriptもちょっと好き
  • 携帯コーディングも嫌いじゃない
  • うんこネタに抵抗がない

ちょっと興味があるかも、という方がいましたら、こちらからエントリーくださいませ!

お願い

もしお友達に、興味がありそうな人がいたら、このオーディションエントリーを教えてあげてくださいっ!

はてなスターをう●こに変えてみました

どうしてもって言われたので、はてなスターをう●こに変えてみました。

う●こ好きのみなさん、こんにちは。

このブログの「はてなスター」がう●こに変わっていることにお気づきになりましたか?

とっても簡単にCSSだけでう●こに変えることができたので、その方法を紹介したいと思います。

それではう●こに理解のある人だけ続きからどうぞーー

続きを読む

tacamyです。

11月10日(火)にCSS Nite 4周年記念イベントにて、
『HTML5のメリットを活かしたコンテンツアイデア』という
セッションでお話しさせていただきました。

ああいった場所で話をするのは初めてのことだったので、
至らない部分も多々あったかと思いますが、
ご参加いただいた皆様や、ご協力いただいた関係者の方々に感謝しています。

遅くなってしまい申し訳ありませんが、こちらのエントリーにて、
当日の資料の配布や補足事項について掲載させていただきます。

続きを読む

CSSアニメーションでアイコンを動かす

CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。

  • CSSアニメーションに非対応のブラウザでもアイコンとして成立している
  • 過剰なマークアップをしない

現実的に使えそうな路線で頑張ってみました。

続きを読む

警告とメッセージ