npmとwebpack4でビルド - jQueryからの次のステップ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Free Frontend
Modern web games often rely on bloated frameworks. This project demonstrates the raw capability of the native Canvas API combined with lightweight physics. It is a satisfying, tactile experience where the user’s cursor becomes a blade. By implementing a custom particle system and separating the collision logic (SAT.js) from the rendering, we achieve a high-performance arcade feel that runs smoothl
jQuery.panelSnap Plugin
A jQuery plugin that, after scrolling, snaps to blocks of content which I like to call panels. You can actually nest sets of panels as you will see throughout this demo page. Each following panel will explain a specific feature of the panelSnap plugin. https://github.com/guidobouman/jquery-panelsnap Basic setup <!doctype html> <html> <head> <script src="/path/to/jquery.js"></script> <script src="/
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
Webix を使ってみた - Qiita
はじめに HTML＋JavaScript でアプリ開発するにあたって、UI ライブラリをどうするか悩みました。独自に CSS＋JavaScript で書ければいいのですが、無理なので既存のライブラリを使うことにします。jQuery UI や jQuery Mobile に始まり、Twitter Bootstrap 、Adobe Topcoat 、Intel App Framework など試しました。モバイルアプリは Onsen UI がよさそうです。デスクトップアプリは Titanium 、Sencha Ext JS 、Kendo UI など見てみました。その上で Webix が気に入りました。 参考 サクサク書けて柔軟なカスタマイズが可能な、UIフレームワーク「Webix」 | #GUNMAGISGEEK Webix とは Webix は、クロスブラウザの（主要ウェブブラウザで動作する
薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog
こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの
タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。 今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。 Twproject Gantt Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。 Twproject Gantt jQuery.ganttView シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があり
[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。 Tilt.jsの使い方 Tilt.jsは単体でも、jQueryのプラグインとしても動作します。 ※スクリプトがそれぞれ異なります。 vanilla-tilt.js -単体版 Tilt.js -jQueryのプラグイン版 基本書式 HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
![[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt](https://cdn-ak-scissors.b.st-hatena.com/image/square/45d09e5964050a73799a7c1f4061140f1b7c5413/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013001.png)
JavaScript UI デザイン ソフトウェアおよびユーザー インターフェイス コンポーネント |インフラジスティックス
当社では、Webサイトでのお客様の利便性を向上させるために、自社およびサードパーティのクッキーを使用しています。また、これらのクッキーを使用することで、ユーザーの行動を分析し、継続的にWebサイトを改善することができます。下記のCookieポリシーとCookie設定をご確認ください。 Webサイトを訪問すると、ブラウザに情報が保存または取得されることがあります。この情報は、お客様、お客様の好み、またはお客様のデバイスに関するもので、ほとんどの場合、お客様が期待するようにサイトを動作させるために使用されます。この情報は通常、お客様を直接特定するものではありませんが、よりパーソナライズされたWeb体験を提供することができます。当社はお客様のプライバシーの権利を尊重するため、一部の種類のCookieを許可しないよう選択することができます。ただし、一部の種類のCookieをブロックすると、サイトの
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
Homepage
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
「table」って実はここまでできるんです！jQuery tableプラグイン12選｜SeleQt【セレキュト】
＜table＞はHTMLで最も古い要素のひとつです。tableはかつてWebレイアウトに広く使われていました。しかし、tableを基盤としたレイアウトは廃れ（HTMLメールを除いて）、現在tableを使うのは、表データを見せるために使うときくらいでしょう。 HTMLスペックの古い部分は、一般的にモバイル中心のデザインに合っておらず、そしてbox要素の外では機能的な発展はありません。とはいえ、table機能の使い勝手がもっとよくなったらいいと思いませんか？ この記事では、jQueryで動く厳選したプラグインについてザっと説明し、tableの可能性が広がればいいなと思います。これからご紹介するプラグインは、簡単なデザイン修正から機能豊かな解決策にまで多岐に及びます。 jQueryで動くtableプラグイン12選 Dynatable Dynatableはフィルター、分類、ページ付けなどの機能をも
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
リッチなタイポグラフィを実現するjQueryプラグイン10選 - ポップインサイト
jQuery プラグインを使うことで、高度なアニメーションや、魅力的なデザインを簡単に実現することができます。今回は Web サイトの表現をよりリッチなものにするテキスト系の jQuery プラグインを紹介します。 FitText 親要素のサイズによってフォントサイズをフレキシブルに変更できるプラグインです。デモサイトでは、画面のサイズの拡大・縮小によってフォントサイズが変更されることが確認できます。オプションでテキストの最小・最大サイズなどを設定することも可能です。 DOWNLOAD / DEMO CircleType.js テキストをカーブさせたり、円形にしたりできるプラグインです。RAIDUS を設定することができ、ウィンドウサイズによって動的に RADIUS を変化させることもできます。CircleType.js のファイルサイズは 2KB しかないので、非常に軽量なプラグインです
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 ｜ Tips Note by TAM
2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。 要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ハッカソンでkintoneを使おう！ – cybozu developer network
