#daiizメモ

Scrapboxに夢中

技術ネタはてブ数が多いごはん情報/daiiz

スポンサーリンク

Portalsを触って、SVG Screenshotビューワに組み込んでみた

時間ができたので、ずっと気になっていた Portals をようやく触れた。これはかなり面白そうだ。デモのGIFでよく見かけた、portal要素が左下のからwindow全体になめらかに遷移する綺麗なアニメーションも仕様の一部かと思い込んでいたけれど、意外とCSSだった。表現の自由度が高くて良い。

この解説記事を読みながら SVG Screenshot に無理やり組み込んでみたりしていた。

以下は、関連画像の遷移に使ってみた例。動きはおもしろいが、いまいち嬉しさはない。

SVG画像内リンクの遷移に使ってみる。これは良いプレビュー機能だ。遷移先がsame originでなくても動くのは楽しい。

暫くの間、画面遷移のためには<portal> をクリックしないといけないと勝手に勘違いしていたが、よく考えたらそんなことなくて portal.activate() さえできれば良い。aタグがクリックされた時、portalがスタンバイ完了しているならそれをactivateすることで便利になった。

https://i.gyazo.com/16c4632703faeb7162e68ce1a528f2cc.gif

enable-portals flag 付きの Chrome Canary でしか動かないが、あとでリリースしよう。

追記

SVG Screenshotのsvg画像プレビューページをPortalsで表示するデモ (ソースコード付き)

scrapbox.io