one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【65:Sass】SassでCSSを楽にする

f:id:seintoseiya:20160515032716j:plain
プロジェクトNo.65

SassとはSyntactically Awesome Stylesheetsの略で、直訳すると「構文的なすごいスタイルシート」です。
Sassで書いたファイルをコンパイルしてcssに出力して使います。
大抵は大規模なサイトや複数人で実装するような現場で使われるようです。

続きを読む

【64:VJをはじめよう】VDMX5を使って映像を操作する

f:id:seintoseiya:20160428141401g:plain
プロジェクトNo.64: VJをはじめよう

DJがDisk Jockeyならば、VJはVisual Jockey。
だいぶ前からある言葉のようですね。(1980年代くらい?)
最近ではプロジェクションマッピングが流行ってますが、ただ立体に映像を投影するだけでなく、
リアルタイムで映像を操作してDJのようにイケイケな演出ができるようです。
私もイケイケになりたいのでVJはじめてみようと思います。

続きを読む

【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装

f:id:seintoseiya:20160427170107g:plain
プロジェクトNo.63: WOW.js+Animate.css - DEMO

画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。
容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。

続きを読む

【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク

f:id:seintoseiya:20160427053927p:plain
プロジェクトNo.62:PageTopへ戻る - DEMO

ページトップへ戻るリンクを簡単に実装しようと思うと、

<a href="#header">PAGE UP</a>

みたいなのをfooterに配置するなど考えられるが、
今回実装するのは以下のようなもの。

  • リンクは画面下部に常に表示
  • ただし、ある程度スクロールした後に表示
  • フッターまでスクロールしたら重ならないようにする
  • ページジャンプはスムーススクロール
続きを読む

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

f:id:seintoseiya:20160427042025p:plain
プロジェクトNo.61:videoタグで背景動画 - DEMO

前回jQueryプラグインを使用しましたが、
HTML5のvideoタグでも実現できました。
またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

続きを読む

【オートコンプリート】JQueryUIのautocompleteで入力補完機能を実装

f:id:seintoseiya:20151112194350p:plain
プロジェクトNo.59:オートコンプリート - DEMO

先日、面接に行った企業から出された課題の一つに「オートコンプリート」があったので実装してみました。

続きを読む