ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーションは0%と100%の2色のみ設定可能。 ・PCでwindow幅を狭めたり伸ばしたりするとちょっと変になる瞬間あり 背景色のあたりはJSの中身を見ると最悪編集できそうな感じはあります。 閲覧の際も、重くなる感覚は無いので、優秀なJSではないでしょうか。
whenipressは開発したWebアプリ等に手軽にキーバインドを実装できるスクリプトです。 ※上記サンプルはiframeなので中をクリックしてから動作テストしてください 軽量で非依存、シンプルなコードでキーバインドを実装する事が出来ます。 <script src="https://cdn.jsdelivr.net/npm/whenipress@1.7.2/dist/whenipress.js"></script> <script> whenipress("a", "b", "c").then((e) => alert("aとbとcが同時に押されました！")); </script> 基本的にはスクリプトを読み込んでキーに対する動作を記述すればOKです。 詳しい使い方はドキュメントをご参照ください。ライセンスはMITです。 whenipress
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script> Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", anima
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it. And if you don’t… well… welcome to the industry! We have some articles you may want to check out. For everyo
ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web Audio APIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js - JavaScript audio library for the modern web リポジトリ：howler.js - GitHub 使い方 npmなら
Touch enabled minimalistic slider written in vanilla JavaScript Hardware accelerated transitions Usable as a jQuery plugin Options for custom easing effects infinite looping ~ carousel No compromises for fallbacks Written in ecmascript 6 Using webpack, babel & eslint for development Download Here or via cdn from cdnjs Prerequisited Html structure Class names can be changed through options <div cla
Minimal 2kb zero dependency cascading grid layout without pain. Star DemoThere's a simple example on jsbin. UsageIt works on a grid container with a group of grid items. <div class="cards"> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> Then: var grid = new Minigrid({ container: '.cards', item: '.card', gutter: 6 }); grid.mount(); InstallationGet it from npm. npm
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 アニメーションを使う時に気をつけたい事アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユーザーの注意をひこうとす
Webページやアプリ用のマルチスクリーン対応の柔軟なレイアウトを簡単に実装できるjQuery, React, Angularに対応したスクリプトを紹介します。 Golden Layout Golden Layout -GitHub Golden Layoutの特徴 Golden Layoutのデモ Golden Layoutの使い方 Golden Layoutの特徴 Golden LayoutはjQuery, React, Angularに対応したMITライセンスのレイアウト マネージャーです。 ネイティブのポップアップウインドウ デザインはテーマで簡単に変更可能 包括的なAPI パワフルな持続性 IE8+, Firefox, Chrome対応 Golden Layoutのデモ デモではGolden Layoutで実装されたレイアウトのHTML, CSS, JSをカスタマイズすることもでき
![[JS]Webページやアプリ用のさまざまなレイアウトを簡単に実装できる便利なスクリプト -Golden Layout](https://cdn-ak-scissors.b.st-hatena.com/image/square/9778498b8c36b5ec262f4ba957e38511240ee139/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcold-voice-b72a.comc.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041802.png)
We introduced the justified layout on Flickr.com late in 2011. Our community of photographers loved it for its ability to efficiently display many photos at their native aspect ratio with visually pleasing, consistent whitespace, so we quickly added it to the rest of the website. It’s been through many iterations and optimizations. From back when we were primarily on the PHP stack to our lovely ne
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
