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を使用しており、
Leafletで地図に画像を重ねる
重ねて表示 表示結果 コード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Leafletで地図に画像を重ねる|U-知能デバイス研究所</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> function init() { // 画像の設定 var image_url = "img/i083.jpg"; var bounds = L.latLngBounds( [36.980, 136.59], [36.645, 137.31],
ウェブサイトの背景となるアニメーションのコードを取得可能な「Vanta.js」
ウェブサイトの背景として使える編集可能なアニメーションをJavaScriptコードとして入手できるサイトが「Vanta.js」です。 Vanta.js - Animated 3D Backgrounds For Your Website https://www.vantajs.com/ Vanta.jsにアクセスすると以下の画面が表示されます。 「Vanta.js」という文字の背景に流れているアニメーションのコードが、画面右下の赤枠部分に表示されています。コードはそのままコピーが可能です。 右側のツールバーで、アニメーションの背景色やオブジェクトの動きなどが編集可能。編集に伴ってコードも変化します。 アニメーションのエフェクトは合計13種類から選択が可能。エフェクトを組み合わせることはできません。 エフェクトを変更している様子は以下の動画でも確認できます。 ウェブサイトの背景となるアニメー
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload
デスクトップからの画像ファイルはもちろん、PCのカメラで今撮影した写真のアップロード、写真サイトからのアップロード、Twitter、Instagramからのアップロードにも対応したJavaScriptの画像アップローダーを紹介します。 Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます。 Uppload Uppload -GitHub Upploadの特徴 Upploadのデモ Upploadの使い方 Upploadの特徴 Upploadはカスタマイズにも対応した、JavaScriptの画像アップローダーです。 写真画像をドラッグアンドドロップでアップロード。 PCのカメラで撮影した写真画像をアップロード。 写真画像をサイト（Unsplash、Pexels、Pyramidなど）から検索してアップロード。 写真画像をWebサービス（Twitte
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
これでもう、グラデーションにできてしまう濃淡の縞に困らない！バンディングをおさえるJavaScriptライブラリ
制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。 Webページの背景などに使用するグラデーションにできてしまうバンディングをおさえ、滑らかに表示するためのJavaScriptライブラリを紹介します。 js-noisy-gradient 写真やイラストなど画像のグラデーションで発生するバンディングをおさえたい場合は、以前の記事をご覧ください。 画像にできる濃淡の縞「バンディング」をおさえる方法 グラデーションのバンディングとは バンディングの解決方法 js-noisy-gradientの使い方 グラデーションのバンディングとは Webページの背景にグラデーションを使用した場合、バンディングと呼ばれる濃淡の縞ができてしまうことがあります。 例えば、#112233から#223344の線形グラデ
すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js
WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。
StatiCrypt: Password protect static HTML
Password protect a static HTML page StatiCrypt uses AES-256 with WebCrypto to encrypt your html string with your long password, in your browser (client side). Download your encrypted string in a HTML page with a password prompt you can upload anywhere (see example). The tool is also available as a CLI on NPM and is open source on GitHub. ► HOW IT WORKS Disclaimer if you are an at-risk activist, or
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
SyntaxHighlighter を使ってみる（使い方編） - とにかくやってみるブログ - Ingwer Design
「SyntaxHighlighter を使ってみる（導入編）」に引き続き、今回はソースコードを記述する際の様々な使い方を試してみます。 まずは標準の記述法で書いたときの表示です。 <h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p> ソースコードのコピー 最初の行番号を変える 特定の行をハイライトする 他言語のソースコードとHTMLを同時に色分けする 行番号を表示させない ソースをコードを隠す ソースコードにタイトルをつける IE8でHTMLの要素が大文字になってしまうのを直す デザインテーマを変える 奇数行と偶数行で色分けする ソースコードのコピー 3系になってからFlashを使ったクリップボードへのコピーがなくなり、ソースコードをダブルク
SyntaxHighlighter を使ってみる（導入編） - とにかくやってみるブログ - Ingwer Design
「とにかくなんでもやってみる」の最初の記事は「SyntaxHighlighterを使ってみる（導入編）」です。 SyntaxHighlighterは行番号のついたソースコードを表示してくれるJavascriptライブラリで、言語ごとに見やすく色分け表示してくれる便利なライブラリです。 どんなことができるか ファイルのダウンロード ファイルをサーバに設置 SyntaxHighlighterのライブラリを読み込む ソースコードを記述する どんなことができるか まずはどんな風に表示されるのか見てみましょう。 最初に<pre>タグを使って通常のHTMLソースコード表示<h4 class="id_title4">使用用途</h4> <p> 移動先のページやページ内の特定の場所を指定する<br /> HTMLだけでなく、画像や音声にリンクを指定することもできる </p> 次はSyntaxHighlig
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
ソースコードをハイライトして見やすく表示するには、Highlight.jsが、軽量でバグもなく、お勧めです。
ソースコードの装飾表示方法 SyntaxHighlighter
HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。 NetyaSun ソースコード表示 ホームページ 作成、運営、管理ガイド 行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア SyntaxHighlighter SyntaxHighlighter:Download ソース上にオンマウスで の操作タブがソースの右上に表示されるようになった。 ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。 <?xml ve
[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス
クロスプラットフォームの2D物理エンジン「Box2D」をベースに、読みやすくメンテナンス可能なJavaScriptコードとして開発されたJavaScriptのライブラリを紹介します。 Webおよびモバイルプラットフォーム用のライブラリとして、最適化されています。
![[JS]スマホも対応、HTML5を使ったゲームを作成できる2DのJavaScript物理エンジン -Planck.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/5048cf2d6b1658eccbc6b2d4a3dab3912c66a0c7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017041001.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer![[JS]数字をくるくる回転させて、指定した数字を表示させるスクリプト -odometer](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc266a2f02a78ebe1fe74fe1e4cfbafc485cc95d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018062504.gif)
Search javascript libraries
Build a Music Visualizer with the Web Audio API