LoginSignup
3

More than 5 years have passed since last update.

「ここさー、ちょっとだけアニメーションしてよー」とか気軽に言われたときに

Posted at

「ページ読み込んでちょっとスクロールさせたらこれが出てくる」「読み込んで2秒くらいしたらここがどーんとなる」とか「まあそんなあんまり本気なつもりじゃないんだけどーあるとなんか嬉しいっていうかー」的なサイト上の演出を、とっても簡単に話振られたりしませんか? 私はよく振られます。都度それらしいアニメーション専用のプラグイン入れるのも大仰だし、でも都度都度CSSだのJSだののアニメーションを書くのも疲れたので、この際jQueryのプラグインにまとめてみました。

jquery.cue.js

なお、動作しているのはこちらです。

至ってシンプルに、指定のタイミングが来たら、やはり指定されたCSS transitionが動くというそれだけのシロモノです。HTML側で概ね制御できますので、調整などもそれなりに簡単に行なえます。でもやっぱり複雑なことをさせたいよ、てな場合は、指定のタイミングで任意のクラス名が付与されるという(だけの)仕組みですので、CSSに書いちゃうのがいいと思います。

折があれば複数のトランジションが指定できるようにしようとか思いますが、それはまあまたいずれ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3