Riotのコンポーネント作り4日目 -lazyなcontent

お久しぶりです。クロパンダです。

10月から工学研修という、研究室の体験のようなことをしていたのですが、その研究室から借りていたMacを先週ついに返してしまいました。これで使用マシンのスペックが大きく下がって、プログラミングへのやる気も一緒にダダ下がりしています。

今回はスクロールされて可視領域に入ったらフェードインするコンポーネントを作りました。

<lazy-content></lazy-content>

詳細

lazy-contentははじめはhiddenクラスが付与されていて、可視領域へ入るとhiddenクラスが外れます。これだけです。そのため、CSSを設定しないとフェードインも何もされません。

lazy-content {
  opacity: 1;
  transition: opacity 1s linear 0;
}
lazy-content.hidden {
  opacity: 0;
}

コード

<style>
lazy-content {
  opacity: 1;
  transition: opacity 1s linear 0;
}
lazy-content.hidden {
  opacity: 0;
}
</style>
<lazy-content>1</lazy-content>
<lazy-content>2</lazy-content>
<lazy-content>3</lazy-content>
<lazy-content>4</lazy-content>
<lazy-content>5</lazy-content>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
<script src="lazy-content.js"></script>
<script>
    riot.mount('lazy-content')
</script>

lazy-content.jsは以下からダウンロードしてください。 github.com