[B! rotate][webdesign] yorozunaのブックマーク

yorozuna id:yorozuna

rotateとwebdesignに関するyorozunaのブックマーク (3)

画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。画像を斜めクリップにする方法画像を斜めクリップするイメージは、こんな感じです。要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。要素を斜めにするCSSは、transf ormプロパティを利用します。 transf ormプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transf orm: skewY(10
yorozuna 2015/04/29
transform

rotate

Web制作

css3

画像

マスク

webdesign

webデザイン
リンク
[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
yorozuna 2015/03/05
svg

Javascript

js

回転

rotate

UI

Animation

navigation

webdesign

web制作
リンク
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ（正確にはロゴの周囲の部分）がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transf orm プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。まずは実際に動作するサンプルを下記に。スクロールにあわせて CSS で回転するロゴのサンプル画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。なお、サンプルは transf orm プロパティを使用し
yorozuna 2014/06/11
スクロール

jQuery

JavaScript

CSS

web制作

webdesign

webデザイン

rotate

回転
リンク
1