わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。 Blendy Blendy -GitHub Blendyとは Blendyのデモ Blendyの使い方 Blendyとは Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Fetch APIでファイルを読み込む ‐ JavaScript ‐ GRAYCODE
Fetch APIでファイルを読み込む 最終更新日：2023-12-24 公開日：2021-02-10 Fetch APIを使って指定したURLからテキストファイルや画像ファイルなどを読み込む方法について解説します。 この記事のポイント 読み込むデータのファイル形式によって、Responseオブジェクトからファイルを取得するメソッドを切り替える 画像、音声、動画のようなリソースファイルを読み込むときはURL.createObjectURLメソッドを使ってページに挿入すると表示できる Fetch APIのAjaxでファイルを読み込む Fetch APIはサーバーにリクエスト（要求）を送信することで各種ファイルを読み込むことができます。 ファイルはどの形式でも読み込むことができますが、取得するファイル形式ごとにレスポンスデータの処理が必要になります。 以降では、以下の形式の各種ファイルをFet
【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します - 株式会社PENGIN
2024.01.05 2024.07.15 Webデザイン 【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ！ また、jQueryで
レンジスライダーをカスタマイズするなら「noUiSlider」がおすすめ
デフォルトの表示確認 「noUiSlider」のレンジスライダーではなく、まずはデフォルトの見た目・使用感を先に確かめてみましょう。 デフォルトのものはシンプルな見た目ですが、レンジスライダーではこちらをもっと見栄えよくすることができます。 デモ どのような見た目・使用感かは下記のデモをご確認ください。 まず簡単に実装するならばこのような見た目です。これだけでは値が何なのかもわからないため、ここからオプションを利用するなどのカスタマイズが必要です。 どんな見た目・機能があるか確認したい方は公式サイトのデモをご確認ください。 公式サイトではjsとcssの記述も用意されているので今すぐにでも同じ見た目で再現することができます。 ダウンロード方法 「noUiSlider」の公式サイトからご自身に合った方法でダウンロードしてください。 https://refreshless.com/nouisli
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
<input type="file" name="example" accept="image/jpeg, image/png">
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
Unovis
import React, { useCallback } from 'react' import { VisXYContainer, VisAxis, VisArea, VisXYLabels } from '@unovis/react' import { data, formats, DataRecord, getLabels } from './data' export default function StackedArea (): JSX.Element { const labels = getLabels(data) return ( <> <VisXYContainer data={data} height={'50vh'}> <VisArea x={useCallback((d: DataRecord) => d.year, [])} y={formats.map(g =>
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
Home | Leafjs
Instantly build future-ready websites with ease. Based on Web-Components, Leafjs provides a simple API for building websites, component libraries and so much more. Get Started → SimpleLeafjs was built with ease of use in mind. By using awesome solutions such as Vue-like reactivity and JSX, Leaf combines the best parts of the best frameworks. Thanks to web-components, Leaf made components a lot sim
FileReader.readAsDataURL() - Web API | MDN
readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。
Vite + Tailwind CSSでペライチHTMLをマークアップする
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ - 株式会社PENGIN
https://www.visactor.io/vchart
Astro
haunebu-web