UNORTHODOX WORKBOOK

2016.09.18 Sun

テキストエディタで正規表現の後方参照を使った置換（検索）を行う方法

テキストエディタで正規表現の置換（検索）を行う際に、一部分だけを残し、その他の部分を置き換える、いわゆる後方参照を使った置換ができることを知ったのでメモ。忘れそうなので詳細を記載します。 正規表現を使って置換ができるテキ…

2015.09.24 Thu

[After Effects] 文字を書き順通りに徐々に表示させるアニメーションの作り方

文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション（動画）を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしま…

2015.05.31 Sun

カラーミーショップで配列の中身を確認する方法

タイトルの通りで、カラーミーショップで使用されている独自タグの配列の中身を確認したくて、調べてみると意外にもできたのでメモ。 カラーミーネタはあまり需要がなさそうなんですが、案件で使ったりするので、今後の為に備忘録として…

2015.05.24 Sun

CSSでテキストをなぞるようにアニメーションしながら色を変える

なぞるようにといっても、書き順通りに文字を書いていくようなものではなくて、左から右へ徐々にスライドさせて色を変えるエフェクト。 なんと言ったらいいのかよく分からないのですが、所謂、プログレスバーのように進行しながら、徐々…

2015.03.16 Mon

CSSフィルターを使って流体を表現する(＋SVGフィルター)

滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたい…

2015.03.08 Sun

CSSのclipプロパティを使ってテキストの一部を切り取って横へずらす

テキストにノイズがかかったようなアニメーションをCSSだけで実現したくて、とりあえずテキストの一部分だけを切り取って横へずらすことはできないかなと模索していまして、何かそれっぽい感じのことができたのでブログに残しておきま…

2015.03.07 Sat

CSSでボーダーの両端を徐々に透過させる

画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。 ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあっ…

2015.02.05 Thu

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

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

2014.12.10 Wed

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

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