はてなブックマーク

本をめくるように見せる方法は、以前はFlashを使ったり、複雑なJavaScriptでプログラムを組んだりと面倒でしたが、簡単にjQueryで表現できるようになりました。 div要素を本のページをめくるようにみせたい場合は、この「Flippage」を利用すると実現できます。 サンプルを作ってみました。 本をめくるようにみれるjQueryプラグイン「FlipPage」の使い方は、続きをご覧下さい。 「FlipPage」の設置方法 まずは、Flippage by marcbuilsのサイトから、Download.zipをダウンロードします。 ダウンロードしたzipファイルを解凍します。いろいろなファイルが入っていますが、実際に使うのは以下のファイルになります。 jquery.flippage.cssjquery.flippage.jsjquery.min.js（jQuery CDNを使うときは

Webサイトのページ背景に動画を流して、お洒落に演出したい方にオススメなのがこの「Tubular」というjQueryプラグイン。 YouTube動画をWebサイトの背景としてフルスクリーンで流すことができます。 Youtubeを利用しているので、表示も軽くて快適です。 設定も簡単です。サンプルを作ってみました。 ※ iPhoneのSafariではうまく動作しない場合があります。 「Tubular」の使い方は、続きをご覧下さい。 「Tubular」の設置方法 まずは、Tubularのダウンロードページから、jquery.tubular.1.0.1.zipをダウンロードします。 https://code.google.com/archive/p/jquery-tubular/downloads ダウンロードしてきた一式のファイルの中で、利用するのは以下のファイルになります。 screen.cs

「Nivo Slider」は画像をお洒落にかっこよくスライドさせて見せたい方にぴったりの画像スライダーです。 たくさんのスライドのエフェクト効果があり、それらをランダムに使用することもできます。 まずはサンプルをご覧ください。 jQueryプラグイン「Nivo Slider」サンプル 「Nivo Slider」の設置方法は続きをご覧下さい。 「Nivo Slider」の設置方法 まずは「Novo Slider」の公式ページから、jQueryプラグインバージョンの「Nivo Slider」ファイル一式をダウンロードします。 GitHubのページに移りますので、こちらからダウンロードできます。 ダウンロードしたzipファイルを解凍します。使用するファイルは以下になります。 nivo-slider.cssjquery.nivo.slider.jsthemesフォルダ内のcssファイル まず、<h