[B! JS] [5ページ] z1a2nhのブックマーク

[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定まずは、コアとなるフレームを作成します。この中に

z1a2nh 2015/04/06

気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

JS

リンク

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモデモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjQu

z1a2nh 2015/03/19

かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2

JS

リンク

リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow

z1a2nh 2015/03/16

リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選

JS

リンク

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex

z1a2nh 2015/03/16

スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

JS

リンク

[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js

ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '

z1a2nh 2015/03/09

極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js

JS

リンク

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモデモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。デモページ：Demo 3 In: bounceIn, Out: bounceOut a

z1a2nh 2015/03/04

操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js

JS

リンク

[JS]幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg

ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示するスクリプトを紹介します。 SVGとPNGが混在しているページでも無問題、SVGはベクターなのでそのまま拡大、PNGはそのサイズ用の画像ファイルを表示する賢い仕様になっています。 Rimg -GitHub Rimgの特徴 Rimgのデモ Rimgの使い方 Rimgの特徴 100%フロントエンドのコード（バックエンドは一切無し）。単独で利用できるスクリプト、jQueryなどは必要ありません。しかも、超軽量（6.0KB）。 UA判定やクッキーなど、環境に依存して判定するものは使用していません。画像や背景画像をレスポンシブ対応にし、最適な画像を表示します（Retinaディスプレイ、リサイズ対応）。スクロールして画像が表示されたらロードするLazy Loadに対応。ス

z1a2nh 2015/02/13

幅広いブラウザをサポート！表示サイズに最適な画像・背景画像を表示するレスポンシブ対応の軽量スクリプト -Rimg

JS

リンク

[JS]ページにちょっとしたイースターエッグを仕込むことができるスクリプト -Overscroll

デスクトップやスマホで、ページの領域を超えてスクロールするとバウンドするような感じになりますよね。その時にちょっとしたイースターエッグをアニメーションで表示する単体で動作する軽量スクリプトを紹介します。 Overscroll Overscroll -GitHub Overscrollのデモ Overscrollの使い方 Overscrollのデモデモはオーバースクロールのゾーンがある、OS XのChrome, Safariでご覧ください。 WindowsやIE, Firefoxにはオーバースクロールのゾーンがないため動作しません。デモページ領域を超えてスクロールすると、ひょこっとイースターエッグが表示されます。天地、どちらもOKです。 OS Xが手元にない場合は、下記の動画でデモを確認できます。デモの動画 Overscrollの使い方 Step 1: 外部ファイル当スクリプトを

z1a2nh 2015/02/09

ページにちょっとしたイースターエッグを仕込むことができるスクリプト -Overscroll

JS

リンク

刀でズバッと斬るようなアニメーションをHTML・CSS・JS（jQuery）で実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。最近とある案件で「刀でズバッと切る感じのアニメーションを入れる」ってことになって、実装してみました。ゲームなどでよくある表現ですね。やってみると、ポイントを押さえれば意外とシンプルに実装できたので、その方法をご紹介したいと思います。はじめに今回はこちらの画像を使いたいと思います。我らが広報ヨシキさんです。垂直か水平にズバッと斬るアニメーションなら比較的簡単なんですが、このような表現においてよく使うのは�斜めにズバッと斬るアニメーションだと思うので、そっちにしてみます。素材となる画像を用意するまずはPhotshopで画像をつくります。ズバッと斬るアニメーションを実装するには、元の画像から3つの画像をつくる必要があります。上半分の画像まずは上半分の画像をつくります。では早速やってみまし

z1a2nh 2015/02/05

このタイミングをまってた

JS

リンク

[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl

z1a2nh 2015/01/29

ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity

JS

リンク

[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor

指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 ParallaxorのデモデモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com

z1a2nh 2015/01/19

非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor

JS

リンク

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.google apis.com/ajax/libs/jquery/2.1.1/jquery.min.js

z1a2nh 2014/12/19

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR

JS

リンク

ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、CTOのづやです。サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。使うための準備まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="

z1a2nh 2014/11/25

ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう

JS

リンク

[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。今必要とされるさまざまな機能を備えています。「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。デフォルトの5タイプのスライダー機能は非常に豊富です。さまざまなデバイスのスクリーンに対応デフォルトで完全にレスポンシブ対応（デモ全て）タッチ・スワイプ操作に対応（デモ全て）ブレイクポイント

z1a2nh 2014/11/19

スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

JS

リンク

[JS]非常に簡単な実装で、ページ上のさまざまな要素にオーバーレイを表示できるスクリプト -Purplecoat.js

画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示できるjQueryのプラグインを紹介します。使い方も非常に簡単で、スクリプトを一行も記述しないで利用できます。デモページ：カスタマイズ Purplecoat.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="purplecoat-min.js"></script> </body> Step 2: HTML オーバーレイを表示したいエレメントにda

z1a2nh 2014/11/12

非常に簡単な実装で、ページ上のさまざまな要素にオーバーレイを表示できるスクリプト -Purplecoat.js

JS

リンク

[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS

最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！デモページ：2ページ目ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq

z1a2nh 2014/09/24

縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS

JS

リンク

[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider

divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip

z1a2nh 2014/09/17

アナキン・スカイウォーカー

JS

リンク

[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider

デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートを外部ファイルとして記述します。「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s

z1a2nh 2014/09/11

ミサワ君

JS

リンク

[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 AnimsitionのデモデモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！その中からデモで、9種類が楽しめます。 demo:

z1a2nh 2014/09/01

ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition

JS

リンク

[JS]そのアイデアに脱帽！ひと味違う使い方が面白いツールチップのスクリプト -thoughtBubble

マンガやアニメのように、てん、てん、てん、ぽわーんと思っている事を吹き出しのアニメーションで表示するjQueryのプラグインを紹介します。アニメーションで表示するツールチップですが、アイデアが面白いですね。デモは英語ですが、日本語のメッセージを表示することもできます。 thoughtBubbleの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../src/jquery.thoughtBubble.css"> </head> <body> ... コンテンツ ... <script src="http://ajax.google apis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scrip

z1a2nh 2014/08/05

夢見心地

JS

リンク

はてなブックマーク

タグ

関連タグで絞り込む (2)

JSに関するz1a2nhのブックマーク (107)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス