ページをスクロールするとスムースなアニメーションで背景画像領域の高さが徐々に低くなり、最後にはタイトルだけになる「スクロールヘッダー」は個人的にとても気に入っているデザインの１つです。
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
ステップ１
Chrome Dev Editor で、Web Componentを扱うプロジェクトを生成します。詳細は以下の記事を参照してください。
自動生成されたbower_componentsフォルダの中から、core-scroll-header-panelを見つけてその中のcore-scroll-header-panel.htmlを開きます。
ステップ２
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」は、以上のような方法でヘッダーの背景画像をキーワードに応じてランダムに変更しています。よろしければご覧ください。
