---
title: Adding a Scene
framework: applenews
role: article
role_heading: Article
path: applenews/adding-a-scene
---

# Adding a Scene

Control how the article’s opening section comes into view.

## Overview

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.

To implement a scene, you add a scene property to a section or chapter component. Apply a Scene In your working article.json file, 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": [             ...           ]         }       ]     },     ...   ],   ... } Previous Adding Animations Next Viewing the Finished Article for Advanced Design Tutorial 2

## See Also

### Related Documentation

- [Adding a Scene to a Chapter or a Section Header](applenews/adding-a-scene-to-a-chapter-or-a-section-header.md)
- [FadingStickyHeader](applenewsformat/fadingstickyheader.md)
- [Section](applenewsformat/section.md)

### Advanced Design Tutorial 2: Layout and Positioning

- [Creating a Complex, Layered Header](applenews/creating-a-complex-layered-header.md)
- [Creating a Floating Caption](applenews/creating-a-floating-caption.md)
- [Creating an Inset Pull Quote](applenews/creating-an-inset-pull-quote.md)
- [Creating an Inset Photo](applenews/creating-an-inset-photo.md)
- [Adding Color to Text Ranges](applenews/adding-color-to-text-ranges.md)
- [Adding Animations](applenews/adding-animations.md)
- [Viewing the Finished Article for Advanced Design Tutorial 2](applenews/viewing-the-finished-article-for-advanced-design-tutorial-2.md)