レンダリングを妨げるJavaScriptとCSSを削除するためにやったこと - Qiita
概要 「ページの表示速度をあげるため、JavaScriptやCSSファイルがレンダリングを妨害しないようにする」 という目的にたいして調べたことをまとめる。 分析ツール ページ表示速度を測定するために Lighthouse を利用しており、 分析結果の Eliminate render-blocking resources を減らすことがゴール。 Lighthouseは、Chrome検証モードのAuditsタブからも利用できる。 PageSpeed Insights（PSI）はlocalやstaging環境では利用できないが、 PSIの分析エンジンとして Lighthouse を使用しているため、Lighthouse を利用すると参考にしやすいかも。 (Lighthouse と PSI は、以前は異なる仕組みでパフォーマンスを測定していたため、チェックする指標は同一ではなく、同じ指標だった
イメージマップを使ってレスポンシブな画像内の好きな箇所にだけ、属性やクラスを与えたりする - Qiita
画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。また、イメージマップをレスポンシブな画像に対応させていきます。 例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。 恥ずかしながらイメージマップなるものを知らかなかった私は最初、divタグやCSSのposition: absoluteを使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。 調べたところイメージマップなるものがあると知り、利用してみたところ簡単だったので、備忘録もかねてQiitaに初投稿してみます。 イメージマップとは？ １つの画像の中に複数の領域を作って、一般的にはその領域にリンク先を指定し、クリックすればリンク先に飛べるようにするものです。リンクの
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる – ノーズブログ
HTML・CSS 基本のHTMLとCSSを用意 まず適当なHTMLとCSSを用意します。 <body> <header> <h1>ヘッダー</h1> </header> <section> <div>要素1</div> <div>要素2</div> <div>要素3</div> <div>要素4</div> <div>要素5</div> <div>要素6</div> <div>要素7</div> <div>要素8</div> </section> <section> <div>要素9</div> <div>要素10</div> <div>要素11</div> <div>要素12</div> <div>要素13</div> <div>要素14</div> <div>要素15</div> <div>要素16</div> </section> </body> body { margin: 0;
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
JSスライドショーの画像が一瞬縦に並んで表示される問題 - aNote
この件、たまに相談受けます。具体的にどんな現象かというと、スライダーの画像が例えば3枚あったとしたら、まずその3枚全部が上から順番に縦に表示されて、 ■画像全てが縦に並んで表示される しばらく時間が経つと正常にスライドが始まる〜という感じです。 ■スライドされてる こうなってしまう原因はほとんどの人の想像通り「読み込み」の問題です。 スライドの画像部分のHTMLは大体以下の感じです。 [crayon] [/crayon] このソースコードは特別CSSでレイアウトを指定していない限りは縦にずらっと並んで表示されます。 HTML/CSSが読み込まれて画像が縦にずらっと表示されるJavaScriptが読み込まれて制御されたCSSが反映されるJavaSciprtで意図されたCSSに応じたレイアウトが表示される (3)に至るまでの間、つまりJavaScriptが読み込まれるまでの間は環境による時間の
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
jQueryプラグイン「bxslider」を利用してサムネイル付スライダーをつくる | 電脳備忘録
サムネイル付のスライダーを実装してほしいと頼まれ、いつも通り解決方法をGoogle先生に尋ねたのですが、最終的に「bxslider」というプラグインで実装することができたので、備忘録として残しておこうと思います。 必要なライブラリを読み込みます。 <head> <!-- 省略 --> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.bxslider.min.js"></script> <script src="js/jquery.bxslider.ini.js"></script> <!-- 省略 --> </head> 設定をjquery.bxslider.ini.jsに書いて外部ファイル化しています。 $(function(){ // assign the slider to a variab
高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと（@seito_horiguchi）です。 僕のモットーは「ラクして作る」で、日々怠けながらコーディングをしています。その際に役立つのが、便利なライブラリやらプラグイン。おかげで毎日2〜3時間ほど昼寝に費やすことができています。 さて、今回は実際に僕が使ったことのあるJavaScriptのスライダープラグインで、特に人気の4つを勝手にレビューしてみます。導入を検討されている方は参考にしてみてください。
ｶﾀｶﾀｶﾀｯﾀｰﾝを可視化した - Qiita
何を言っているのか 製作時間 30分ぐらい 内容 input要素のtypeがtextまたはsearchの要素、もしくはテキストエリア内におけるキャレットの位置を画面内の絶対値として取得し、その周辺に打鍵と同時に画像を散らかしています。 キャレット位置の取得方法 これの実現については今回は自前実装ではなく caretposition.jsという素晴らしいライブラリがあったので、使わせていただいてます。 http://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/ 実装 'use strict'; document.onkeydown = function (e) { var current = document.activeElement; if (e.key === 'Backspace')
jQuery から Vue.js へのステップアップ - Qiita
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
Magnific Popup レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグイン
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
Magnific Popup: Responsive jQuery Lightbox Plugin
Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js). Important note: This jQuery plugin is deprecated, only critical or security bug fixes will be released in future. Use native <dialog> element if you need a basic dialog/modal/popup, or my PhotoSwipe library if you need an advanced image
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What is the (function() { } )() construct in JavaScript?
jQuery Content Slider | Responsive jQuery Slider | bxSlider
[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster![[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster](https://cdn-ak-scissors.b.st-hatena.com/image/square/17e1a288172e3bbd2f08f4fe530b95a86e66a99f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011505.gif)
