wordpressで画像のビフォーアフターを比較するなら「TwentyTwenty」プラグインで！ | 【MsReDesign】スタバの新作・カスタマイズ記事・Wordpressネタなど
wordpressで画像のビフォーアフターを比較するなら「TwentyTwenty」プラグインで！ 2016-12-07 2016-12-07 Wordpreeプラグイン 画像の比較をさせたい時ってありますよね。 リフォームのビフォーアフターだったり、ある物の効果を説明するのにビフォーアフターの写真載せたり。 画像並べて表示するのもありですが、wordpressのプラグイン TwentyTwenty ならおしゃれに画像比較を載せることができます。 ビフォーアフターでなく、単純に２枚の画像を比較したい時にも使えるのがこのプラグインのいいところです。 例えば、エフェクトをかけた写真を紹介したい場合。 [twentytwenty] [/twentytwenty] こんな感じで、表示することができます。 画像の真ん中にあるバーをつまみながら動かすことで、比較しながら見ることができます。 おしゃれで
かっこいいプロモーションサイトが作れる multiScroll.js
「multiScroll.js」 は、画面を左右に分割して別々にスクロールして見せられるjQueryプラグインです。最近流行の効果を簡単に実装でき、スクロールスピードの調整やイージングの設定、スクロールのループなどのカスタマイズもできます。 multiScroll.jsはGoogle ChromeやFirefoxなどのモダンブラウザーと、Internet Explorer 8以降に対応しています。スマートフォン用ブラウザーでの動作は保証されていませんが、筆者の検証ではiOS 7.1.1でスムーズに動作していました。スマートフォンサイトの場合はターゲット端末で必ず検証してから利用しましょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、multiScroll.j
Googleカレンダー対応の、シンプルなイベントカレンダーを実装出来るjQueryプラグイン・kalendar
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
jQuery Text Animation - jQuery Plugins
$("div#demo_high1").textAnimation({ mode:"highlight" }); $("div#demo_high2").textAnimation({ mode:"highlight", baseColor:"#111111", //base font color highlightColor:"#2FFF5F", //highlight font color onStart:"mouseenter", //event handler for start animation[Browse jQuery Events] onFinish:"mouseleave", //event handler for finish animation[Browse jQuery Events] delay:35, //delay time for animation be
ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」
jQuery Before/After Plugin ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After Plugin」です。たとえば、化粧品の使用前使用後の写真、ダイエット前ダイエット後の写真、家のリフォーム前リフォーム後の写真など同じアングルの写真を比べて見て欲しいときに便利です。 サンプルを作ってみました。 → ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」サンプル ただ写真を並べて紹介するよりも、印象が強くなりますね。ネットショップでも活用できそうです。 【使用方法】 まずはjQuery Before/After Pluginの配布サイトからダウンロードします。 BODY部の最後にJavaScriptの記述をします。ファイルのパスとダウンロードしてきたファイル名
マウスホバーで画像を拡大させるjQueryプラグイン・Image Zoom Plugin
よくあるマウスホバーによるイメージズーマースクリプトです。様々なタイプのズーマーを実装出来るのでなかなか便利そうだなーと思って備忘録。とはいえ同じ物も沢山あるのでお好みで良さそうです。 ECサイトなんかでよく見かけるやつですね。マウスを乗せると拡大され、動かす事で細かい部分を確認出来る、みたいな。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】｜BLACKFLAG
これらの設定値を変更することでもろもろ調整が可能になっています。 対象のベースの要素がIDでもクラスでも可能になっているので、1ページ内に複数設置の際にはクラスを使用することで、複数設置することが可能になっています。 1ページ内に2つのクロスフェードビューアーを設置して、それぞれにキャプションを付けた形でのサンプルは以下の様になります。 複数設置＆キャプション付きサンプルを別枠で表示 凝った演出などはありませんが、シンプルに画像などを切り替えるだけの動作が必要な際に手軽に使えると思います。 クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。 サンプルファイルをダウンロードしたい方はこちらから
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すごいReactパッケージ5選 - Qiita