canvasで大量の円がランダムに動くパーティクルを実装してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
CSS 有機的に動く円の作成方法 - by Takumi Hirashima
CSS で有機的に動く円の作成方法を紹介します。 例えば、ページのアクセントや、サムネイルのワンポイントに便利な方法です。 CSSで有機的な円を作る CSSで有機的な円を動かす 円の動きを滑らかにする 円の中に写真を入れるとうまくいかない CSSで有機的な円を作る CSS で有機的な円を作るには border-radius に複数のプロパディ値を指定します。 実装時の見た目はこちら。 ベースのHTMLはこちら。 <div class="round-wrap"> <div class="round"></div> </div> 続いてCSSの指定はこちら。 .round-wrap { width: 200px; height: 200px; } .round { width: 100%; height: 100%; border-radius: 30% 70% 60% 40% / 30% 4
円状の要素の中にテキストを収める
Result 円の中にテキストが自動で収まるようになっています 円はradial-gradientを、回り込みはshape-outsideを用いますので、まだ実用向けとは言えません css.quote-wrapper {/*親*/ width: 300px; height: 300px; position: relative; margin: 10vh auto 0; } .text { width: 100%; height: 100%; /*円形グラデーション*/ background: radial-gradient( ellipse at center, rgba(0, 128, 172, 1) 0%, rgba(0, 128, 172, 1) 70%, rgba(0, 128, 172, 0) 70.3% ); position: relative; margin: 0; col
現役デザイナーが教える！CSSを使った円形サークルの使い方完全ガイド
この記事では、CSSでスタイリングされた円形コンテンツを使うときのポイント、そしてトラブルシューティングを実例サンプルコードと一緒にまとめています。 円形コンテナ、円形サムネイル、サークル型ボタン、円形パスに沿った文字テキストの配置など、かゆいところに手が届くテクニックをマスターしましょう。 サークル円の作成方法について HTMLとCSSで円形を表現する方法はいくつかあり、それぞれ長所と短所があります。ここでは、もっとも一般的なテクニックからマイナーなものまで、実際にウェブサイトで利用したサンプル例を見ていきましょう。 Border Radiusプロパティをつかった方法 もっとも一般的なテクニックは、要素のすべての角を50%に丸める方法です。もっとも手軽に適用でき、各種ブラウザに幅広くサポートされています。プロパティborder-radiusは、境界線や影、要素のタッチ/クリックのターゲッ
円型での切り取りも可能な画像クロップライブラリ・「Cropme」
CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を動かしたり拡大縮小するものが殆どですが、こちらは切り取る範囲を固定して、ドラッグで画像を動かしたり拡大、縮小、回転等を施して切り取るスタイルとなっています。 動作サンプル 適当に作った、動作確認出来るだけのサンプルです。切り取り範囲が固定されており、画像の回転等で切り取り範囲を変更する、みたいな流れで切り取ります。 ライブラリサイトではオプションを作成できるようにもなっているので割と手軽に導入できるんじゃないかなと思います。 var example = $('#container').cropme();//要素指定 example.cropme('bind', { url: 'h
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
CSSスニペット：border-radiusを使って要素をアニメーションでいろいろな形に変形させる | かちびと.net
Result border-radiusで作れる様々な形状を利用してkeyframesでアニメーション変形させる、というもの 尚、形状は先日書いた記事で手軽に作成できます。以下、宜しければご参照ください。 → ユニークな形状も作れるborder-radiusジェネレーター・「FANCY-BORDER-RADIUS」 cssdiv {/*要素のスタイル。サンプルのようにテキストを含めるならoverflow: hidden;をしないとはみ出ます*/ width: 20%; height: auto; margin: auto; background-color: #21d4fd; margin-top:20px; border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0,0,0,0.2);
クリックで展開する円状のメニュー
Result SNSのPathっぽい円状のメニューです。 クリックでメニューが展開する、というもの。アイコンはfont-awesomeです css#menu {/*親要素*/ width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; list-style: none; font-size: 200%; } .menu-button {/*メニュー展開のトリガー要素*/ opacity: 0; z-index: -1; } .menu-button {/*スタイル*/ width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; bor
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」
canvasで描いた円状のシャボン玉っぽいものをランダムに動かし、背景に設定できるスクリプト・「bubbly-bg」