その他

デザインシステム作成Tips 9つ

by

https://zenn.dev/stmn_inc/articles/fb0f03d239e5f4

エンジニアとしてデザインシステムを立ち上げてバージョン1を作る機会があったので、そのときに学んだTipsを共有します。

そもそもデザインシステムは「生産性を上げる」ことと「統一的なUI/UXを提供する」ことが目的ですが、このTipsの内容もいずれもその目的のためのものです。

Zenn

続きを読む

CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法

by

https://coliss.com/articles/build-websites/operation/work/scroll-driven-animations.html

まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。

スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。

coliss

修正順ポスト

by
1 2 3
aaab

国の大きさが”正しく”比較できる Webアプリ

by

in ArcGIS on 2022-05-06

メルカトル図法で描かれた世界地図は、高緯度になるほど極端に拡大されるため、国や陸地の大きさを誤解してしまいます

https://blog.esrij.com/2022/05/06/post-42873/

World Sizes

  • Esri の開発者エヴァンジェリスト、Arno Fiva 氏 (@arnofiva) が作成した、バーチャルな地球儀の上で各国の国境を移動して面積が比較できる Web アプリ。
  • 選択した国を、形を維持したまま別の場所に移動可。

操作方法

  1. World Sizes にアクセス。
  2. マウスの左ボタンでドラッグすると中心が移動。右ボタンでドラッグすると視点の角度が変えられる。マウスホイールを回すか、ホイールの中ボタンでドラッグするとスケールが変更。
  3. マウスで国や諸島をクリックすると、選択され、オレンジのガイドが表示。
  4. ガイドが表示された状態で、中心の円部分をドラッグすると、選択した国を別の場所に移動。
  5. ガイドの外周円をドラッグすると、選択した国が回転。
  6. 他の国をクリックすると、新しくピックアップ。
  7. ガイドが表示された状態で、[Del] キーを押すと、ピックアップされた国は削除。

この Web アプリを作るには？

この Web アプリは自分で作ることもできる。

  • Esri の ArcGIS API for JavaScript で作成されている。
  • ArcGIS Developer サイトで開発者アカウントを作成すれば、さまざまな GIS アプリケーションを開発できる。
  • アプリの開発は誰でも無料から始められる。
  • ESRIジャパンでは日本語のチュートリアルも用意。
  • Esri では ArcGIS Living Atlas of the World として、すぐに使えるデータを提供。GIS データを持っていない方でもすぐにプログラミングを試すことができる。