ApexCharts.js - Open Source JavaScript Charts for your websiteWe have changed our licensing terms. Please visit this blog post to view details. ×
JavaScript：配列内の要素をシャッフル（ランダムソート）する方法 - NxWorld
JavaScriptで配列内の要素をシャッフル（ランダムソート）する方法で、理論上は偏りなくシャッフルできるアルゴリズムとして有名なFisher–Yates shuffleを用いたものになります。 「Fisher–Yates shuffle」については割愛するので、詳しく知りたい方は「フィッシャー–イェーツのシャッフル - Wikipedia」を参照してください。 const shuffle = ([...array]) => { for (let i = array.length - 1; i >= 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } ざっくりになりますが動きとしては、まず配列内の末尾要
JavaScript：filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法 - NxWorld
JavaScriptで配列内の重複要素を削除・取得、配列内の重複していない要素を取得、2つの配列から共通要素・共通していない要素を取得する方法です。 中には別の方法を用いることでもっと短いコードで実装できるのもありますが、ここではいずれもfilter()メソッドを使った場合になります。 const removeDuplicateValues = ([...array]) => { return array.filter((value, index, self) => self.indexOf(value) === index); } const array01 = [0, 2, 0, 7, 3, 0, 5, 2, 1, 5], array02 = [5, 7, 4, 1, 2, 6, 4, 4, 1, 1]; console.log(removeDuplicateValues(array0
JavaScript：作成・取得・追加・削除・各要素への処理など、配列に関する基本操作のまとめ - NxWorld
JavaScriptで複数のデータを取り扱いたいときに使う配列には多くのメソッドが用意されており、それらを単独または複数組み合わせて使用することで配列に様々な処理・操作を行うことができます。 ただ、JavaScriptを勉強し始めたとかこれから配列について勉強するという場合に、とりあえず漠然とメソッドを覚えてと言われても抵抗がある人もいると思うので、どんな処理ができるかやどんなメソッドがあるのかが少しでもわかりやすいように、**「この処理をしたいときにこのメソッドを使う」**のような形で基本操作としてよく使われるものをまとめて紹介します。 ここで紹介している方法の一部は「この処理を行うなら絶対にこれを使う」ということではなく、あくまで「この処理を行う方法のひとつとしてこれを使う」というものになります。 紹介している内容の一部はブラウザによって非対応のものもあります。 自身の環境で動作確認を
Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」 - かちびと.net
pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスクリプトです。非依存型 単体で動作します。 上デモ右端にあるやつです。Atomなど、テキストエディタにもよくあるミニマップをWebぺージで自動生成してくれます。 ミニマップはマウスドラッグでページ内をスクロール可能で、ぱっと見でもどんなコンテンツがあるかもある程度分かるようになっています。 <canvas id='map'></canvas> canvasを用意します #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } 生成されるマップを固定します <script src="pagemap.js"></script> <script> pagemap(document.querySelec
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック
ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール
フェッチ API の使用 - Web API | MDN
フェッチ API は、HTTP リクエストを行い、レスポンスを処理するための JavaScript インターフェイスを提供します。 フェッチは XMLHttpRequest の現代の置き換えです。コールバックを使用する XMLHttpRequest とは異なり、フェッチはプロミスベースで、サービスワーカーやオリジン間リソース共有 (CORS) のような現代のウェブの機能と統合されています。 フェッチ API では、fetch() を呼び出してリクエストを行います。これは ウィンドウとワーカーの両方のコンテキストでグローバル関数として利用できます。このコンテキストには Request オブジェクトか、フェッチする URL を格納した文字列、およびリクエストを構成するためのオプション引数を渡します。 fetch() 関数は Promise を返します。このプロミスはサーバーのレスポンスを表す
今更ながら、スクロール連動でフェードインさせてみる | バシャログ。
Oculus Questを購入し、24日の到着を待ちわびている kouraku です。おはこんばんちわ。 さてさて今回は、スクロール連動で要素を下から上にふわっとフェードインさせる機能を作ってみたいと思います。 まずはポイントを確認 スクロール連動で押さえておくポイントは以下３点です。 スクロール値 → $(window).scrollTop 連動対象となる要素の位置 → $('要素').offset().top 画面の高さ → $(window).height() あとは、画面のどのくらいの位置に入ったらフェードインさせるかも考えておくと良いと思います。 これらのポイントを踏まえて、 $(window).on('scroll') のタイミングで、 スクロール値と要素の位置を比較し、 一定の条件に適合した場合クラスを付与する といった一連の処理をつくることができれば完成しそうですね。 では
商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View
商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。 操作はかなり快適で、単体で動作するスクリプトです。 JS Cloudimage 360 View JS Cloudimage 360 View -GitHub JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewのデモ JS Cloudimage 360 Viewの使い方 JS Cloudimage 360 Viewの特徴 JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。 サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。 商品はユーザーが360度回転させることができ、拡大に
Slip.js — sortable and swipeable views
Swiping and reordering lists of elements on touch screens, no fuss. A tiny library by Kornel. Swipe, hold & reorder or instantly or either or none of them. Can play nicely with: interaction inline CSS transforms stylesheet transforms and selectable text, even though animating elements with selected text is a bit weird. iOS Safari Mobile Chrome Android Firefox Opera Presto and Blink No dependencies
iro.js
Work with colors in hex, RGB, HSV and HSL formats (plus kelvin temperatures!) in one simple, frictionless API. // Get the color as an RGB string var rgb = colorPicker.color.rgbString; // rgb = "" // Get the color as a HSV object var hsv = colorPicker.color.hsv; // hsv = { h: 0, s: 0, v: 0 } // Set the color from a hex string colorPicker.color.hexString = "#fff"; // Set the color from a temperature
「AR.js」でオリジナルのマーカーを設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、AR.jsに関するあれこれを記事にしていました。これを誰かへのプレゼントにうまく使えないかなあといろいろ調べていたのですが、その中でオリジナルのマーカー設定ができたら素敵だなと思ったので、今回はその方法をまとめてみました。 オリジナルのマーカーの作成 作成自体は非常に簡単。ジェネレーターサイトが用意されています。 AR.js Marker Training このサイトを使って、「AR.js」で認識するためのの『マーカー画像』と『.patt』ファイルを生成します。その『.patt』ファイルをWebサーバーにアップロードし、ソースコードを読み込むように埋め込んでいくという手順です。 まずは、ファイルをジェネレーターで用意します。 アクセスするとこのようなサイトが表示されます。 その中の、左上の『UPLOAD』のボタンをクリックするとファイルを選択できます。好きな画像をアップロードしてみま
便利なのが登場！スマホにもスクロール時に滑らかなアニメーションを適用できる超軽量スクリプト -lax.js
デスクトップでもスマホでもスクロールした際に、非常に滑らかで美しいアニメーションを簡単に実装できるシンプルで2Kbの超軽量JavaScriptを紹介します。 他のスクリプトへの依存は無く、ReactやVue.jsもサポートされています。 lax.js -GitHub lax.jsの特徴 lax.jsのデモ lax.jsの使い方 lax.jsの特徴 lax.jsはVanilla Javascriptで書かれた2Kbの超軽量スクリプトです。 スクロールをトリガーにあらゆる要素にアニメーションが適用できます。 パフォーマンス面でも施策がとられており、デスクトップでもスマホでも非常に滑らかなアニメーションが実現できます。 lax.jsのデモ デモでは実際のアニメーションを試すことができます。 デスクトップ・スマホ両方の環境でお試しください。 デモページ lax.jsではパフォーマンスを向上させるた
flatpickr
Introductionflatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment. This “lean” philosophy translates to less size and better performance, with a bonus of not having to load 8 libraries for a calendar. Dive right int
GitHub - ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker :calendar:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.
Components | CodyHouse
スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider
GitHub - flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies
