[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション 最終更新日：2017年11月16日 （初回投稿日：2017年04月22日） SVGアニメーションの続きです。 前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。 本日のINDEX Snap.svg でモーフィングアニメーション クリックでモーフィングするサンプル 連続ループでモーフィングするサンプル モーフィングの応用（他サイト様をメモ） その他 SVGアニメーションのための JavaScriptライブラリ Snap.svg でモーフィングアニメーション Snap.svg は Adobe社が提供しているライブラリです。 これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーシ
![[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション](https://cdn-ak-scissors.b.st-hatena.com/image/square/c45e8f5f3f125fcbd6360ee956d828c6ae8dd2d4/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-121.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F170320-3.gif)
SVG奮闘記 ー SVG要素をぐにょぐにょ動かす実装を完了させるまでに右往左往した話 - Qiita
こんにちは。せいと（@seito2014）です。 LIGアドベントカレンダー13日目です。 はじめに 最近とあるサイト制作でSVGアニメーションを利用したのですが、そこでつまづきまくったことをつらつらと書いていきたいと思います。 とあるサイトというのはこちらで、見ていただくとわかるのですが、メインビジュアルがぐにょんぐにょん動いてます。 他にもいたるところでSVGやらCanvasやら使ってるサイトなのですが、今回はメインビジュアルのアニメーションに言及して書いていこうと思います。 ・イメージ図 ※キャプチャ画像はちょっとグレーなので別途画像を用意しました。 当時、デザイナーさんから静止画のPSDをもらって「この部分をこう、ぐにょぐにょ動かしてほしい」と言われて、やるならCanvasかSVGのどちらかだろうなあと思いました。 ただ、Canvasでやる場合は恐らく計算式が大変なことになるんじゃ
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
[Sass] 既存の CSS ファイルを SCSS ファイルへ変換する
ターミナルで変換する ターミナルを開き以下のように入力し実行します。 sass-convert --to （scss 変換するcssファイルがあるフォルダのパス）/style.css （scssファイルを作成するフォルダのパス）/style.scss 例）ホームディレクトリにある sites というフォルダの css フォルダ内の css ファイルを scss 形式へ変換し sites フォルダ内に作っておいた scss フォルダへ保存する場合 ターミナルへ以下のようにコマンドを打ち込みます。 sass-convert --to scss /Users/ユーザ名/Sites/css/style.css /Users/ユーザ名/Sites/scss/scss.css これでネスト化された scss ファイルが scss フォルダへ作られます。
![[Sass] 既存の CSS ファイルを SCSS ファイルへ変換する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e001ae941b350b59e794e32b00fb92a4930f3079/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F10%2Ficon3.png)
[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート
背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; background-image: var(--bg); } .blur-container.blur-8::after { background-size: cover; background-position: center; background-attachment: fixed; opacity: 0.8; -webkit-filter: blur(6px); filter: blur(6px);
![[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd057f6b3e7535c99e31d0c606db378bb2b2e215/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017021304-08.jpg)
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10 - NxWorld
初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。 大体同じような動きではあるものの単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。 ただし、単体で動くものもありますが、jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもあるのでその点は注意してください。 Intro.js 注目させる箇所以外はオーバーレイがかかるようになっているタイプのもので、data属性で表示内容や順番を指定していくスクリプトです。 豊富に用意されているサンプルにあるように、現在の表示をプログレスバーで表示させたり、ツアー終了後に現在見てい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SweetAlert
こりゃ便利！CSSをSass/Scssに変換してくれるサイト「css2sass」
eky.hk
chiepomme
坪田 朋
table周りで便利なスニペットやプラグイン - NxWorld
