akiramazのブックマーク - はてなブックマーク

akiramaz id:akiramaz

ブックマーク / myakura.hatenablog.com (2)

するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。サイボウズ | 採用情報（新卒・キャリア）といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションの実装を調べるあとのことを考えて、Chrome DevToolsを使う。まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
akiramaz 2016/05/14
JavaScript

chrome

css
リンク
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。今回はするするさせられないか、がんばってみる。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウザでもするするさせるアニメーションを止めるまず、いまのjQueryベースなアニメーションを止める。コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
akiramaz 2016/05/14
css

JavaScript

jQuery
リンク
1