Authorpannyatto

iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」

今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。

おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI(ユーザーインターフェイス)が身近になってきました。

jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。

「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。

この機能を文字では説明しきれないので、紹介の動画をご覧ください。

サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル

→「iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む

横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」


Smooth Vertical or Horizontal Page Scrolling with jQuery

他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。

まずはサンプルをご覧ください。

→ Smooth Vertical or Horizontal Page Scrolling with jQueryプラグインサンプル

→「横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」」の続きを読む

美しい羽根や羽毛を集めたPhotoshop(フォトショップ)羽毛ブラシ無料素材集

WebのデザインをするときにPhotoshopのブラシの機能は本当に便利ですよね。羽毛や羽根をデザインにしたブラシセットを見つけました。

保存版 Photoshop(フォトショップ)羽根・羽毛ブラシ無料素材集

Photoshop羽毛ブラシ素材集1

Feathers by ~ShadyMedusa-stock

ダウンロードはこちら


Photoshop(フォトショップ)羽毛ブラシ2

Feather brushes – set 03 by ~LunaNYXstock

 ダウンロードはこちら


Photoshop(フォトショップ)羽毛ブラシ3

Duck Feathers II by ~ShadyMedusa-stock

ダウンロードはこちら


Photoshop(フォトショップ)羽毛ブラシ4

Feathers Brushes Set 1  by ~Falln-Brushes

ダウンロードはこちら


Photoshop(フォトショップ)羽毛ブラシ5

Feather Brushes by ~mcbadshoes

ダウンロードはこちら


カスタムブラシのPhotoshopへの登録の仕方がわからない方、ど忘れした方は、続きをどうぞ。

→「美しい羽根や羽毛を集めたPhotoshop(フォトショップ)羽毛ブラシ無料素材集」の続きを読む

スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」

「Nivo Slider」は画像をかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。
16種類ものエフェクト効果があり、それらをランダムに使用することもできます。

まずはサンプルをご覧ください。

→ 「Nivo Slider」サンプルページ

「Nivo Slider」の使用方法は続きをご覧下さい。

→「スライドするときのエフェクトがたくさんあるかっこいいjQuery画像スライダー「Nivo Slider」」の続きを読む

div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」

jQuery Slider²

【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください。

「jQuery Slider2」は、簡単に画像や文字をスライドさせる軽量のJavaScriptです。

<div>~</div>で囲んだdiv要素ごとにスライドさせるという便利なスライダーです。

サンプルはこちら

→ 「jQuery Slider2」サンプルページ

「jQuery Slider2」の設置方法は続きをご覧下さい。

→「div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」」の続きを読む