ドワ社の横に流れるソースコードのコメント

Twitter より、ドワ社のソースコードのコメントは横に流れると聞いて。

https://twitter.com/tototoshi/status/616137924602519553

横に流れるソースコードのコメント

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%);}
	}

view raw

native.main.css

hosted with ❤ by GitHub

Atom では公式な方法として styles.less を書き換え、見た目の変更ができますが、簡単に実現できなかったので、VS Code で試してみました。

CSS で、marquee 動作は、こちらを参考にしました。ほぼそのままです。オンズ » 【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。

Posted by jz5