Adding a Scene
Control how the article’s opening section comes into view.
Overview
The fading sticky header scene causes the header to briefly “stick” to the top of the screen and then fade to a defined color.
On this page, you’ll learn how to add a scene to your article.
[Image]
To implement a scene, you add a scene property to a section or chapter component.
Apply a Scene
In your working
article.jsonfile, delete the parallax behavior from the first section. The code you are deleting begins with"behavior": {and ends with a closing brace and a comma (},).Copy the example code Scene: Copy This Code.
Paste the code inside the first section, replacing the behavior that you deleted in step 1.
Your code should look like the example code Scene: Result.
After you make this change in your code, you can preview your working article.json file in News Preview to see the fading sticky header scene.
Scene: Copy This Code
"scene": {
"type": "fading_sticky_header",
"fadeColor": "#000"
},Scene: Result
Ellipses (...) indicate lines of code that have been omitted from this example.
{
...
"components": [
{
"role": "section",
"layout": "fullBleedLayout",
"scene": {
"type": "fading_sticky_header",
"fadeColor": "#000"
},
"components": [
{
"role": "header",
"layout": "headerImageLayout",
"style": {
"fill": {
"type": "image",
"URL": "bundle://header.jpg",
"fillMode": "cover",
"verticalAlignment": "top",
"horizontalAlignment": "center"
}
},
"components": [
...
]
}
]
},
...
],
...
}