ドワ社の横に流れるソースコードのコメント
Twitter より、ドワ社のソースコードのコメントは横に流れると聞いて。
ドワ社のソースコードのコメントって横に流れてくんでしょ
— Toshiyuki Takahashi (@tototoshi) July 1, 2015
横に流れるソースコードのコメント
Visual Studio Code でドワ社の環境をイメージしてみました。ドワ社で VS Code は使われていなさそうですが。
テーマの編集
VS Code の CSS を編集しています。VS Code のテーマ書き換え(非公式の方法)は、Visual Studio Code のテーマを変更する を参考にしてください。
native.main.css に comment クラスがあったので、末尾に下記を付け足すと図のように動作しました。# のみのコメントは動作していないですね。
.comment { | |
display:inline-block; | |
white-space:nowrap; | |
-webkit-animation-name:marquee; | |
-webkit-animation-timing-function:linear; | |
-webkit-animation-duration:10s; | |
-webkit-animation-iteration-count:infinite; | |
-moz-animation-name:marquee; | |
-moz-animation-timing-function:linear; | |
-moz-animation-duration:10s; | |
-moz-animation-iteration-count:infinite; | |
-ms-animation-name:marquee; | |
-ms-animation-timing-function:linear; | |
-ms-animation-duration:10s; | |
-ms-animation-iteration-count:infinite; | |
-o-animation-name:marquee; | |
-o-animation-timing-function:linear; | |
-o-animation-duration:10s; | |
-o-animation-iteration-count:infinite; | |
animation-name:marquee; | |
animation-timing-function:linear; | |
animation-duration:10s; | |
animation-iteration-count:infinite; | |
} | |
@-webkit-keyframes marquee { | |
from { -webkit-transform: translate(0%);} | |
99%,to { -webkit-transform: translate(-100%);} | |
} | |
@-moz-keyframes marquee { | |
from { -moz-transform: translate(0%);} | |
99%,to { -moz-transform: translate(-100%);} | |
} | |
@-ms-keyframes marquee { | |
from { -ms-transform: translate(0%);} | |
99%,to { -ms-transform: translate(-100%);} | |
} | |
@-o-keyframes marquee { | |
from { -o-transform: translate(0%);} | |
99%,to { -o-transform: translate(-100%);} | |
} | |
@keyframes marquee { | |
from { transform: translate(0%);} | |
99%,to { transform: translate(-100%);} | |
} |
Atom では公式な方法として styles.less を書き換え、見た目の変更ができますが、簡単に実現できなかったので、VS Code で試してみました。
CSS で、marquee 動作は、こちらを参考にしました。ほぼそのままです。オンズ » 【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。