肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten

ベータ版ですが、ちょっと面白そうなシンプルなフレームワークがリリースされていたので紹介します。肉球に惹かれたわけではないですよ。

サイトのキャプチャ

Cool Kitten
Cool Kitten -GitHub

Cool Kittenはデスクトップ・タブレット・スマートフォンなど、レスポンシブ対応のパララックススクロールのエフェクトを備えたフレームワークです。
スクロールすると、肉球がパララックス!

サイトのキャプチャ

肉球

もちろん、レスポンシブ対応のグリッドも揃っています。

サイトのキャプチャ

グリッド

サイズを変更すると、グリッドはそのサイズに最適化!

サイトのキャプチャ

グリッドを幅480pxで表示

Cool Kittenは非常にシンプルなフレームワークで、使用しているリソースも非常にシンプルです。

  • Normalize.css
    クロスブラウザ用のデフォルトのスタイルをセット
  • jQuery Easing Plugin
    アニメーション
  • Stellar.js
    パララックス

スマフォでのパララックスでちょっとカクカクしましたが、シンプルな作りなので汎用性も高そうです。

top of page

©2017 coliss