よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。 アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。 どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです! Intersection Observer Scrolling Effects ✨ Intersection Observerやカスタムプロパティについて詳しくは、下記をご覧ください。 Intersection Observerが簡単で便利!要素がビューポートに表示されているかを判定できる Intersection Observerを使用すると実装が簡単に!Vue.jsでスクロールイベントをトリガーする方法 CSSの変数(カスタム
スライダープラグイン Swiper の使い方 jQuery 不要でレスポンシブ及びタッチデバイス(スマホやタブレット)対応のスライダープラグイン Swiper の基本的な設定方法や使い方についての解説(覚書)です。 バージョン 7 では、スライダーのメインコンテナに指定するクラスが swiper-container から swiper に変更になったため、以下はバージョン 7 に合わせて書き換えました(実質的にはメインコンテナのクラスの変更と若干のオプションの追加だけです)。 また、2022年3月時点での最新版はバージョン 8 です。バージョン 7 と 8 では Swiper Angular でのイベントの処理方法を除いて大きな変更はないようです(バージョン 7 から 8 へのアップグレード)。 このページのサンプルはバージョン 7 でもバージョン 8 でも同様に動作します(このページでは
IEの対応について Swiperバージョン5以降はIE対象外となっている(IEは正式にサポート終了勧告が出ている(マイクロソフト公式:Windows10 IE11は2022年6月15日サポート終了)ので、切捨てで良いのではないだろうか。 IE対応が必要な場合は、Swiperのバージョン4をダウンロード(Download Latest Swiper 4.5.3)して使うかCDNを利用すると良い。 Swiperバージョン4のCDNの記述例 <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css> </head> <body> 〜中略〜 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swip
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script> CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1
ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。 以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。 これといってユニークな動きでもなく基本的には同じような動きになりますが、汎用的に使えそうなもの7タイプです。 見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。 共通のHTML・CSS 以下で紹介している内容は、すべて下記のようなHTMLを使用しています。 CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。 a要素にいろいろとスタイル指定はしてありま
【最新バージョン4】Splideの使い方やオプションを解説!14個のデモ付き 更新日:2024/05/10 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか? スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。 keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。(slickとSwiperはアクセシビリティのサポートがされています。) … というような理由で、私はslick推しでした。 しかし、slickの操作感(いわゆるUX)があまり良くないと思って
よく見かけるスライダー(自動再生) See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー(自動再生) by 125naroom (@125naroom) on CodePen. HTMLとjQueryはこちら <div class="sliderArea"> <div class="regular slider"> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> <div><img src="https://125naroo
Library agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。(個人運営ブログ:https://daib-log.com/ ) コンテンツが横方向に自動で流れ続けるスライドショー、と言われてイメージ湧きますでしょうか? コンベアスライドショーともいいますが、今回はそちらをCSSのみで実装する方法をまとめました。 ECサイトなどで見かけることもありますし、iPhoneの方はApp Storeの中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。
A carousel is a UX component that displays content in slideshow-like manner. Carousels can "autoplay" or be navigated manually by users. Although carousels can be used elsewhere, they are most frequently used to display images, products, and promotions on homepages. This article discusses performance and UX best practices for carousels. Performance A well-implemented carousel, in and of itself, sh
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッシュ値があればページ内スクロール if(urlHash) { // 外部リンクからのクリック時 $('body,html').stop().scrollTop(0); // スクロールを0に戻す setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行 var target = $(urlHash);
昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。/https://t.co/EJ5swAVGAu — ヤマシタレイコ|OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対
Result ジオシティーズ時代のWebサイトの象徴のような存在だったmarqueeタグは現在は非推奨ですが、そもそも使い方の問題という印象ではあります。 そこでモダンなCSSでレスポンシブにも対応した上で再現しよう、というブログ記事が気になったので備忘録。 上記デモではmarqueeの再現ではありますが、マウスホバーで停止する事も可能です。 css .marquee { --gap: 1rem; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); } @keyframes
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS(flex等)が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
localeオプションに関しては単体だけでは使えないので、locales/ja.jsの読み込みも必要になります。 またeventsオプションは配列の他にも関数として指定したり、外部のJSONファイルをURLで指定して読み込むこともできます。 カレンダーの種類 FullCalendarのカレンダーは以下の通り16種類あります。 dayGridMonth dayGridWeek dayGridDay timeGridWeek timeGridDay listYear listMonth listWeek listDay custom(後ほど説明) 有料プラン resourceTimelineYear resourceTimelineMonth resourceTimelineWeek resourceTimelineDay resourceTimeGridWeek resourceTimeGr
クライアントからの要望で、画面の横幅いっぱいを使った画像のスライドにしてほしいと言われることが多く、いろいろと調べてみると、大まかに下記の3パターンの背景画像スライダーが存在することが分かりました。 概要とともにサンプルページも作成してますので、ご参考ください。 全画面表示 画面上部に表示:背景画像の縦横比が同じ 画面上部に表示:背景画像の高さを固定 なお、今回利用してるスライダーはjQueryプラグインのjQuery.BgSwitcherです。背景画像をスライダーを作成するなら、とても使い勝手が良いので利用させて頂きました。 1.全画面表示 表示領域に対して縦横100%で表示すると、全画面表示になる。 画像は横900px縦600pxを利用。 スライダーのサンプル1 CSS html, body { height: 100%; margin: 0 !important; padding:
セブンシックスのダイチです。画面をスクロールして可視領域に入ると、要素がフワッと出てくるやつ、ありますよね。それを、JavaScriptのIntersection Observer APIを使ってやってみよう!というのが今回のお話です。 あらすじ 私はこれまで、要素をふわっと出すやつには「Emergence.js」というライブラリを好んで使っていました。軽量かつjQuery不要のライブラリです。Emergence.jsに不便は感じていなかったのですが、心情的にスクロールイベントよりもIntersection Observer APIを使いたかったので、代替ライブラリを探すことにしました。良さそうなライブラリが見つからないまま、ヒットしたJavaScriptの解説記事ばかり読んでるうちに、自分で書いたほうが早いということに気が付きました。おい。 やりたいこと スクロールして要素が画面内に入っ
この記事では、3つのJavascript関数による高さの取得方法をまとめていきます。 とりわけ、モバイル環境における、ブラウザー(iOS Safari や Chrome)での高さの取得方法、ややトリッキーです。 詳しく見ていきます。 Javacscript でブラウザーの高さを取得 ブラウザーのウィンドウに高さをフィットさせるには、下記の2種類のアプローチがあります。 [A] Javascriptでウィンドウ高さを取得して、所望の要素を高さにぴったりフィットさせる[B] (Javascriptを使わずに)CSSでぴったりフィットさせる 今回、Javascript、もしくは、JQueryでの高さの方法を詳しく見ていきます。 ブラウザウィンドウの高さの取得 ブラウザーウィンドウの高さは、Javascript のdocumentオブジェクトのプロパティから、もしくは、jQueryを使って取得でき
今回はWordPressのREST APIでアイキャッチ画像の情報を取得します。 やり方は大きく2つ。 画像情報取得にもREST APIを使うか、前回の記事同様に記事のAPIにアイキャッチの情報を追加してしまうか、です。 両方紹介します。 APIを利用してアイキャッチを取得 実は投稿(post)のREST APIには最初からアイキャッチのデータが含まれています。 「投稿」のスキーマにある「featured_media」という項目です。 ここにはアイキャッチに設定されたメディアのIDが入っています。 REST APIを利用するフレームワーク(WordPressでないもの)側からはWordPressでのIDなんか渡されてもどうしようもないんですが、これを利用して今度は「メディア」のAPIを叩くとアイキャッチ画像の情報が取得できます。 「メディア」のAPIへアクセス REST APIのドキュメン
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one. So, here’s what we’re making today: There’s no JavaScript here, whatsoever! No jQuery plugins. No tricki
Amazonなどのように、メイン画像とサブ画像のある画像表示領域で、サブ画像をクリックするとメイン画像をふわっと変更するjQueryを書いてみました。 fadeIn処理が終わってから画像のsrc属性を書き換え、fadeIn処理をしています。 デモ 動いているサンプルはこちらからご覧できます。 DEMO <div id="mainImg"> <img src="./img-1.jpg"> </div> <ul id="subImg"> <li class="current"><img src="./img-1.jpg"></li> <li><img src="./img-2.jpg"></li> <li><img src="./img-3.jpg"></li> <li><img src="./img-4.jpg"></li> </ul> $(function(){ $('#subImg im
ExamplesSimple and advanced examples of what you can build with keen-slider. BasicExamples of the most common options.
以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({
2024.01.05 2024.07.15 Webデザイン 【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ! また、jQueryで
Googleカレンダーの埋め込みデザインをカスタマイズ by 管理人 · 公開済み 2020年3月27日 · 更新済み 2020年11月10日 Googleカレンダーをサイトに埋め込みたいけど、デザインが…。 WEBサイトにカレンダーを設置するプラグインはあまたありますが、Googleカレンダーなら元々使っていて操作に慣れているという方も多い上に、わざわざサイトにログインせずにスマホで予定の追加編集ができるのでとっても便利です。 GoogleカレンダーのページからはWEB埋め込み用のコードも取得できますよね。 ただ一つ問題を上げるとすれば、見た目のカスタマイズができないこと↓ サイト全体の統一感を意識して作っているのに、カレンダーの部分だけ「ザ・Googleカレンダー」というのはかっこ悪いですよね。 今回はGoogleAPIと、便利なjQueryプラグイン「FullCalendar」を使っ
こんにちは、Ryohei(@ityryohei)です! 本記事では、Swiperでサムネイルとメインスライドが連動するスライダーの作り方をご紹介しています。 サムネイル付きのスライダーというと、色々と種類がありますよね。サムネイル一覧が表示されているもの、サムネイルがスライダーになっているもの、サムネイルが複数行表示されていてページャーがついているものなどが主流でしょうか。それぞれ用途によって使い分けるかと思いますが、本記事でご紹介するのは下記の要件に当てはまるものになります。 上段にスライダー本体、下段にサムネイルを表示する下段のサムネイルをスライダーにするスライド遷移時にメインスライダーとサムネイルが連動する「前へ・次へ」でメインスライドに合わせてサムネイルも動く 説明だけではわかりにくい……。 なので下記に完成したデモのをご用意しました。どんなものか操作していただければと思います。サ
サイトにアクセスした最初の時点から、スクロールをするとサイズが小さくなるヘッダーってよくありますよね。最初は大きく見せたいけど、スクロールしてコンテンツを見始めたら小さくしたい、というものです。 使う機会の多い技術ですので、簡単な方法をまとめてみます。 HTML / CSS / JS で作っていきます。 仕様を決める 今回は、下記の仕様を想定して作っていきます。 ヘッダーの中にはロゴとナビゲーションの2つの要素がある。スクロール量が、ヘッダーの高さを超えると、小さくなる。スクロール量が、ヘッダーの高さを下回ると、元に戻る。 これを実現するために、ヘッダーの高さを基準に、スクロール量によって、それぞれの要素にclassを付けたり取ったりするスクリプトを書いていきます。 要素をJSで取得 JSで取得して操作したい要素は下記のものになります。 ヘッダー要素 <header id=”header”
JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQueryを使用しています。 www.it-the-best.com DEMO 1 2 3 4 5 コード function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i, e) { $(e).mousedown(function (event) { event.preventDefault(); target = $(e); // 動かす対象 $(e).data({ "down": true, "mov
こんにちは、daimaです。 本日は私も業務でよく使っている おしゃれでコンパクトな ハンバーガーメニューのサンプルコードを コピペしてすぐに使える形でご紹介したいと思います。 最終更新2021/01/30 : ・ナビ部分の開閉の仕組みを調整(画像など張り付けた時にずれて移動してしまっていたのを修正) ・ナビの中身のheightがナビのheightを超えた場合にスクロールが効くように修正 レスポンシブ対応のハンバーガーメニューをコピペで簡単に設置したい ハンバーガーボタンはスクロールしてもずっとついてきて欲しい ナビが開いているときにナビ以外の部分をクリックしたらナビを閉じてほしい ナビが出現するときは画面端からスムーズに出現してほしい 細かいデザインや動きは自分で調整したい 最新の主要ブラウザ(Chrome、EDGE(IE)、Firefox、safari)に対応していてほしい このような
初めまして、今年4月に入社したエンジニアのJackieです。 コーダーとしてはまだ未熟者ですが、よろしくお願いします。 今回弊社の運営しているサイト「チワワnowa」のトップページで表示されるスライダーを実装しました。 可愛いチワワたちの写真をゆっくりと流れ続けるスライダーで見せてます。 チワワのスライダー 失敗談 最初はプラグインで作ってみて、jsの3行くらい変えるだけですぐ作れたと思ったが、どうやら甘かった…! 確認してみたところ、なぜかウィンドウを拡大・縮小した時に、スライダーが止まったり、速度が落ちたりもしくはすごい速さで走ったり、逆流したりします…! プラグインのコード読めないし、直し方も全く分かりません。 今回は別の方法を試してみましょう! CSSだけで書いてみよう まずはHTMLとCSSを用意します。 HTML <!-- スライダー --> <div class="row">
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください!
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く