見出し画像

tailwindcssライブラリを使ってランディングページを作ってみました~スクロールアニメーションを添えて~

こんにちわ。nap5です。


tailwindcssライブラリを使ってランディングページを作ってみたので、紹介したいと思います。あまり作り込まない段階のスケルトン的なイメージでワークアラウンドしてみました。


実装している機能は以下です。

  1. ページ遷移

  2. ハンバーガーメニュー

    1. ハンディクロージング付き

  3. aosライブラリを使ったスクロールアニメーション

  4. gsaplottieを組み合わせたスクロールアニメーション

  5. framer-motionによるアニメーション

  6. react-tabsライブラリを使ったプライシングページ

  7. splidejsライブラリを使ったカルーセル

  8. レスポンシブ対応


tailwindcssを使って何かアウトプットしたかったので、トライしてみました。実際はランディングページとなるとSEOなど考える必要があると思うので、SPAでのデモレベルということです。SPAの場合、prerenderなどを使ってなにがしかの対策をする必要があると考えています。


デモサイトです。


デモコードはGumroadに置いてみました。$10です。Gumroadは使ってみたかったので、今回ちょっと利用してみました。Paypalから支払うことができます。


今っぽい感じのアニメーションを入れてみたので、ダウンロードした後、zipを展開し、

$ yarn install
$ yarn dev

と打つと、ローカルでサーブできると思います。
カスタマイズしてみても面白いかもしれないですね。


aosライブラリはハンディだったので、これからも使っていきたいと感じました。


最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。


また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/


また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか?