先端サイトに学ぶCSS3/jQueryアニメーションデザインフラットデザインやミニマルデザインといった「Webデザインのシンプル化」が進む中、アクセントとなる「ちょっとした動き」を取り入れるWebサイトが増えています。本連載では、ブログ「<a href="http://zxcvbnmnbvcxz.com/">Stronghold</a>」のメンバーが、いま注目のWebサイトを毎回1つピックアップ。特徴的なインタラクション表現を紹介するとともに、CSS3やjQueryを使って実装する方法を解説します。
差がつくメニューアイコン 25個のCSSアニメーション (2/2)
STEP 5：ざまざまなバリエーション これでメニューアイコンのマウスホバー時およびクリック時のアニメーションが完成した。同様の手法で動きを考えていくと、メニューアイコンにさまざまなアニメーションがつけられる。 ここでは、以下のような25種類のバリエーションを用意した。以降は、その中から3つをピックアップして解説する。 HTMLの構造 HTMLの構造は最初のメニューアイコンとほぼ同じだ。違いは、.toggle_menuとしていたクラスに「.demo数字」というclass名を併記し、さまざまなバリエーションに対応できるようにしたこと。また、アイコンクリック後のアニメーションのために、.demo数字の親要素に「#btns」を追加している。 ■ソースコード（HTML） <div id="btns"> <div> <a href="#" class="toggle_menu demo1"> <sp
jQuery Easing Plugin のイージング関数を直接利用する方法
jQuery Easing Plugin のイージング関数を直接利用する方法 はいどうも。ここのところ JavaScript に熱中してます。ということで今回は jQuery の Easing 関数を直接利用する方法をご紹介します。 Easing (イージング) 関数って？ イージング関数とは加速・減速を数式で表したもので、滑らかなアニメーションを表現する際に使われる関数です。jQuery においては jQuery.animate() メソッドの内部で利用されています。標準では linear と swing しか用意されていませんが、jQuery Easing Plugin にて 30 種類ものイージング関数を追加することができます。それぞれの効果についてはこちらのサイトの解説が詳しいです。 そんな素敵なイージング関数ですが jQuery.animate() 以外の処理に応用できたら夢が広
安くてお手軽、だけど子供は大喜びしちゃう20種類の家遊び
扱う材料は簡単に手に入る安いものばかりだし、準備も簡単、遊び方も簡単。 だけど子供だったら大喜び間違いなしの、家の中や庭でできる遊び20選。 工夫すれば家の中で遊ぶのだってこんなに楽しいもんだよね。 あと経験から言わせてもらうと、テーブルの天板にガムテープとか養生テープ使うと、塗装ごと剥がれたりするから要注意。 【関連】 男の子は絶対大喜びしちゃう、手作り武器防具の作成キット Crafteeo 夏休みの工作にもいい感じ。アイスの棒と綿棒でつくる小さな弓矢 室内で手軽に楽しめる、手作り空中浮遊オモチャ 余裕で手作りできて便利！自動で閉まる半自動ドア 1. ビニールテープで屋内ケンケンパ。 ビニールテープは色々な場所に、ペン代わりに描けて便利。 2. 同じくビニールテープで作ったミニカー用の道路。 3. チョークで描いた的に、濡らしたスポンジを投げるダーツ。 4. チョークで描いた人型に、本物
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
ʕ•ᴥ•ʔ < B!KUMA【ビークマ】女性にうれしいブックマーク、できました。 - B!KUMA ブログ
こんにちは！ B!KUMA（ビークマ）ディレクターの二宮みさき（id:chira_rhythm55）です。 この度、女性にうれしいブックマーク「B!KUMA（ビークマ）」をリリースいたしました。 http://bkuma.hatena.ne.jp はてなでは、もっと多くの女性にサービスをご利用いただきたいと考えています。 そこで、女性ユーザーからご好評をいただいているニュースアプリ「B!KUMA（ブクマ）ガールズ」をベースに、女性の視点で、女性が楽しめるブックマークを作りました。 B!KUMA（ビークマ）は、B!KUMA（ブクマ）ガールズのウェブ版（PC・スマートフォン対応）です。 特に20代後半から30代の女性に向けて、忙しい日々の合間にお楽しみいただけるよう、「“がんばる私”に、ちょっと一息。」というコンセプトを決めました。 アプリで人気の「LOVE（恋愛・結婚）」「LIFE（暮らし）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このクオリティはスゴイ！JPEG, GIF, PNG画像をベクターに変換する無料のオンラインサービス -PicSVG
スプートニク日本ニュース｜経済、科学技術、ビジネス、政治ニュース