Sliding Panels Template

JavaScript

スライドがカッコいいシンプルなポートフォリオ「Sliding Panels Template」

Sliding Panels Templateはシンプルでスライドがカッコいいポートフォリオを実装することができます。CSSとjQueryが使われているとのこと。

アイテムを選択するとスライドアニメーションが実行され、そのアイテムの詳細ページに移り変わります。スムーズでサクサクと動作するのでストレスもなくとても快適です。

Sliding Panels Template

デモ

デモではProject 1〜Project 4まで並んでおり、各Projectを選択するとスライドして詳細ページへ移動します。

右上にある「×」をクリックすると元の一覧ページに戻ります。

アニメーションも自然な感じで、煩わしくないので快適にポートフォリオを見ることができますね。

デモページはレスポンシブになっており、ブラウザ幅を縮小すると横並びのレイアウトから縦並びのレイアウトへ切り替わります。

PCやスマホなどいろんなデバイスから快適に閲覧できるのがいいですね。

というわけで、これからカッコいいポートフォリオをつくりたいという方は、ぜひSliding Panels Templateをチェックしてみてはいかがでしょうか。

Sliding Panels Template

関連記事

  1. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  2. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  3. no-image

    JavaScript

    サラッとスライスで切り替わるスライダー実装「Slice Slider」

    Slice Sliderはサラッとスライスでシンプルに切り替わるスライ…

  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. no-image
  6. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP