スムーズな移動！「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク | HPcode（えいちぴーこーど）
スムーズな移動！「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク 2018 7/27 1ページで完結するようなLPでよく使われるのが、ヘッダーのグローバルメニューが各見出しへのページ内リンクになっているというもの。 普通に設置してもいいのですが、グイーンと移動してくれた方が、ページ内を「移動している感じ」がしてユーザービリティがいいのではないかと思います。 そんなスムーズなページ内を移動をサポートしてくれる「smooth-scroll.js」というJavaScriptライブラリの使い方を紹介します！
【jQuery無し】素のJSでページ内リンクをスムーススクロールさせる方法 | WebDev Tech
ランディングページのナビゲーションやブログページの目次など、ページ内の特定の場所にリンクを設定することは多いですよね。 ページ内リンクは、デフォルトだとリンク先の場所まで一瞬でジャンプしてしまいますが、滑らかにスクロールさせたい場面が多いかと思います。 今回の記事ではJavaScriptを使用して、ページ内リンクをスムーズにスクロールさせる方法を紹介していきます。 ページ内リンクをクリックすると、対象位置までスムーズにスクロールするjQueryやライブラリは使用せず、素のJavaScriptで実装IE11やSafariにも対応させる
「smooth-scroll.js」を使ってページ内リンククリック時の滑らかなスクロールを実装する | 電脳情報局
オススメ！PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装：CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery：アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ（操作/設定）2020年10月29日 スクロール サイトを制作の際、ページ内リンククリック時の滑らかな画面スクロールを実装したい時 「smooth-scroll.js」を使用すると初心者の方でも簡単に設定できるのでおすすめです。 特にposition:fixedで上部に固定されたメニューがある場合
JavaScriptで要素を検索せずに取得する方法があります。（JavaScriptおれおれAdvent Calendar 2013 – 03日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2013の3日目の記事です。 何か要素に対する処理を行う場合はdocument.querySelector()あたりで検索してくるのですが、一部の要素については事前に取得済みだったりします。 <body>を取るならdocument.bodyで document.bodyには最初から<body>要素が格納されています。個人的にはHTMLElementのインターフェイスを確認するために適当な要素を得る際にこれを使っていたりします。 同様に<head>要素もdocument.headで得る事が出来ます。この二者はHTMLの構文的にも必ず存在するため、事前に確保されているのでしょう。（ちなみにHTMLの文法的には、この二者のタグは省略可能です。その場合でも記述が省略されただけで実際はあるものとして扱われます。） <html>を取るならdo
JavaScriptでハンバーガーメニューボタン作成 - Qiita
ハンバーガーメニュー難しいですよね 今回はHTML+CSS+JavaScriptでハンバーガーメニューを実装する方法を学習したので、書き留めておきたいと思います。 ちなみに学習したのは皆さんご存じこちらのCodestepさんです。 ハンバーガーメニューの記事はたくさんあるんですが、とりあえずコピペして分かったつもりになって自分で実装しようとしたらまたコピペしてみたいになってませんか？ JavaScriptのイベントや変形の勉強もしながら一緒に学習していきましょう。 ということでコードの説明は最後に書きますので、できるだけわかりやすく紹介できればと思います。 HTMLとCSSについてはある程度学習ができている前提で説明をしていきます。 コードはいったん無視して完成物を確認してください See the Pen Untitled by soichiro-saeki (@soichiro-saek
アンカーリンクの smooth scroll の実装 - Qiita
$(function() { $('.js-scroll').on('click',(e) => { e.preventDefault(); let $target = $($(e.currentTarget).attr('href')); if ($target.length > 0) { $('html, body').animate({ scrollTop: $target.offset().top }, 500, 'swing'); } }) }) JavaScriptのみで実装（IE非対応） scrollIntoView()は、ターゲットとなる要素が見えるまで、親要素をスクロールさせるメソッド。 optionで、behavior: "smooth"を指定すると、スルスルの実装が簡単にできる。（IEは非対応。。） サンプル document.addEventListener('DO
JavaScriptの引数「e」とは？ 〜イベントオブジェクトについて。
〽️ イベントオブジェクトとは？ 〽️ 何で元から入ってる？ 〽️ 渡しているのはイベントリスナ。 JavaScript、サンプルコードの「これって何？」 2022.02.22 「解らない部分だけ」をピンポイントで解説していきます。 JavaScriptコードの「？」をまとめたページはこちら⬆︎。 オブジェクトを受け取るための引数。 こんにちは、「ふ」です。 JavaScriptコードの「これって何？」、今回はこちら⬇︎。 element.addEventListener("click",callback); function callback(「「１e」」) ｛ ｝ element.addEventListener("click",function(「「１e」」) ｛ ｝); 引数「e」、これ何? JavaScriptのイベント処理を紹介しているサンプルコードにて。 イベント発生時の呼び
ページトップへ戻るボタンの作り方【JavaScript】 | sinpe-Blog
こんにちは、フロントエンドエンジニアしんぺーです。 jQueryを使わず純粋なJavaScriptでページトップボタンを実装したいと思います。 JavaScriptの学習にもぴっかりかもしれません。 この記事を書いている僕は、独学でWeb制作を学び１年半で異業種からITベンチャーに転職しました。 日々、フロントエンドエンジニアとしてコーディングをしています。 ページトップボタンはjQueryで実装していることが多いのですが、JavaScriptだけで実装するにはどうすればいいのかな？と疑問に思い色々調べながら実装しました。 僕と同じようにJavaScriptで実装したい人や、JavaScript学習中の方にも分かりやすいように解説していきたいと思います。 完成形のイメージ See the Pen pagetop【JavaScript】 by shimpei (@shimpei) on Co
ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】｜プルデザイン-design_pull – 🅳🅴🆂🅸🅶🅽
動作参考例▪「Run Pen」をクリックで動作確認⇩ See the Pen 外部クリックで閉じる-ハンバーガーメニュー by pull-design (@design90806871) on CodePen. クラスの取り外しbodyにnav_openのクラスを付けて、ナビを表示してクラスがない場合は右側に隠している状態です。 クラスの取り外し▪body.classList.toggle(“nav_open”);でクラスが付く。 ▪body.classList.remove(“nav_open”);でクラスを外します。 JSに記述するコード⇩ function toggleNav() { const body = document.body; const hamburger = document.getElementById("js_hamburger"); const overlay
JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】 | hirakublog ヒラクブログ
デモ ボタンとボタン以外をクリックしてみてください。 HTML 以下のHTMLを例にJavaScriptを紹介します。 <button class="c-button"> click!! </button> 以下のJavaScriptをコピペで使用できます。 .c-buttonの箇所を書き換えて使用してください。 document.addEventListener('click', (e) => { if(!e.target.closest('.c-button')) { //ここに外側をクリックしたときの処理 } else { //ここに内側をクリックしたときの処理 } }) 解説 イベントオブジェクトのtargetを使用しイベントが発生した要素の親要素に.c-buttonがなければ外側と判定します。 closestメソッドを使用しているのでIEで使用するにはポリフィルを読み込んでくださ
lightGallery
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
SimpleLightbox by André Rinas
To install SimpleLightbox you can do the following: // YARN yarn add simplelightbox //Bower bower install simplelightbox //NPM npm install simplelightbox Simple include simplelight-box.css and simple-lightbox.js to your page and use: Standalone Plugin When using the standalone variant (`simple-lightbox(.min).js`) var lightbox = new SimpleLightbox('.gallery a', { /* options */ }); When using the st
GLightbox | A touchable pure Javascript lightbox
GLightbox. Code name "Gie" A touchable Pure Javascript lightbox with mobile and video support. Images with Description You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or right. You can adjust the style the way you want with basic CSS. The description can display h
Vanilla JSでアクセシビリティを考慮したハンバーガーメニューをつくる
はじめに 「Vanilla JS ハンバーガーメニュー アクセシビリティ」で Google 検索したとき、なかなか良い記事に辿り着けなかったので備忘録としてソースコードを残しておく。（※ライブラリ等は使用しません。） 最終的なソースコードはこちら。 実現したいこと ハンバーガーメニューをクリックするとナビゲーションが開き、ハンバーガーメニューの「≡」と「×」が切り替わる ナビゲーションメニューが開いている時、裏側のコンテンツはスクロールさせない esc キーでナビゲーションメニューが閉じる ※共通事項として JavaScript で制御する要素にはjs-***というクラスを指定する。 ハンバーガーメニュー（開閉ボタン） ハンバーガーメニューは<button>タグでマークアップする。 JavaScript での制御のために、class にはjs-buttonをつける。 ハンバーガーメニューの
「Luminous」の使い方解説！Lightboxをカンタン実装 （jQuery非依存） - 株式会社PENGIN
2024.01.06 2024.07.15 Webデザイン 「Luminous」の使い方解説！Lightboxをカンタン実装 （jQuery非依存） 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 こんな要望のある方に、必見の情報をご紹介します！ 動的なUIであればjQueryを使うのがカンタンですが、サイト全体のファイルサイズや保守・メンテナンスのことを考えると、脱jQueryしたいなあと思っている方も多いのではないでしょうか？ そこでオススメなのが当記事で紹介する「Luminous」。LuminousはLightboxを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【頻出Webデザイン】スクロール＋フェードインのアニメーション【scroll, getBoundingClientRect】
classList.contains()でクラス名の有無で条件分岐の判定する【JavaScript】 - ウェブつく
https://codepen.io/junpei-sugiyama/pen/xxBvoKp
CSSとJavascriptでハンバーガーメニューを実装しよう! - Global Web Design
【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ - 株式会社PENGIN
