UNORTHODOX WORKBOOK

2015.02.22 Sun

CSSでボーダーをボックスに沿って走らせる

昨日に引き続き、CSSの小ネタを紹介します。「CSSでボーダーをボックスに沿って走らせる」とか、よく分からないタイトルですが、簡単にいうとボーダーをボックスに沿って移動させる方法で、四角いボックスの外周を回り続けるエフェ…

2015.02.21 Sat

CSSのみでストライプの背景をマウスホバーで動かす

CSSの小ネタ。マウスホバー時の挙動として、ちょっと面白かったのでCSSだけで作ってみました。 ストライプの背景をマウスホバーで動かし、ぐるぐると回っているような感じに見せるエフェクトです。画像を一切使わず、背景のストラ…

2015.02.05 Thu

[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法

アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします…

2015.02.01 Sun

[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー

このサイトでも使用している(2015年1月現在)パタッと開いてパタッと現れるサイドメニューを実装する際に、CSSの transform:perspective を使用したんですが、少しはまった点があったので、復習を兼ねて…

2015.01.22 Thu

Velocity.jsを使ったスムースなページ内スクロール

アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困ってい…