セリアの「マグネットリリーサー」が100円とは思えないクオリティ！ 小物の持ち歩きに大活躍だぞ | ROOMIE（ルーミー）
磁力で脱着できる便利アイテム、マグネットリリーサー。 なんと、Seriaでもワンコインで販売しているのを発見！ 実際どのくらい使えるのかさっそく試してみました。 マグネットリリーサーって何？ マグネットリリーサーとは、磁石の力でモノをぶら下げるカラビナのようなアイテム。 使い方は簡単。 一方によく使うアイテムを取り付け、もう片方をバックパックなどに引っ掛けておくだけ。 あとは使いたいときに、強く引っ張るだけでOK！ ワンアクションで切り離せて、よく使うアイテムを自由に取り回して使うことができるんです。 取り付けるのはもっと簡単で、マグネットの部分を近づけるだけであっという間に連結できちゃいますよ。 絶妙な連結力で小物にぴったり 耐荷重表記はありませんが、実際試してみたところ500mlのペットボトルをぶら下げるのがギリギリという感じ……。 重たいものや貴重品には向いていないと思います。 とは
アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends
ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが美しいCSSによるボタンデザインのサンプルコードをご紹介したいと思います。 ホバーエフェクト ビット調のホバーエフェクトアニメーション ホバーに合わせて楽しいビット調のアニメーションが現れます。 0 6つのボタンデザイン ユニークな6つのボタンのCSSアニメーションのサンプル。 0 矢印が現れるボタン カーソルを合わせると左側から矢印が登場するボタン。 0 テキストが変化するボタン カーソルを合わせると、ボタンのテキストがアニメーションを伴って変化します。 0 ポップで楽しいボタン カーソルを
Q co.,ltd.【株式会社キュー】
もしすごいアイデアを思いついたらどうする？ 宝箱に入れて大切に保管してもしょうがない。 実現させないと。 もし実現する方法がなかったら？ なかったら創る。 方法論から創り出す。 だって実現しなければクリエイティブじゃない。 それが私たちQの考え。 そしてQ自体がクリエイティブを実現するために、 つくられたひとつの方法論、とも考えます。 才能を集めて自由と 責任を与え、 若さをリスペクトし、 組織の中にも頭の中にも垣根を無くす。 大胆を良しとする。挑戦を良しとする。 そんなクリエイティブ実現力集団こそ、 私たち Q が目指す姿です。 ｢0｣からのプランニングに始まりデザインからモノづくりまで、 各分野のプロフェッショナルが手を組み、 戦略と感性を融合させあらゆる トータル・ソリューションの実現をサポートいたします。 私たちはクリエイティブに領域を決めず、 ボーダーレスに探求しています。
HTMLとCSSでパララックスページを作ってみよう | Casley Deep Innovations株式会社 技術ブログ
皆様こんにちは。 キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。 今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した シンプルなパララックスページの作り方を、ご紹介したいと思います。 「パララックスってなに？」と思われる方もいらっしゃると思いますので、 まずは、その言葉の意味から解説したいと思います。 1. パララックスとは パララックス(en. Parallax)とは、日本語で「視差」という意味です。 Webデザインの世界においては、「視差効果」とも呼ばれ、画面をスクロールするといった動作の際に 要素を異なる速度で動かしたりすることで、あたかも立体で奥行きがあるように見せる手法とのことです。 最近ではプラグインも増えつつあり、単に速度の変更だけでなく、様々な動きを持たせることが可能になってきました。 2. 実際に触ってみましょう まずは、こちら
映画『マトリックス』の背景エフェクトを canvas で実装してみた。
投稿日：2018年1月22日 更新日：2018年1月22日 Design, JavaScript, jQuery 1266文字：約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/6987 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見つけたものですが、改変して次のようなJavaScriptのコードを書いています。 <body> <canvas id="c"></canvas> <script> var s = window.screen; var c = document.getElementById("c"); var ctx = c.getCon
2020年中期のWebアニメーション実装の全容と方法70選 - Qiita
概要 Webページでアニメーションを実装しようとしたときに、どんな方法があるのかまとめる。 今回は「実装したい特定のアニメーションにとって良い方法とは」ではなく、Webのアニメーション全般に対する知見を深める目的。 このアニメーションどうしようかなと思ったときに見返せるように。 方法 参考リンク 特徴のコメント 実際の例 などを書く構成になっています。 パッとググって出てくるライブラリは網羅したはず。 ライブラリの細かい使い方についてはそれぞれ紹介している記事がいっぱいあるので、ここでは特徴をメモ程度に。 スター数や最終更新日は執筆時点のもので、こまめに更新する予定はありません。 目安程度で実際の値は実際にGitHubをご確認ください。 パフォーマンスについてはスコープ外です。 アニメーションの調査方法について 既存サービス/サイトのアニメーションに何が使われているか調べる方法としてChr
three.js超入門 第1回 レンダリングまでの流れ - Qiita
概要 この記事では「three.js超入門」と題して、three.jsの基礎からシェーダーの利用までをやっていきます。 ターゲットは主に「canvas表現を触ったことがないフロントエンドエンジニア」を想定しているので、jsの構文などの説明は省略しています。 three.jsのバージョンは執筆時点で最新のr98を使用します。 three.js超入門 第0回 3Dコンピュータグラフィックスの基礎 three.js超入門 第1回 レンダリングまでの流れ three.js超入門 第2回 アニメーションと時間ベースでの制御 three.js超入門 第3回 マウスやスクロールでのインタラクション three.js超入門 第4回 getBoundingClientRect()を使ったDOM要素との連携 three.js超入門 第5回 シェーダー(GLSL)の基礎 three.js超入門 第6回 Shad
Three.js入門サイト - ICS MEDIA
このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
three.js webgl - marching cubes
three.js - marching cubes based on greggman's blob, original code by Henrik Rydgård
Adobe MAX Japan 2023 | 2023年11月16日開催 #AdobeMAX
クリエイターの祭典 #AdobeMAX 第一線のクリエイターが集まる、クリエイターのための祭典に参加しましょう。様々な著名人やエキスパートからインスピレーションとクリエイティブな刺激を得たり、すぐに役立つテクニックを学ぶことができます。 クリエイターの祭典 #AdobeMAX 第一線のクリエイターが集まる、クリエイターのための祭典に参加しましょう。様々な著名人やエキスパートからインスピレーションとクリエイティブな刺激を得たり、すぐに役立つテクニックを学ぶことができます。 Adobe MAX Japanはグラフィックデザイン、写真、Web制作、UI/UXデザイン、映像制作、3D制作などに携わるクリエイターの方、およびそれらを目指す方が楽しめる「クリエイターの祭典」。 クリエイティブのトレンド、第一線で活躍するクリエイターのアイデアやテクニック、Adobe Creative Cloudの最新機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オンズ - Canvas Matrix Background