[B! jQuery] hayasi-nのブックマーク

オバマ夫人にも採用！VR風パノラマ画像をサクッと実装するjQueryプラグイン10

いまやiPhoneでも撮れるパノラマ写真。不動産の物件紹介サイトでもパノラマビューを提供するサイトが増えていますね。専用のjQueryプラグインを使えば実装も簡単です。この記事で紹介するすばらしいjQueryパノラマ画像表示プラグインを取り込めば、Webサイトの画像の360度ビューを訪問者に堪能してもらえます。バーチャルツアー、パノラマビューワー／スクロール、画像のキューブ、エンドレスな写真スライダーなどが使えます。体感してみてください！次のような関連記事もあります。 8+ jQuery 360 Degrees Image Display Plugins 33 Mega jQuery Image Plugins Collection 1. Threesixtyslider ThreesixtysliderはjQueryを使った360度画像作成プラグインです。幸い、主要なブラウザー（IE

hayasi-n 2019/09/02

リンク

multiscroll.js - split multi-scrolling pages plugin

Powerful jQuery plugin Create split pages with two vertical scrolling panels. Compatible with mobile phones and devices and old browsers such as IE 11. <div id="multiscroll"> <div class="ms-left"> <div class="ms-section">Section 1 left</div> <div class="ms-section">Section 2 left</div> <div class="ms-section">Section 3 left</div> </div> <div class="ms-right"> <div class="ms-section">Section 1 righ

hayasi-n 2019/02/27

jquery

リンク

[jQuery]fullPage.jsでパララックスサイトを作ろう

2017年04月10日 Web jQuery,おさらいシリーズ 2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。パララックスってなに？視差効果のことです。サイトの場合、ページをスクロールする際に画面の手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。 FullPage.jsって？「jquery パララックス」と検索したくらいでは上位に表示されないのですが、有名なのはGoogleをはじめとした大手企業がこのプラグインを採用しているおかげでしょう。全画面表示でスクロールすると次の全画面表示がするっと現れます

hayasi-n 2019/02/27

リンク

パララックスサイトとは?作り方や参考例、テンプレート、jQueryプラグインまとめ | ホームページ大学

「パララックスサイト」という言葉をご存知ですか？パララックスサイトとは、パララックス効果を取り入れたWebサイトを指します。今回は、パララックスサイトとは何か、メリットやデメリットはどんなことがあるか、そして、WordPressテンプレートやjQueryプラグイン等を使った、パララックスサイトの作り方をご紹介します。パララックスサイトとは、パララックス（視差）の効果を適用したサイトのことです。パララックスとは、ページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。ちなみに、スクロールに合わせてパララックスなどの演出がある1ページのサイトのことを「高級ペライチ」と言います。【参考】高級ペライチって？参考にしたいおしゃれで面白い高級ペライチ40選！メリットパララックスサイトのメリットとしては、以下の3点が挙げられます。スト

hayasi-n 2019/02/27

リンク

実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。フレームワークにとらわれない React、V

hayasi-n 2018/06/22

リンク

[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider

スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny Slider Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴シンプルなHTMLで、高性能なスライダーを実装。他のJavaScript, CSSへの依存は無し。さまざまなスライダーに対応。水平・垂直・自動再生など、カスタマイズも簡単。矢印キー、ドラッグやタッチ操作にも対応。レスポンシブ対応、ブレイクポイントの設定も簡単。 CSS3対応のすべてのモダンブラウザをサポート。古いブラウザにはCSS2のフォールバックでサポート。サポートブラウザ Firefo

hayasi-n 2017/11/08

jQuery

リンク

[JS]これなら簡単！シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb）スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作します。 Macy.js Macy.js -GitHub Macy.jsの特徴 Macy.jsのデモ Macy.jsの使い方 Macy.jsの特徴 4kbの超軽量のライブラリ、他のファイルには一切依存しません。レスポンシブ対応、ブレイクポイントは簡単にカスタマイズできます。 HTMLは非常にシンプルな構造です。 CSSトランジションで動作します。シンプルなイベントAPIを備えています。 Macy.jsのデモ実際の動作は、デモページで楽しめます。動作は非常に軽快で、快適です。

hayasi-n 2017/08/18

jQuery

リンク

jQuery Plugin - 画像に拡大・縮小ボタンを実装 - Zoomer

画像に拡大・縮小ボタンを実装するプラグイン「Zoomer」を紹介します。 jQueryプラグイン「Zoomer」このプラグインを使えば、指定した画像を拡大・縮小表示するボタンを簡単に設置することができます。また、複数の画像をギャラリー化することもできる！おすすめプラグインです。それではデモページの画像を拡大・縮小してみてください。「Zoomer」のデモデモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Zoomer のデモでーす。"> <title>Zoomer - jQueryプラグイン</title> <link href="jquery.fs.zoomer.css" rel="stylesheet" type="t

hayasi-n 2017/06/26

jQuery

リンク

hayasi-n 2017/06/26

リンク

jQuery before-after.js Example

Download This Plugin Back To jQueryScript.Net jQuery before-after.js Example

hayasi-n 2017/02/27

jQuery

リンク

5 Free Image Comparison Slider Scripts

Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider that can be manipulated can be dragged by the user to show less of the before image and more of the after image, and vice versa. It’s the perfect way for certain scenarios such as viewing the harsh effects of Mars’ atmosphere or how city landscape

hayasi-n 2017/02/27

jQuery

リンク

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>

hayasi-n 2017/01/12

jquery

リンク

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え

hayasi-n 2016/12/15

リンク

jQuery TwentyTwenty Plugin | Playground from ZURB

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Probl em We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. We even thought about having one image fade into another. B

hayasi-n 2016/11/16

jquery

リンク

レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE

レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。 bxSlider 最初に紹介するのが［bxSlider］です。設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。ダウンロードURL

hayasi-n 2016/08/15

リンク

[JS]矩形やラインが移動するナビゲーションのホバーエフェクトを簡単に実装できるスクリプト -HoverSlippery

リスト要素で実装したナビゲーションに矩形が移動するラーバランプエフェクト、シンプルなラインが移動するホバーエフェクトを簡単に実装できるスクリプトを紹介します。

hayasi-n 2016/07/22

jQuery

リンク

[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

縦長ページのスクロールエフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ

hayasi-n 2016/07/17

jQuery

リンク

背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。詳細は以下から。背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

hayasi-n 2016/07/04

リンク

[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js

Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。