コンテンツを魅力的に演出できるjQueryプラグインのまとめ

  • このエントリーをはてなブックマークに追加

こんにちは、工藤です。

今回は背景を魅力的に見せてくれるjsについてまとめてみました。

covervid

1covervid
サイトへ  github

背景いっぱいに動画を表示してくれるプラグインです。
動画を使用するのにすごく軽量なところが魅力的です。



particles.js

2particles
サイトへ  github

幾何学模様を背景に表示してくれるプラグインです。
マウスの動きに合わせて幾何学模様が動いてくれてちょっと楽しいです。
模様の点の数や動きの等もカスタマイズが可能です。



StickyStack

3StickyStack
サイトへ  github

レイヤーのように、スクロールをしたらセクションが上に重なっていくプラグインです。
ちょっと何かを説明するような資料チックなサイトに使えそうです。


SHARDS

4SHARDS
サイトへ  github

複数のグラデーションが重なり合う背景を作成できるプラグインです。
ページを更新すると形がランダムで変化するのが面白いです。



rainyday.js

5rainyday
サイトへ  DEMO  github

なんと指定した箇所に雨を降らせる事ができるプラグインです。
デモをご確認いただくとわかるのですが水滴がすごくリアルに表現されています。
canvasで描写している用ですがこんなことができるんですね。



multiScroll.js

7multiScroll
サイトへ  github

スクロールをすると左右に分割されたコンテンツが上下から現れます。
ちょっと変わったパララックス表現をしたい時にぴったりですね。




執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。