#daiizメモ

Scrapboxに夢中

Web Components を学ぶ #5 「core-scroll-header-panel の背景画像を動的に変更する」

ページをスクロールするとスムースなアニメーションで背景画像領域の高さが徐々に低くなり、最後にはタイトルだけになる「スクロールヘッダー」は個人的にとても気に入っているデザインの1つです。

f:id:daiiz:20140926181038g:plain

Polymerでは、このような動きをするヘッダーのWeb Componentが「core-scroll-header-panel」という名称で提供されています。

今回は、この「core-scroll-header-panel」コンポーネントの背景画像をJavaScriptで動的に変更する方法について書きたいと思います。

方針

実際に「core-scroll-header-panel」エレメントのソースコードを読んでみると、背景画像を表示するためには、「headerBgというidを持つdiv要素のstyle.backgroundImage画像のURLを指定すれば良い」ということが分かりました。

なんとかしてdiv#headerBgにアクセスできればよいのですが、ベストな取得方法が思いつかなかったので*1、core-scroll-header-panelのコードを直接編集してgetterを追加することにしました。*2

ステップ1

Chrome Dev Editor で、Web Componentを扱うプロジェクトを生成します。詳細は以下の記事を参照してください。

自動生成されたbower_componentsフォルダの中から、core-scroll-header-panelを見つけてその中のcore-scroll-header-panel.htmlを開きます。

ステップ2

getterを追加していきます。

Polymer('core-scroll-header-panel', {
   publish: {
       ...
   }
});

publishの内部(上記のコードスニペットの「...」の部分)に、以下のコードを書き加えてください。

/* by daiz */
get headerBg() {
  return this.$.headerBg;
},

これで、アプリケーション側から以下のようなJavaScriptを実行することでヘッダの背景画像のURLを動的に変更することが出来るようになりました。

var headerBg = document.querySelector("core-scroll-header-panel").headerBg;
var imageURL = " ... ";
headerBg.style.backgroundImage = "url('" + imageURL + "')";

サンプル

<griddles-ui-card>のサンプルである「Yummy - demo」は、以上のような方法でヘッダーの背景画像をキーワードに応じてランダムに変更しています。よろしければご覧ください。

*1:shadow DOMなので、document.getElementById や document.querySelector ではアクセスすることができません。

*2:「core-scroll-header-panel」はオープンソースなので、自由にコードを読み、編集することができます。