今から40年以上も前のこと、ある研究者が一夜にして変わる紅葉を見てこんなことを思いました。 「この魔法のような変化をビーカーの中でも再現したい」。 こすると消える「フリクション」の物語が、幕を開けた瞬間です。 製品化までに費やした年月はなんと30年。数えきれないほどのトライ＆エラーを繰り返し、 2005年、ついに「フリクションインキ」が誕生したのです。
こすると消えるフリクション | PILOT
今から40年以上も前のこと、ある研究者が一夜にして変わる紅葉を見てこんなことを思いました。 「この魔法のような変化をビーカーの中でも再現したい」。 こすると消える「フリクション」の物語が、幕を開けた瞬間です。 製品化までに費やした年月はなんと30年。数えきれないほどのトライ＆エラーを繰り返し、 2005年、ついに「フリクションインキ」が誕生したのです。
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」:phpspot開発日誌
Selectize.js タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」 次のような良い感じのデザインのタグ入力補完機能付きタグ入力UI、同様にコンタクトリストでも使えるUIが作れます Bootstrapと組み合わせても違和感なさそうなリッチなUIがいいですね 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 超クールなjQueryUIテーマ「Delta」
新Gmailライクな、オーバーレイを利用したシンプルなWebサイトツアーっぽいのを実装するスクリプト・Chardin.js
なかなか良さそうだったので備忘録。最近GmailでUIが少し変更されましたが、その際に使い方をオーバーレイで教えてくれるようになっていました。そんなシンプルなサイトツアーを実装できる、というスクリプトです。 jQuery依存のスクリプトです。Gmailの方はスクショ取り忘れたのでご自身でお確かめ下さい。 上記のようにラインを引いた場所の解説分をオーバーレイで表示する、というもの。 元はこうなってます。ボタンを押すとオーバーレイとライン、テキストが表示される、という仕組み。 <p data-intro="hogehoge" data-position="right">テキストや表示場所はカスタムデータ属性で指定します。 結構いいかもしれない。シンプルで分かりやすいですね。デモとスクリプトは以下よりどうぞ。 Chardin.js
ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
可変グリッドレイアウトを実装するFreetile.jsの使い方 | webrecuration:IT/Webデザイン系ブログ
ベーシックな使い方 実装は基本的にMasonryなどと一緒です。 まずは配布元からjsなどをダウンロード。 Yannis Chatzikonstantinou / Freetile.js ボックスを内包するコンテナー(#container)を指定してあげます。 サンプル JS読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.freetile.js"></script> <script type="text/javascript"> $(function(){ $('#container').freetile(); }); </script>.box～の横幅を最初に300pxで統一することで縦に整列された形
使い道は色々！iphone風のラジオボタンやトグルスイッチが作れるJSを紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのももこです。 今回はiphoneで使用されているフォームの部品と同じ物を使えるようにするJSをご紹介します。 iphone-style-switches iPhoneのラジオボタン風の部品が作れます。 用意するものはjqueryとスイッチの切り替え時に使用する背景画像です。 デモの場合、背景画像はcssスプライトを使用する前提で作られています。 選択した要素にクラス：selectedを振りbackground-positionを切り替える事でON・OFFを実現しています。 HTML <p class="field switch"> <input type="radio" id="radio1" name="field" checked /> <input type="radio" id="radio2" name="field" /> <label for="rad
Greenapple-room
Google Code Prettify Javascriptライブラリによるコードハイライターです。 ソースコード表示を行うライブラリは色々ありますが、Google Code PrettifyはjQueryなどを使用せずにシンプルに動作します。 以下のような特徴があります。 Bash,C++,CS,HTML,Java,JavaScript,XML,Perl,Python,Ruby,PHP,CSS,SQL,VBなどの言語に対応しています 自動的に言語を判別します。 表示したいソースコードを<pre></pre>タグで囲むだけです。 以下のページからダウンロードして、ダウンロードしたものをサーバーにアップロードして下さい。 google-code-prettify 当ページでも以前はGoogle Code Prettifyを使用していましたが、現在はGoogle Code Prettifyを
JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみた | TM Life
JavaScript で IE アクセス時のみブルースクリーンで警告を表示する tm.destroyie6.js を作ってみました. IE6 を一緒に撲滅しませんか？ このスクリプトを使えば簡単に IE6 でアクセスした時のみ下の画像のような警告を出し, 他のブラウザのインストールを促します. ちなみに, デザインは開発者用に配布された Windows 8 のブルースクリーンを真似てます. Microsoft が作ったブラウザでアクセスした際に, Microsoft がデザインしたブルースクリーンで警告を出す. ん～皮肉感たっぷりなスクリプトですw DATA and DEMO いくつかデモを用意しました. IE 警告の他にも, 本家ブルースクリーンのコピーや誕生日メッセージも作ってみました. Demo Download USAGE 使い方について FLOW 流れ tm.destroyie6
横幅の可変にも対応したPinterest風デザインライブラリ·Freetile.js MOONGIFT
Freetile.jsはカラム幅も可変なPinterest風デザインを実現するライブラリです。 2012年前半の話題を一気にかっさらっていったPinterestはその奇抜なデザインもあり、色々な類似デザインを実現するライブラリを登場させるに至っています。Freetile.jsもその一つですが、高さだけでなく幅も自由に設定できるのが特徴になります。 サンプルです。かなり複雑なデザインでもこなします。 実例です。斬新なデザインがきちっと決まります。 フィルタリングしました。並び変わる時のアニメーションが格好いいです。 要素がない部分もできてしまうのは致し方ありません。 Freetile.jsを使うとかなり自由度の高いデザインが実現できます。とは言え表示はFreetile.jsに任せきりなので、思った通りのデザインになるとは限りません。なおフィルタリング機能があり、絞り込む時にはアニメーションが
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
スマホ対応アニメーション支援ライブラリ - smart js
特徴 配置と動きに特化した Javascriptライブラリです。 シンプルで柔軟性もあり、 処理も高速です。 対応OS / ブラウザ iOS 7+ Android 4.1+△ Android 4.4+○ IE9+ Safari latest Chrome latest Firefox latest
Move.js - CSS3 animation framework for JavaScript
Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Examples
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ActyWay.com is for sale | HugeDomains
creatorish.com
文字をなめらかにした - hitode909の日記
[JS]表示しているウェブページを爆発させるスクリプト -fontBomb