CSS変数を制御するJavaScriptスニペット - かちびと.net
Result CSS変数を更新するJSスニペットです。べんり。 ※本コードは非依存のバニラJSです let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); }); css .mover { width: 50px; height: 50px; background: red; position: absolute; left: var(--mouse-x); top: var(--mouse-y); } html <div class="mover"></div> via
Sal - Lightweight scroll animation library
Performance focused, lightweight JavaScript scroll animation library
これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
[WordPress] WordPress から JavaScript へ値を渡す方法
必要となる場面は少ないのですが、たまに WordPress から JavaScript へ値を渡したい時があるのでその方法のメモです。 WordPress から外部の JavaScript ファイルへ配列の値を渡す WordPress のオプション値など PHP の値を外部の JS ファイルに渡したい場合は、wp_localize_script() という関数が WP には用意されているのでこれを使用します。 wp_localize_script() を使用すると PHP の連想配列を JS のオブジェクトとして扱えるようにしてくれます。 wp_localize_script の使用方法 functions.php 又は プラグインファイルに以下のように記入します。 <?php wp_localize_script( $handle, $name, $data ); ?> $handle
![[WordPress] WordPress から JavaScript へ値を渡す方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/3640d73492cee231d8a08ed3aa5cf4f61f24105c/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2013%2F11%2Ficon.jpg)
Home
Custom scrollbars made simple, lightweight, easy to use and cross-browser. SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... You keep the awesomeness of native scrolling...with a custom scrollba
[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr
Webページやアプリに外部スクリプトと数行のコードだけで、使いやすいカラーピッカーを簡単に実装できる超軽量のスクリプトを紹介します。 レスポンシブに完全対応しており、デスクトップのマウス操作でもスマホのタッチ操作にも対応しています。 他のスクリプトやスタイルシートに依存はなく、React、Vue、Angular、jQueryなどと一緒に利用することもできます。また、Bootstrap、MaterializeなどのCSSフレームワークへの互換性もあり、幅広く利用できます。 カラーピッカーの使い方は、簡単 HEX, RGBa, CMYK, HSLa, HSVaをサポート jQueryなどの他スクリプトへの依存は無し Bootstrap, MaterializeなどのCSSフレームワークへの互換性 複数の色表現 色の比較 不透明度のコントロール タッチデバイスをサポート Nodejsのサポート
![[JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr](https://cdn-ak-scissors.b.st-hatena.com/image/square/12b3cee3e07a63a7a087487c66c0ccc4563e8ea0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018072702.png)
「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する – lesson me
「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する Google Feed APIが以前から非推奨になってからしばらく立ちますが、いよいよ今日、2015年12月2日、Googleらしくすっぱりと動かなくなりました。 2015年12月4日 いったんAPIが復帰しているみたい。暫定的な処置なのかもで構わずphpやjsonに移行しておいたほうがいいと思います。 まずほとんどのweb制作者の方たちが対応に追われているんじゃないでしょうか… 抱えてる案件が一段落している時だったので僕は直撃を避けれた感じではありますが、今日、タイトなスケジュールをこなしていた方にはGoogleが嫌いになる人もいるかもしれませんね。 twitterなんかでもどのように対応するか色々大変な声が上がってたみたいですが、 僕は簡単に早く対応したかったので、あっさりPHP
[JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd
Webアプリやページにツアーガイドを簡単に加えることができる軽量スクリプトを紹介します。以前に紹介した時から、v.2に大きくバージョンアップされました。 既存ページに加えるのも簡単で、柔軟なカスタマイズにも対応しています。 Shepherd Shepherd -GitHub Shepherdのデモ Shepherdの使い方 Shepherdのデモ デモでは実際にツアーガイドを操作できます。 デモページ ページを表示するとすぐにツアーガイドが表示され、「Next」をクリックすると次に進みます。パネルはそのステップごとに、最適な位置に表示されます。 ツアーガイドは途中で終わることもでき、終了すると通常の画面が表示されます。
![[JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd](https://cdn-ak-scissors.b.st-hatena.com/image/square/72cce263d107aad4485e0214573e1386a854447e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018070804-01.png)
[JS]実行が超高速で、簡単にDOMを操作できるJavaScriptの超軽量ライブラリ -DOMmy.js
ページ上の一つの要素や複数の要素を操作したり、要素にCSSアニメーションを適用したり、CSSの属性やプロパティの操作、要素のストレージ操作など、DOMを簡単に操作できる4kBの超軽量スクリプトを紹介します。 スタンドアロンで動作し、他のスクリプトに依存は一切ありません。 DOMmy.js DOMmy.jsの特徴 DOMmy.jsのデモ DOMmy.jsの使い方 DOMmy.jsの特徴 DOMmy.jsはIE9を含むクロスブラウザ対応の超軽量スクリプトです。実行が超高速で、非常に簡単にDOMを操作できます。ライセンスは、MITライセンスです。 4.0kBの超軽量スクリプト。 他のスクリプトやライブラリに依存は、一切なし。 ページ上のすべてのDOMを簡単に操作できます。 ページ上に>強力なCSSアニメーションを作成できます。 単独または複数のイベント、ストレージ、CSSの属性やプロパティを加え
![[JS]実行が超高速で、簡単にDOMを操作できるJavaScriptの超軽量ライブラリ -DOMmy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/11f76fbcae99e41a621ce4bbb05bd359a42210c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018062802-01.png)
odometer
Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples. Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers. The library and largest theme is less than 3kb when minified and compressed. All of the themes can be resized by setting the font-size of the
Delighters
Delighters.JS Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42 https://github.com/Q42/delighters Features Declarative Flexible Light footprint Framework-agnostic Supports desktop, mobile & tablets Degrades gracefully to your default styling Usage 1. Include the script <script type="text/javascript" src="delighters.js"> 2. Add delighter attributes <div class
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
Pixi.jsでCanvasをカンタンに触ってみよう！ 〜パーティクル編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ٩( ᐛ )و 以前、こちらの記事でご紹介したPixi.js。 今回はパーティクルを使用して、ちょいと「雪が降ってる風」の演出を実装する方法をご紹介します( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください。 npm install pixi.js 実装方法 それでは実装方法ご紹介します( ˘ω˘)☞三☞ｼｭｯｼｭｯ 土台の設定 はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb}); document.body.appendChild(app.view); 複製させる画像の数を決めておきます( ˇωˇ)☝ //表示をする画像の数 let totalSprite
すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js
WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。 カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。 90種類以上のSVGアイコンが全部商用利用無料 vivid.jsでは現在90種類以上のアイコンが利用できます。 手作業で追加するのも可能で、リクエストも受け付けています。 超軽量ライブラリ オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。 SVGアイコンは使用もカスタマイズも簡単 アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。 MITライセンス 個人でも商用でも無料で利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Splitting.js
ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js
Popbox.js
alexcambose.ro
Pickr - Modern Color Picker