How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When
Basic usage $(elem).animate({ transform: 'translateX(50px)' }); $(elem).animate({ transform: 'rotate(135deg)' }); $(elem).animate({ transform: 'scale(2,.5)' }); $(elem).animate({ transform: 'skewX(35deg) skewY(15deg)' }); Advanced usage // Combine transform components to create isometric 3d transform. var transforms = [ 'skewY(-45deg) scale(.66)', 'translate(20px) skewY(-45deg) scale(.66)', 'trans
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 2012年6月にサービスを開始したスマートフォン向けソーシャルゲーム ULTIMATE RACERアルティメットレーサー）でデベロッパーをしている横田と申します。ULTIMATE RACERの開発時に、画面内のアニメーションをjQueryのanimate処理からcssアニメーションに切り替えた経緯について、自分なりの考察ともにご紹介したいと思います 対象としてはデザイナー、マークアップエンジニアでJSやcssでアニメーションの実装を始めたばかりの方が最適だと思います。 また本稿はjQueryのバージョン1.7.1を使用した場合を想定して記述しています
jQueryプラグイン化する以前からの懸念事項だった要素の幅に影響を与えるCSSプロパティの扱いと、子にテキストノード以外が含まれる場合の2つを考慮した感じにしてjquery.harmonize-textを0.2に更新しました。Works like a charm!? 要素の幅に影響を与えるCSSプロパティ 単純にclone()するとtransformプロパティやtransitionプロパティなどで変なことになりそうな気がしたので、要素の幅に影響を与えそうなプロパティを手作業でリストアップしてそれらのみをコピーすることにしました。そういう面倒なことはやりたくないって言ってたような気がしますけど、きっと気のせいです。 要素の幅に影響を与えるCSSプロパティは border-collapse border-left-width border-right-width box-sizing dis
$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。 XとYを別々に取得したい 値の検証 var bgPosDef = $('#hoge').css('backgroundPosition'); IE8まで（9は未検証） console: null（空） Firefox, Chrome, Safari, Operaなど console: 50px 50px IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。 var bgPosX = $('#hoge').css('backgroundPositionX'); var bgPosY = $('#hoge').css('backg
Using CSS transitions can be quite fun. But what's not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property). For example, let's say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0. The problem is that the element is
There are plenty of solutions for equal height columns using jQuery (like matchHeight.js). The basic idea is to measure all of their heights and then set all their heights to that of the tallest one. But what if there is multiple rows of blocks and you only want to increase the heights to match in the current row? This could happen from having different sized thumbnails or different amounts of tex
In today's post, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported. The benefit of transitions is that unlike JavaScript based animations, they're hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
Masonry is a layout plugin for the ever-popular Javascript library jQuery. Download jQuery Masonry Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Invoking Masonry only
Preface: Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn’t been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author – my original
This is not a suggestion for the jQuery core; it’s just something I required recently that some of you may find useful/intriguing… jQuery.fn.map = (function(_map) { return function(toMap, prop, jQueryOb) { if (typeof toMap === 'string') { var parts = toMap.match(/(\:|[^:])+/g), method = parts.shift(), args = parts, mapped = _map.call(this, function(){ var $this = $(this), result = $this[method].ap
For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not). View demo Download source code There is an update at the end of this tutorial and the second demo that s
I recently read an article showing 5 way to vertically align elements using CSS. I thought that the author showed some great examples of how to accomplish this. My only complaint is many of the examples were somewhat hacky or required that you set a height on the DIV you want to vertically align. Also a few of them did not work in IE6 or IE7. I set out to create a solution that did not require the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
