div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
デザインをしていると、iPhoneやiPadなどのタブレット端末やMacのパソコンディスプレイなどの画像素材が必要な場合があるかもしれません。
そこで、Photoshop（フォトショップ）で簡単に編集ができるPSDファイルのディスプレイ無料素材を集めてみました。
ディスプレイ内の画像を変更したりといろいろな使い方が出来そうです。
→「iPhone、iPadやMacなどのディスプレイを集めたPhotoshop（フォトショップ）端末ディスプレイPSD無料素材集」の続きを読む
ページを切り替えるときに効果を与える方法はいろいろありますが、ほとんどはjQueryなどのJavaScriptを使用したものがたくさん溢れているような気がします。
しかし今回はCSSのみを使用して、ひとつのページでコンテンツをスライドさせて切り替える『Page Transitions with CSS3』を紹介します。
<div>～</div>で囲んだdiv要素ごとにページを作成し、コンテンツをスライドさせてページを切り替えるワンページャーのウェブサイトを作ることができます。
とういうことで、サンプルページを作ってみました。こんな感じになります。
→「ページ切り替えが楽しくなる！ワンページで紙芝居風にページをスライドして切り替える『Page Transitions with CSS3』」の続きを読む
Fullscreen Templete以前、背景にフルスクリーン画像を表示するjQueryを紹介しました。
（参照 「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」）
今回はjQueryやHTMLの知識が特別なくても、バックグラウンドでフルスクリーン画像を表示させるWebサイトを実現することができるテンプレートを紹介します。
HTMLやWordPress、もしくはPHPのWebサイトで画像を背景にフルスクリーンで使用したい方におすすめなのがこちらの「Fullscreen Templete」です。
→「背景画像フルスクリーンテンプレート＆フルスクリーンWordPressテーマ『Fullscreen Templete』」の続きを読む
ページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Back To Top」を見かけますが、jQueryを使用したエフェクトやデザイン的にもお洒落に作ってある簡単jQueryプラグインをご紹介します。
サンプルを作ってみました。こちらをご覧ください。
それでは設置方法を説明します。
→「ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグイン」の続きを読む
セキュリティソフトはウィルスやスパイウェアから、パソコンを守る上で欠かせないものですよね。でも、毎年毎年発生するライセンスの更新料が結構負担になってきたりします。ビジネスで複数のパソコンを使用しているとなる場合は、一つのライセンスで使用できるPC数が制限されていたりして、すべてのパソコンを保護しようとすると更に費用がかかってしまいます。
ところが、マイクロソフト社が提供しているこの「Microsoft Security Essentials」は無料で利用でき、しかもPC が10 台までの小規模ビジネスに使用できると明記されています。これは、個人利用としてだけではなく、あまり予算のない小規模なビジネスをされている方にも大変助かるセキュリティソフトです。
→「マイクロソフトが提供している無料ウィルスセキュリティソフト『Microsoft Security Essentials』」の続きを読む
サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」
jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。
ということで、サンプル作ってみました。こんな感じになります。
→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む
Webのデザインをするときに背景をつなぎ目のないパターンで飾ることもよくあると思います。
ホームページやブログのＷｅｂデザインだけでなく、ポスターやチラシなどの紙媒体にもかなり使えますよね。
最近はかなりデザイン性が高くクリエイティブな背景無料パターンも見られるようになって来ました。
そんなお洒落でレトロな感じのＰｈｏｔｏｓｈｏｐ背景パターン無料素材をご紹介します。
→「背景デザインに使えるレトロで美しいパターンを集めたPhotoshop（フォトショップ）無料パターン素材集」の続きを読む
クールで大きなスライダーが印象的なWordPressフリーテーマ「Corporattica V0.2」をご紹介します。
企業や広告会社、デザイン会社などの企業のコーポレートサイトにも使えそうです。
AboutのページとContact（お問い合わせフォーム）が標準で入っています。
デモはこちら → Preview
ダウンロードはこちら → Download
設定の方法はこちら → Corporattica Theme Installation Guide（英文）
（Google翻訳を通した分はこちら → Corporatticaテーマのインストールガイド）
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。
しかも、導入はいたってシンプル簡単です。
サンプルページを作ってみました。ご覧ください。
日本語のテキストでもきちんと表示されていますね。
Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。
このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。
サンプルを作ってみましたので、ご覧下さい。
→「画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑