jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js – A Truly Lightweight
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
![[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7b12bef628f068421e02247872e8a530b7b5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015091000.png)
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
ユーザーに届かない登録確認メールを半減させるプラグイン「mailcheck.js」
By Helga Weber ユーザー登録やアカウント作成を行ったあと、登録したメールアドレス宛に仮登録メールや最終確認メールが届く流れになっているシステムはあちこちにありますが、登録時にメールアドレスを間違えてしまうとこのメールが届かず、「もう面倒だからいいや……」と諦めてしまう人が出てしまいます。サービス提供者にとって大きな痛手であるこの「確認メール不達」という事態を減らすため作られたJavaScriptライブラリとjQuery用プラグインが「mailcheck.js」です。 Kicksend/mailcheck · GitHub https://github.com/Kicksend/mailcheck How we decreased sign up confirmation email bounces by 50% - The Kicksend Blog http://blog.
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
フリック動作でページ遷移させる | nagachan.net
スマートフォン等で、左右フリックでページ移動させてみました。 フリックのイベントが取得できれば、簡単です。 [デモページ] ※スマートフォンでご覧ください。下のQRコードからも移動できます。 フリックと言っても「フリックした」というイベントはなく、 画面をタッチした タッチしたまま指を動かした 画面から指を離した という3つのイベントにわかれていて、それぞれのイベント発生時に処理を行うようにします。 動作の概要 画面を左右にフリックして、次のページが存在していたら移動します。 フリック時にコンテンツも指に追随してスライドし、一定の移動距離以下であれば元の位置に戻ります。 JavaScriptファイルは共通化したいので、HTMLファイルに移動先のURLが入った変数を用意しました。変数が存在していれば、フリックの反応とページ遷移を行います。 JavaScript ※jQueryを
一定時間でローテーションする広告(JavaScript/jQuery)/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト
[JavaScript][jQuery] 右から左にスルスルっとスクロールしながら入れ替わっていく広告です。 →サンプル ソースコード <div id="cm1" style="display:block;border:1px solid #cccccc;padding:5px 10px 5px 10px;position:absolute;overflow:hidden;white-space:nowrap;left:0px;width:300px;left:0px;"> <p>一番目の広告です。<br> 5秒で次の広告を表示します。</p> </div> <div id="cm2" style="display:none;border:1px solid #cc0000;padding:5px 10px 5px 10px;position:absolute;overflow:hidde
スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar
題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか？え、無いの・・じゃあいらないかｎ Sampleまぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかｓ、あ、どうでもいいですよね。 IE6/7 IEでも
jQueryのanimateで自由にアニメーションできるようになろう
Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
Coda-Slider 1.1#5
3 Considerations For Your Website Slider + where to find the original Coda-Slider plugin Niall DohertyFounder and lead editor at eBiz Facts Welcome to my concise website slider guide. If you want to know: The pros and cons of using a slider on your website If your website already has built-in slider capability How to “roll your own” slider What happened to the original jQuery Coda Slider plugin Th
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
漢は黙ってjQuery
http://indigonote.com/2011/09/14/original-like-button/