スライムから泡まで！液体をシュミレートしたリキッドモーション8選 - Workship MAGAZINE(ワークシップマガジン)
Webデザインと特殊効果は、切っても切れない関係にあります。これまで多種多様な特殊効果が制作されてきましたが、高度な技術を使うことができるいま、ぜひ取り入れたいのが「液体を再現したデザイン（リキッドモーション）」です。 一口に液体といっても、スライムのようなものから泡のようなものまで、さまざまなデザインが可能です。 今回は多様なデザインの中から8つの例をご紹介します。 1. 輝く液体を動かそう WebGLで作られた、発光する不思議な液体のかたまりが空間に浮かんでいます。 ぜひカーソルで動かしてみてください。 See the Pen Blob study by Liam Egan (@shubniggurath) on CodePen. 2. 暗闇に浮かぶ液体のかたまり 最初にご紹介した例と比べると、こちらはより形がはっきりしています。まるで目の前に浮かんでいるかのような、リアルな液体作品で
【JavaScript】パーティクルの背景アニメーションを実装できる「bubbly-bg」の使い方 | misoblog
とても簡単に背景にパーティクルのアニメーションが実装できるJavaScript「bubbly-bg」の使い方をご紹介します。 bubbly-bgの実装方法GitHub – tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) 上記リンクのサイトで「Clone or download」を選択し、「Download ZIP」をクリックすれば、ファイル一式をダウンロードできます。 ダウンロードしたZIPファイルを解凍し、その中にある「bubbly-bg.js」というJavaScriptファイルを使用します。 下記のようにHTML内に記述して、実装完了です。とても簡単。 <script src="js/bubbly-bg.js"></script> <script>bubbly();</
とっても幻想的な泡のスクリプト！実装方法やサンプルを紹介 - Design Color
はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプログラム情報などが満載のブログです！ 今回は、そんなあくちーさんの良記事のひとつ「まるでサイダーみたい！炭酸飲料みたいに気泡が上がってくスクリプトでシュワワのアワワ！ : actyway」に沿ってお伝えします！ カスタマイズ方法 泡の動き(Javascript) 泡スクリプトのベースは先日Web系ブロガーさんの間でブームを巻き起こした「雪スクリプト」をベースにしているそうなので、そちらを参考に変更しました。 クリスマスに使いたい！雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway そして泡のソースコードはこちら。自分好みにカスタマイズするなら、主に下記のハイライト
独学の人には特にオススメ！JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
現場で使えるgulp入門 | 第1回 gulpとは何か
現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？ 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ
Lo-Flo Records
Lo-Flo Records presents Songs from the Vault: Reel #4, a three-song EP written by prolific composer Jane McNealy, and performed by vocalist Sona Lee. These songs—“Give Me All Your Love,” “Hold Me in Your Arms Again,” and “How Do I Know”—have been unearthed from McNealy’s vast archive and never been released before. The songs on Sona Lee’s EP were written early in Jane McNealy’s music career during
MONO AIR | トンボ鉛筆
MENU トップ エアータッチシステム エアータッチシステムの仕組み エアータッチシステムをもっとわかりやすく エアータッチシステムの効果 モノエアーをもっと知る 商品ラインナップ キャンペーン ムービー
UTEC-東京大学エッジキャピタルパートナーズ
TOPIC 05/17/2021 UTEC サイエンス・テクロノジー領域で国内最大規模となる総額300億円超の新ファンドを組成～グローバルな市場や人類的な課題に挑戦するスタートアップの支援を一層加速～
秋保ワイン RASIN DE AKIU
果実味あふれる香りに うっとりしたら、スッキリとした 後味をお楽しみください。 フレッシュなサラダや 旬のフルーツとどうぞ。 白ワインの楽しみ方を 鮮やかに変える爽やかさです。
Kuum.jp: Online Shopping for wooden toy blocks | Felissimo
ABOUT KUUM KUUM is a collection of 202 building blocks crafted from beech tree wood that come in beautifully arranged units of 12 pieces. Each unit is infused with the stories of 12 elements and each unique piece embodies a small fragment of nature. By seeing and touching the KUUM building blocks, the rational and the emotional parts of your mind are stimulated and this experience will introduce y
手軽に実装！Webサイトにアニメーションを加えられるCSS＆JavaScriptライブラリー
2019年2月22日 CSS, JavaScript, jQuery 人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ アニメーションを使う時に気をつけたい事 アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。 しかし、ユー
【WordPress】外部サイトのRSS情報を取得して表示させる方法。
外部サイトのRSSを取得してきて、適当な箇所で表示させたい場合、「Google API」を使ったり、配布されているPHPライブラリを使ったり、あるいはPHPやJavaScriptで独自のプログラムを作って実装することになります。 「Google API」を使う方法「PHP」を使う方法もしサイトをWordPressで構築している場合は、上記の方法の他に、ワードプレスが独自に用意している［fetch_feed］函数を利用することができます。 使い方は簡単で、テーマファイルの中、RSSを表示させたい箇所で以下のコードを記述すればOKです。 <?php include_once(ABSPATH . WPINC . '/feed.php'); $rss = fetch_feed('https://on-ze.com/feed'); // RSSのURLを指定 if (!is_wp_error( $r
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
各ブラウザでJavaScriptを無効にする - Qiita
2019/04/02 14:30 超久々に差分チェック。 引き続きで使えることを確認しました。 【経緯】 フロントエンドの問題切り分けのため、JavaScriptをOFFにしてみることにした。 Firefoxの設定メニューを開くも、JavaScriptに関するメニューが無い。 そんなにJavaScriptOFFにされると困るのか…(´･ω･`) どっかのタイミングで設定メニューから外したらしい。 Firefoxと、普段使いのChromeでの設定方法を確認して粛々と進めます。 Firefoxの場合 (65.0.2で確認) アドレスバーに、about:configを入力。 動作対象外です！と警告が出るので納得の上で進む。 検索バーに「javascript.enabled」を入力。 出てきた設定項目はおそらく「true」になってるので、ダブルクリックで「false」に切替え。 これでJavaSc
福岡県観光情報 クロスロードふくおか
2024年2月16日の予約およびチェックイン分で「ふくおか平日おトク旅」観光キャンペーンを終了しました 2024.02.08
jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Javascript】selectタグのonChange,onClickイベント: なんちゃってプログラマのぼやき
Pocket Penguins – Colourful Classics for everybody