https://blog.mismithportfolio.com/web/20150617lazy-line-painter
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
マウスの動きに追従してぐにょぐにょするjQueryプラグイン「jquery.morphing.js」
Posted: 2014.07.11 / Category: javascript / Tag: jQuery 「jquery.morphing.js」は画像などを丸くしてマウスポインターの動きに追従してぐにょぐにょ（？）することができるjQueryプラグインです。 使い方 リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。 html <div class="js-morphing"> <img src="img/01.jpg" alt=""> </div> JavaScript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jquery.morphing.js"></script
jQueryアニメーションにイージング（easing）処理をつけるプラグイン【イージング動作サンプル一覧】｜BLACKFLAG
jQueryで要素にアニメーション動作をつけた際、単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト、イージング（easing）処理をつけることが出来ます。 jQueryのノーマル状態では、イージング処理は「linear」と「swing」の２つが用意されていますが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになります。 そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを２つ、イージング動作サンプルと併せて紹介してみます。 jQuery Easing Plugin［jquery.easing.js］ jQuery Easing Plugin［jquery.easing.js］ jQuery Easing – jQuery 日本語リファレンス もはやjQueryのイージング処理では定番のプラグイン。 プラ
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
HugeDomains.com
Captcha security check suzken.com is for sale Please prove you're not a robot View Price Processing
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sample | Webデザインレシピ
[JS]GIF以外の画像でもアニメーションさせることができるスクリプト -Canimate