タグ

ブックマーク / wood-roots.com (2)

  • 【Javascript】CSSアニメーションがつらいのでanime.jsを試してみた | Wood-Roots:blog

    アニメーションをCSSで書くようになって数年になりますが、凝ったアニメーションを書こうと思うと年々つらくなってきました。 CSSアニメーションのつらみ イージングがつらい transitionならcubic-bezierを書くだけでいいですが、@keyframesでイージングを書こうと思うとつらい。 というか人力で書けるものなのだろうか。 完了を検知して連続したアニメーションを実装するのがつらい transitionend/animationendでクラスを足していってそのクラスに対してアニメーション…つらい。 transitionend/animationendではなくX秒のアニメーションAが終わったらX秒のディレイ後にアニメーションB…とやれば多少は楽ですが、妥協感と将来的に破綻する未来が見える。 CSSファイルがつらい 単純に行数が増えてつらい。 …この状況を打開するために、JSで制

    【Javascript】CSSアニメーションがつらいのでanime.jsを試してみた | Wood-Roots:blog
  • [jQuery/Javascript]jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog

    DEMO 最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。 正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。 余談ですが・・・三角関数とは 言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。 y = sin(x) という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線(正弦波といわれるもの)になります。 要素を回転させ続

  • 1