[B! js] otim3のブックマーク

HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza times

どうも、まさとらん（@0310lan）です！今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！【 Theatre.js 】 ■「Theatre.js」の導入について！それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して

otim3 2022/11/10

リンク

次世代のReact？ Solid.jsについて

最初に Solid.jsとは Solid.jsとはReactに大きく影響を受けたライブラリであり比較的新しいライブラリです。私が興味を持ったのも2021年のState of JSを見て、Solid.jsの満足度が以下の画像のようにReactやSvelteよりも上位であることに驚き、調べたからで、それまでは存在すら知りませんでした。この記事の目的 Solidについて興味を持ったため簡単にSolidについて調査した結果を書いていこうと思います。また、Solidの認知度が少しでも上がり、開発手段の一つとして名前が上がるようになればと思っています。 SolidとReactの差今回は主な違いでけを取り上げます。細かく知りたい方は公式サイトをご確認ください。仮想DOM まず大きな差が仮想DOMを使っているのかどうかです。Reactで仮想DOMを使っているのは有名で、仮想DOMのおかげで高速なSP

otim3 2022/04/05

リンク

JavaScriptでTwitterのOAuthを取り付けて通信する方法 - 憧れ駆動開発

以下の記事とTwicliのソースをコピペして作成しましたおれにこんな難しいことができるはずがない TwitterクライアントのOAuth対応(Javascript編) | tomatomax.net NeoCat/twicli · GitHub JavaScriptでクロスドメイン通信したい方法としては2つある XMLHttpRequest($.ajaxなど) JSONP 結論としては両方使いました。Firefoxの拡張ならGreeseMonkeyでGM_xmlhttpRquestがあるし、ChromeやOperaの拡張だとどこかの設定でOrigin PolicyでAllowすればXMLHttpRquestして返り値を取ってくることができる。でも今回は生でやりとりするから返り値を求めないPOSTは$.ajax GET参照する場合はJSONP という形で落ち着きました。*1 JS(jQ

otim3 2015/10/09

リンク

prototype.js逆引きサンプル集 - JavaScriptist

はじめに bookmark prototype.jsの概要ユーティリティ関数 bookmark 指定idのエレメントを取得 - $ 指定idのエレメントのvalueを取得 - $F エレメントのリスト形式を配列形式に変換 - $A オブジェクトをHash形式に変換 - $H 指定した範囲のリストを返す - $R prototype.jsで追加された機能 bookmark Ajax Ajaxリクエストを行う - Ajax.Request Ajaxで指定エレメントの内容を書き換える - Ajax.Updater Ajaxで指定エレメントの内容を定期的に書き換える - Ajax.PeriodicalUpdater 定期的に指定の処理を行う - PeriodicalExecuter Enumerable リストに特定の関数で処理させる - Enumerable.each リストの全ての値を調べる

otim3 2014/06/23

リンク

シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

お疲れ様です、ももこです。おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。「SIMPLE MODAL」デモ用意されているデモは全部で8種類あります。その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ商品紹介などに使えそうな基本的なウィンドウ MODAL　AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ記述ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。「

otim3 2014/05/30

js
Web

リンク

tmlib.js 100 サンプル!! 解説一覧 | 楽遊堂

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編 100サンプルを解説してみました。基礎その1　Canvas インスタンスを生成しようその2　背景色を指定しようその3　幅を指定しようその4　高さを指定しようその5　幅、高さを指定しようその6　canvasのサイズを画面いっぱいにしようその7　canvasを画面にフィットさせよう（解像度は固定）図形-初級(Figure) その8　直線を描画しようその9　矩形を描画しよう（塗りつぶし描画) その10　矩形を描画しよう(ストローク描画) その11　円を描画しよう(塗りつぶし描画) その12　円を描画しよう(ストローク描画) その13　円弧を描画しよう(塗りつぶし描画) その14　円弧を描画しよう(ストローク描画) その15　三角形を描画しよう(塗りつぶし描画) その16　三角

otim3 2014/05/23