[B! javascript][jquery] araproのブックマーク

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！こんにちは！エイチーム引越し侍の加藤です！みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が

arapro 2017/03/30

リンク

手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー

2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。しかし、ユー

arapro 2016/07/13

リンク

【jQuery】超万能スライダー FlexSlider の使い方をマスターする。 - ONZE

今日紹介するのは jQuery プラグインの［FlexSlider］です。これ、かなり便利です。レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。まずはサンプルをご覧ください。【FlexSlider】→サンプルデモ高機能ですが、その導入方法は比較的簡単です。［FlexSlider］の導入方法まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>

arapro 2015/06/15

リンク

[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.google apis.com/ajax/libs/jquery/1.11.0/j

arapro 2015/05/14

リンク

jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー

photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早いアイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。使い分ける対応していないIE8以下には古いjqueryを読み込ませます   <script src="jquery-2.0.0.js"></script> <script s

arapro 2014/07/17

リンク

jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」

jQuery 公式 Blog は、「Don't Use jquery-latest.js」と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された「Don't Use jquery-latest.js （jquery-latest.js を使うな）」と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境（公開している Web サイト）で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ

arapro 2014/07/05

リンク

はてなブックマーク

タグ

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

javascriptとjqueryに関するaraproのブックマーク (6)

お知らせ

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

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

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス