フローティングバナーとは？初心者でも簡単設置！効果的な活用方法とポイントも解説ブログ HubSpot日本語ブログでは、世界中のHubSpotの知見を活かし、日本のビジネスパーソンの課題解決に繋がるような情報を提供しています。
フローティングバナーをスクロール中に非表示にする
はじめに サイトに固定ヘッダーやフッター、フローティングバナー等を設置していると、 メインコンテンツの見える範囲が狭まってしまいます（ノートPCやスマホは特に）。 その対策として、 固定要素をスクロール中は非表示に、止まったら表示されるようにします。 記述例 まずjQueryを読み込みます。
【JavaScript】「swiper.js」でスライダーを1ページ内に複数設置する方法 | 何もないけどヨロシク。
swiper.jsは、スワイプジェスチャーにも対応しカスタマイズオプションも豊富なスライダーを実装するためのJavaScriptライブラリです。ここではswiper.jsを使ったスライダーを同一ページに複数設置する方法を説明します。 The post 【JavaScript】「swiper.js」でスライダーを1ページ内に複数設置する方法 first appeared on 何もないけどヨロシク。.
【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;
SVGのマスクとアニメーションで動きのあるWEB制作【vivus.js使い方】 | 株式会社リースエンタープライズ
こんにちは、WEBデザイナーの板垣です。 最近、WEBサイトで動画やアニメーションを目にする機会が大変増えてきており、また、制作のご要望でも複雑なアニメーションが増えてきているように感じます。 以前もHTML5 Canvasを使用したアニメーションの記事をいくつか書かせていただきました。 湯気アニメーションについて本気出して考えてみた Canvasを使った動きのあるWebサイト・ホームページ制作をご希望の方へ ただ今回はCanvasではなく、『SVG』でいろいろ変わったアニメーションを作成しようと思います。 SVGについて SVG（Scalable Vector Graphics）とは、よく使われる写真などの「ラスタ形式」の画像とは違い、パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」の画像フォーマットの事です。 私自身は、よく、Adobe Illustratorでパスを
Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG
大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは？ 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面
VSCodeでJavaScript,CSSを圧縮・軽量化(Minify)する
JS & CSS Minifer をインストール VSCodeでMinifyを行う際は、「JS & CSS Minifer」というプラグインをインストールして利用します。 まず、左メニューの「Extensions」ボタンをクリックします。※Ctrl+Shift+XでもOKです。 Marketplaceの拡張機能検索フォームに「JS & CSS Minifer」と入力して検索し、リストに表示された「JS & CSS Minifer」をクリックします。 メイン画面に「JS & CSS Minifer」の詳細が表示されますので、緑色の「Install」ボタンをクリックします。 緑色の「Install」ボタンが青色の「Uninstall」に変われればインストール完了です。 Minify（圧縮）を実行 jsファイルのMinifyを実行してみます。（※test.jsというファイルでテストを行います。）
【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ | 模写修行メディア
現在、多くのwebサイトがアニメーションを取り入れています。 特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか？ 今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介します。 JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。 JavaScriptの勉強ができるおすすめの本やサイト紹介！ 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
Swiper V8の使い方「レスポンシブ等の具体例」とオプション解説 - STAND-4U
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
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
JavaScriptをローカルで実行するときにはwindow.onloadが必要 - やってみる
忘れると正常に動作しない。 開発環境 Linux Mint 17.3 MATE Firefox 42.0 d3.js v4.5.0 背景 以前、window.onloadを忘れていて2時間悩んだ。 戒めとして記事にまとめる。 戒め ローカルのブラウザで実行するときはwindow.onloadが必要である。 CodePenなどのPlaygroundsでは必要ないから忘れやすいので注意。 実行の流れ Playground 実装中HTMLの<script>タグから外部参照ライブラリを読み込む 実装中JavaScriptを読み込む ローカル 実装中HTMLの<script>タグから外部参照ライブラリを読み込む 実装中HTMLの<script>タグから今回実装するJavaScriptを読み込む 今回実装するにあるwindow.onload関数を実行する window.onloadの用途 window
簡単なスクロール出現アニメーションを数行のJsとCSSで実装する（ライブラリなし） | web(K)campus|WEBデザイナーのための技術系メモサイト
画面が表示された時にアニメーションでコンテンツが表示されるサイトがここ数年でだいぶ増えてきました。 要素を順番に表示させて目を惹かせたりすることで、サイトを閲覧する際の指標というかガイド的な役割をしています。あんまり動かしすぎると、ゴチャゴチャしますが…。 このタイプのアニメーションのほとんどは「スクロールがここまで達したらアニメーションをする」って命令で動いてます。 Javascriptのライブラリでも「wow.jsとAnimate.css」を使って、アニメーションさせているパターンもありますが、もっと簡単に数行のjQueryの記述とCSSでスクロールしたら出てくるアニメーションを実現してみようと思います。 何をしているかっていうと jQueryで指定の位置から◯◯px以上表示されたらclassを与える。 CSSのアニメーション（transition）を使って、動かす。 っていうだけの簡
レスポンシブ対応！Webサイトにグラフを表示できるJavaScriptライブラリー3つ
2017年11月16日 JavaScript グラフを必要とするWebサイトは限られるかもしれませんが、いざという時に知っておくと便利なグラフ作成用JavaScriptライブラリー。意外とレスポンシブ対応のものが少なかったので、対応しているものを集めてみました。 ↑私が10年以上利用している会計ソフト！ 1. Chart.js 公式サイト｜サンプル｜ドキュメント｜GitHub Chart.jsはグラフ作成用JavaScriptライブラリーの大御所とも呼べるのではないでしょうか？手軽にアニメーションのついた美しいグラフを表示できますよ。棒グラフ、円グラフ、折れ線グラフ、極座標グラフ、バブルチャート等、様々な種類が用意されています。もちろんレスポンシブ対応！どのグラフ描画ライブラリーにするか悩んだら、ひとまずChart.jsを試してみるといいでしょう。 Chart.jsの読み込み まずはファイ
Chart ツールは Canvas より SVG のほうがよさそう : (*x).b=z->a+y/c
◆ Canvas は更新面で不利 ◆ アニメーションとかマウスホバーの処理などで全体再描画になるので重い ◆ データ数が少ないとたいしたことないけど すごく多くのデータを扱うとかなら SVG が無難 いろいろありますが 大きな違いに描画部分を Canvas でするか SVG でするかというのがあります どっちでもいいやと思ってたのですが 使ってみると気になる違いがありました 結論を先に書くと SVG のほうが軽いです 大量のデータになると Canvas だと表示されるまでに時間がかかりますが SVG の方はそこまでかかりません SVG のほうが良さそうな理由仕組みを考えても Canvas は部分的に変更できなくて 1 から再描画する必要があるのに比べて SVG は HTML みたいな XML ベースなので部分的に変更ができるのでブラウザがいい感じに最適化してくれます 例えばマウスを乗せたと
年表や沿革など タイムラインが簡単に実装できる便利なライブラリ16選まとめ
こんにちは👩 タイ社員旅行記をブログに書き起こそうとするも内容が多すぎて挫折している社員Aです。 タイで撮った写真は全部で360枚を超えていたので、どれをセレクトするかも迷ってしまっています（笑） さて、今回は「年表や沿革などのタイムラインが簡単に実装できる便利なライブラリ」をまとめていきたいと思います。 私が最近コーディングした案件でこのタイムライン表示が必要だったので、実際に使ったものと、今後使ってみたいものをまとめました。 タイムラインコンテンツは1から作ると大変なので、ライブラリを使ってカスタマイズすると時短にもなります。 年表や沿革で使えるタイムラインコンテンツ タイムラインは年表や沿革などでよく使われているのを見かけますが、フローとしても取り入れると非常にわかりやすいです。 私がデザインした案件では、税理士事務所さんのサービスで「お問い合わせ〜起業」までのフローとしてタイムラ
Modernizr（モダナイザー）とは - Qiita
1. Modernizr（モダナイザー）とは JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。 Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScriptライブラリ。 このライブラリを使用すると、各ブラウザが特定の機能をサポートしているかどうかを判定し、その結果によって条件を分岐させることができる。 2. どうやって使うのか Modernizr（モダナイザー）のソースコードは、Modernizr公式サイトから必要な機能に絞ってダウンロードできる。 2-1. JavaScriptの場合 例えば、JavaScriptのタッチイベントが使えるか否かを知りたい場合は、公式ダウンロードページで「Touch Events」の項目にチェックを入れてファイル
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要
スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」のDEMO
var ScrollrevealFade = { origin: 'left', distance: '0px',//移動範囲 scale: 1,//拡大表示（１で横スクロールが始まる） rotate: { x: 0, y: 0, z: 0 }, //xは縦回転、yは横回転、zは傾き（風車みたいな感じ） duration: 1200, //アニメーションの速度 delay :200 //要素が表示するまでの待機時間（ディレイ） }; sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100); 上記のような形でオプションは記述していきます。scaleを0.8にすれば表示の際に拡大するように表示されたり、1.2にすれば縮小しながら表示されたりします。 rotateの数値をいじると、縦回転・横回転・傾きをしながら表示されるようになります。また、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - TakashiKakizoe1109/labelOpenClose: You can easily add jQuery based opening / closing box.
