【jQuery入門】fadeIn()でフェードイン・アウトを実現する方法！ | 侍エンジニアブログ
こんにちは、ライターのマサトです！ 今回は、HTML要素をフェードインさせながら表示することができる「fadeIn()」について学習をしていきましょう！ この記事では、 ・「fadeIn()」とは？ ・「fadeIn()」の使い方 という基本的な内容から、 ・「fadeIn()」に関数を指定する ・イベント処理を実装する方法 ・フェードイン・アウトの実現 などの応用的な使い方に関しても解説していきます。 この記事で、「fadeIn()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！ 「fadeIn()」とは？ それでは、まず最初に「fadeIn()」についての基本的な知識から身に付けていきましょう！ 「fadeIn()」は、HTML要素をゆっくり時間をかけて表示させることが可能なメソッドです。 一般的には、「ドロップダウンメニュー」「アコーディオンメニュー」などでコンテンツ
ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する - Qiita
背景 LP実装のフロントエンドを担当 Ruby on RailsのView内にてフロントエンド組み込み前提 デザインカンプにアニーメーション、インタラクションの仕様は無かったが、昨今全く動かないLPの方が少ないのではと思った デザイナーにインタラクション考えてもらうのも確認フロー大変だし、Railsにプラグイン組み込む検証リスクなど諸々あり、1回あきらめた 諦めてからが試合開始 変更に強いCSSアニメーション主軸にスクロールインタラクション作れればと思った ゴニョゴニョしたら意外と出来た 実装内容 CSSアニメーション実装 .anm_modデフォルト = 下から元来の位置に戻りつつフェードイン。速度ノーマル &.left, &.right 左右から元来の位置に戻りつつフェードイン &.delay, &.fast フェードイン速度遅め、早め 上記２点の設定で、フェードイン方向（３方向）とスピ
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><
![[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法 | UNORTHODOX WORKBOOK | Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc8c95bc6d707ff555b0dcfe047f07bb04a7b352/height=288;version=1;width=512/https%3A%2F%2Ftheorthodoxworks.com%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F01%2Fcatch-study.jpg)
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
並び替え、アニメーションも対応したグリッドライブラリ·jQuery.Shapeshift MOONGIFT
jQuery.Shapeshiftは自分でドラッグ&ドロップできるグリッドライブラリです。 最近増えたのがPinterestのように高さの異なるボックスを並べて表示するUIです。そしてさらに自分で並び替えまでできるようにしたのがjQuery.Shapeshiftです。 最初の表示です。 ドラッグして移動できます。その時、ちょっと斜めの表示になるのがいい感じです。 全てを猫に！ jQuery.Shapeshiftではオプションが色々あり、ドラッグ時のアニメーション可否やそもそもドラッグ可否も指定できます。たとえ同じコンテンツであっても見せ方を工夫することでユーザ体験は全く違ったものになります。さらにユーザ自身による並び替えがあればカスタマイズ性が大きく向上するでしょう。 jQuery.ShapeshiftはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fadeOut([speed], [callback]) - jQuery 日本語リファレンス
テキストを部分的にアニメーションしながら交換できる「jQuery Text Rotator」:phpspot開発日誌
Animate Css Jquery