UNORTHODOX WORKBOOK

2016.08.08 Mon

外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する

SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても…

2015.02.09 Mon

非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する

最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 ta…

2015.02.05 Thu

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

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

2015.01.22 Thu

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

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

2015.01.10 Sat

【jQuery】スクロールと連動して一瞬だけテキストを表示する

前回の続きになりますが、今回はjQueryを利用して、前回よりも少しだけリッチな感じにしたものをご紹介いたします。 タイトルの通り、スクロールと連動させ、スクロールにあわせて一瞬だけテキストを表示させる方法になります。 …

2014.12.10 Wed

【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS)

最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たの…

2014.05.13 Tue

スクロールするとふわっと現れる文字や画像

書くことが何もないので、最近のWebサイトでよく目にする「あれ」について書いてみたいと思います。色々なやり方があるかと思いますが、難しいことはよく分からないので、簡単にできるjQueryとcss3を使ったもので実装してみ…