"JavaScript"の記事一覧
-
ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた
2018/06/22よくある画像スライダーですが、先日、ズームインしながらフェードで切り変わるという少し特殊なスライダーを実装する必要があったのでその時の備忘録として。 スライダー系のプラグインは様々ありますが、プラグインを使用して実現する方法がパッと浮かばなかったので、1から自分でスクリプトを組みました。 と言いっても、スクリプトの処理自体はタイミングを合わせてクラスを付 ... 続きを見る
-
【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード
2018/06/22今回は「ページ内リンクのスムーススクロール」をjQueryに頼らず実装してみました。 スクロールアニメーションはjQueryなしでは難しいとされている処理の一つですが、特に問題なく動作するようなコードが完成したので、メモに残しておきます。 ... 続きを見る
-
【脱jQuery!】jQueryなしで「ページトップへ戻るボタン」を実装する
2018/06/20目指せ脱jQuery！ということで、jQueryなしで「ページトップへ戻るボタン」を実装するコードを2種類ほどメモしておこうと思います。 処理の流れとしては、 クリックイベントに処理を登録 スクロール値を"ちょっとずつ"0に近づける処理をスクロール値が0になるまで繰り返す "ちょっとずつ"の部分を工夫するとeaseアニメーションっぽくする ... 続きを見る
-
Vue.jsでLazyload（画像遅延読み込み）させるなら「lazysizes」でよさそう！
2018/06/18jQueryからの乗り換えでVue.jsを使用する場合、Lazyload（画像遅延読み込み）はどうすればいいのか？ 実際にコードを動かして調べてみたところ、jQuery不要の最強プラグイン「lazysizes」なら問題なく動作してくれました。 以下のCodePenで実際に動作を確認してみてください。（lazysizesの読み込みはCodePenの設定にて ... 続きを見る
-
lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法
2018/04/09「Luminous」という、クリックすると画像を拡大してくれる超軽量の素晴らしいスクリプトを発見したので、使い方をメモっておこうと思います。 この類のスクリプトでは lightbox がかなり有名で、私もよく使わせてもらっているのですが、画像をクリックしてから拡大表示されるまでの待機時間が地味に長い。 そこでなんか軽量のやつないかなーと思って検索してみる ... 続きを見る
-
JavaScriptを理解する - レキシカルスコープとクロージャ
2017/10/22「JavaScriptを理解する」第3回です。今回は「クロージャ」というものをメインに勉強してきました。 また、クロージャを理解するためには、JavaScriptで採用されているスコープについても詳しく知っておく必要がありそうだったので、そちらも併せて勉強しました。 まずはスコープについて触れてから、クロージャについて学んだことをまとめていこうと思います ... 続きを見る
-
JavaScriptを理解する – 関数
2017/09/30「JavaScriptを理解する」第二回です。今回は、関数についてもう一度基礎から学び直してみました。 基本的に、こちら( 関数 - Javascript|MDN ) の情報をもとに、基礎知識を整理していこうと思います。 ちなみに、第一回目の記事では変数を学び直しております。 [in_link 786] ... 続きを見る
-
JavaScriptを理解する - 変数宣言
2017/09/20WEBを勉強し始めて早くも1年が経ちました。 一年間WEBサイトの制作に関わってきて、JavaScriptもだいたいわかったつもりでいたのですが、どうやら基本すら全くわかっていないのではないか？と思い、基礎を一から学んでみることに。 第一回目は変数宣言について勉強したことについてのメモです。 ... 続きを見る
-
jQueryのclickイベントが動作しない？Ajaxなどで遅延読み込みした要素へのイベント登録方法を確認しよう。
2017/08/16クリックイベントが動作しない！という場合、まずはクリックする対象がAjaxなどで遅延読み込みされている要素かどうか確認しましょう。 そのような場合は、記述方法に注意が必要です。 ... 続きを見る
-
スマホ・タブレット( iPhone/iPad/Android ) でスクリーンの縦・横判定方法と画面回転時の発動イベントのまとめ。およびそれらの組み合わせによる不具合・最適解の考察
2017/08/15スマホやタブレットでスクリーンの縦横の向きを判定する方法と、画面回転時にどんなイベントが発火するのかを整理していき、どの方法で向きを判定してどのイベントにその判定処理を登録すればよいのか、その組み合わせを考察していこうと思います。 ちゃんと調べてみて初めて分かったのですが、iOSとAndroidで挙動が違ったり、それぞれのバージョンやブラウザでも色々異なる ... 続きを見る
-
[bxsliderあるある] 最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！
2017/08/12スライダーを実装中するならとても便利なbxsliderですが、使用しているとこんな現象に遭遇しませんか？ 最後のスライダーがなぜか先頭にセットされてしまう。 特に、初心者の頃はこの現象がよく起こります。この現象が起こるとき、定番の解決方法というものがあるのですが、それでは対処しきれないケースも出てきます。 そうなるともう焦ってしまって大変。 というこ ... 続きを見る
-
lazysizesの実行タイミングをwindowのloadイベント時に移し、ページ読み込み時に動作させる方法
2017/08/05「背景画像も遅延読み込みが可能な万能Lazyloder」として以前別の記事で使い方を紹介した「lazysizes」の、実行タイミングを変更する方法です。 先日、ファッションECサイトを制作している時にWodpessのWP_Queryなどでループをたくさん回すと、ループ内の画像が一部のみ表示がされないという不具合が起きました。 原因はよくわかりませんが、l ... 続きを見る
-
jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや？コードの意味を読み解いてみた
2017/07/29CDN側のサーバーがダウンしてしまった時のリスクに備える「フォールバック」というテクニック、皆さんご存知でしょうか。 「<script>window.jQuery || document.write(...)</script>」ってやつです。 私もつい先日知りまして、さっそく「フォールバック」の記述を加えてみました。 例：jQu ... 続きを見る
-
スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ
2017/07/24JavaScriptでスクリーン ・ウインドウ・画面サイズなどを取得しようとすると、 screen.widthや window.innerWidthなど、候補がいくつか出てきませんか？ どれを使用するかでどこのサイズを取得するかが変わったり、デバイスによって結果が変わったりしてややこしいので、少し整理してみようかと思います。 * 以下、Mac,Win,i ... 続きを見る
-
サブウインドウを開いて小窓表示させる時に心がけたい細かな工夫。「新しいタブで開く」に対応させる方法
2017/06/20クリックでサブウインドウ（小窓）を表示させるスクリプトはそんない難しくないので、コピペで済ましがち。しかし、少しの工夫で、よりユーザにとって親切な実装ができることを知ったので、知識として忘れないようにメモ。 ... 続きを見る
-
JavaScriptで、1500 → 1,500のように数字の3桁ごとに「, (カンマ)」 をつけるスクリプト。値段表示などに便利
2017/06/19数字を入力したとき、自動で3桁ごとにカンマ「 , 」を挿入してくれるスクリプト。1500円 → 1,500円みたいな感じです。 var price = 1500; //何かしらの数値が変数に入っているとします price = price + ""; //文字列に変換しておく price = price.replace(/(\d)(?=(\d\d\d ... 続きを見る
-
背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方
2017/05/25画像の遅延読み込みをしたいとき、何を使用しますか？ 私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。 個人的に、画像をimgタグではなくbackgroundに指定するのが好きなのですが、lazysizesだと背景画像も簡単に遅延読み込み可能ということで愛用するようになりました。 また、jQueryなどのフレームワ ... 続きを見る
-
[href^=#]とはなんぞや。ページ内リンクをスムーススクロールさせる時に記述しているあれ
2017/05/16ページ内部でのリンク（目次など）を押した時に、スクロールアニメーションでリンク先まで移動するスクリプトありますよね。 ソースコードをググるとコピペで使えるコードがたくさん出てきますが、その記述の中に、 a[href^=#]だとかa[href^="#"]とあります。 これなんだろう。 href属性が#から始まるものを探すためのものってのは説明してくれるん ... 続きを見る
-
$(window).on ('load')関数が動作しない時はjQueryのバージョンをチェック！
2017/05/12先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。 どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。コンソールを見てもエラーログは出ていない。これまで通り記述しているのにconsole.log()さえ動かない…。 という内容でした。 ... 続きを見る
中の人です。WEB制作や映像制作をやっています。趣味はダンスとダブルダッチ。
Twitter : @ddryo_wemo
人気のメモ
Top