文字スクロールバー

職場でCSSの勉強がてら作ったけど、陽の目をみなかったスクリプト。
単純なスクリプトだけれども、文字数がおおい場合は
枠内をスクロールして、そうでない場合は中央揃えになる。

css

<style>
.message{
 position: relative;
 width: 400px;
 height: 40px;
 background: rgba(0,0,0,0.5);
 overflow: hidden;
 padding: 0 10px;
}
.message p{
 position: absolute;
 line-height: 40px;
 display: table-cell;
 min-width: 380px;
 box-sizing: border-box;
 padding: 0;
 height: 40px;
 text-align: center;
 vertical-align: middle;
 color: white;
 margin: 0;
 white-space: nowrap;
}
</style>

js

<script>
$(function(){
 function imageMessageAnimate(){
var $im = $('.message');
var imw = $im.width();
var $imp = $('.message p');
var impw = $imp.width();
var startdelay = 3000;
var enddelay = 3000;
var refleshtime = 1000;
var animatetime = (impw-imw) * 10;
var sumtime = startdelay + enddelay + refleshtime + animatetime;
if ((impw-imw) > 0){
 $imp.delay(startdelay)
 .animate({
marginLeft: -(impw-imw)+"px",
 }, animatetime , 'linear')
 .delay(enddelay)
 .animate({
opacity: 0.0
 }, refleshtime/2.0, 'swing', function(){
$(this).css('marginLeft', 0);
 })
 .animate({
opacity: 1.0
 }, refleshtime/2.0);
 setTimeout(imageMessageAnimate, sumtime);
}
 }
 imageMessageAnimate();
});
</script>

html

<div class='message'>
 <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
</div>

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

gulpを使う

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
ここを参考に。 gruntの使用経験はあったけれど、 あちらは設定ファイルが巨大化したりして、いつの間にか記述間違えていたりした。 こっちはすんなりと入ってびっくり。

gulpとBrowsersync

browserによる再読み込みはローカル環境では上記通りだが、 もし仮想環境上にある場合は、proxyモードと呼ばれるもので操作することができるらしい Browsersync - Time-saving synchronised browser testing

gulp.task("server", function() {
  browser({
    server: {
      baseDir: "./"
    }
  });
});

こう書いているが、これではindex.htmlしか確認できないじゃないか！ hoge.htmlで作業がしたいんだぞ！と困ったが ブラウザ上のURLが

http://localhost:3000/

だったとすれば

http://localhost:3000/hoge.html

とすれば、普通に確認できたし、更新もされた。 browsersyncでルートディレクトリから下はすべて監視対象なんだな。なんて便利なんだ

gulpとタスク

「gulp」コマンドの後ろにタスク名を書けば、そのタスクを実行できる。 公開用にgulpのタスクを分けてみるとかもできそう。

gulpと引数

gulpに引数を渡す場合は、linuxのオプションみたいに

gulp --hoge=aaaa

とすれば、hogeというキーにaaaaという値が入力される。こうしないとタスク扱いされてしまう