# Adding Parallax Behavior Create an illusion of multiple flat layers by causing the article body to overlap the header as the user scrolls. ## Discussion **On this page, you’ll learn how to add parallax behavior to your article.** You’ll first divide the article’s components into two sections. This requires moving a large amount of code. Then, you’ll simply add a `behavior` property on the upper section and complete the effect by giving the lower section an opaque background color.   ### Divide the Article Content into Sections Add sections to the article’s top-level `components` array and move all existing components into the new sections. This requires moving a large amount of code. 1. Copy the example code . 2. Paste the code inside the article’s top-level `components` array, after the opening bracket (`[`). 3. In your `article.json` file, cut your `header` component—including all its nested component arrays—to your clipboard. The code you are cutting begins with the opening brace (`{`) before `"role": "header"` and ends with a mix of five alternating braces and brackets (`}]}]}`). 4. In your `article.json` file, select the ellipses (`...`) in the first section. 5. Paste the copied code into `article.json`, replacing the line that you selected in the previous step. 6. In your `article.json` file, cut all components after the second section to your clipboard. The code you are cutting begins with the opening brace (`{`) before `"role": "heading1",` and ends with the closing brace (`}`) that ends your `tweet` component. 7. In your `article.json` file, select the ellipses (`...`) in the second section. 8. Paste the copied code into `article.json`, replacing the line that you selected in the previous step. 9. Delete the extra comma between the closing brace (`}`) that ends the second `section` component and the closing bracket (`]`) that ends the article’s top-level `components` array. Your code should look like the example code and . After you make these changes in your code, you can successfully preview your working `article.json` file in News Preview, but it won’t look any different until you add parallax behavior in . #### Section Components: Copy This Code ```json { "role": "section", "layout": "fullBleedLayout", "components": [ ... ] }, { "role": "section", "layout": "fullBleedLayout", "components": [ ... ] } ``` #### Section Components: Result (Collapsed) Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ { "role": "section", "layout": "fullBleedLayout", "components": [ ... ] }, { "role": "section", "layout": "fullBleedLayout", "components": [ ... ] } ], ... } ``` #### Section Components: Result (Expanded) Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ { "role": "section", "layout": "fullBleedLayout", "components": [ { "role": "header", "layout": "headerImageLayout", "style": { "fill": { "type": "image", "URL": "bundle://header.jpg", "fillMode": "cover", "verticalAlignment": "top", "horizontalAlignment": "center" } }, "components": [ { "role": "container", "layout": "fullBleedLayout", "style": "captionBarBackgroundStyle", "anchor": { "targetAnchorPosition": "bottom" }, "components": [ { "role": "caption", "textStyle": "captionLight", "layout": "halfMarginBothLayout", "text": "ABOVE: Sed ut pers piciatis unde omnis iste error sit volup tatem accusantium dolor emque, totam rem. (Attribution)" } ] } ] } ] }, { "role": "section", "layout": "fullBleedLayout", "components": [ { "role": "heading1", "layout": "heading1Layout", "text": "HEADING" }, ... { "role": "tweet", "layout": "noMarginLayout", "URL": "https://twitter.com/Urna_Semper/status/1480968065630285834" } ] } ], ... } ``` ### Add Parallax Behavior in the First Section Your article currently has two sections. You’ll use the first section’s `behavior` property to assign a parallax factor lower than 1, causing the first section to scroll more slowly than the default scroll speed. 1. Copy the example code . 2. Paste the code inside the first `section` component, after the line `"layout": "fullBleedLayout",` Your code should look like the example code . After you make this change in your code, you can preview your working `article.json` file in News Preview to see the changes in scroll speed. You might notice text becoming illegible as it covers the image. You’ll fix this in by adding a background color to the lower section. #### Behavior: Copy This Code ```json "behavior": { "type": "parallax", "factor": 0.8 }, ``` #### Behavior: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ { "role": "section", "layout": "fullBleedLayout", "behavior": { "type": "parallax", "factor": 0.8 }, "components": [ { "role": "header", "layout": "headerImageLayout", "style": { "fill": { "type": "image", "URL": "bundle://header.jpg", "fillMode": "cover", "verticalAlignment": "top", "horizontalAlignment": "center" } }, "components": [ ... ] } ] }, ... ], ... } ``` ### Define a ComponentStyle Object for Background Color To finish the parallax behavior, you need to add a background color to the lower section. Before you can do that, you must define a `ComponentStyle` object. 1. Copy the example code . 2. Paste the code between the closing brace (`}`) of the last `ComponentStyle` object and the closing brace for the whole `componentStyles` property. Your code should look like the example code . #### bodyBackgroundStyle: Copy This Code ```json , "bodyBackgroundStyle": { "backgroundColor": "#FFF" } ``` #### bodyBackgroundStyle: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "componentStyles": { ... "bodyBackgroundStyle": { "backgroundColor": "#FFF" } }, ... } ``` ### Use the Opaque Background with the Lower Section As a final step, you need to add a reference to the `ComponentStyle` object you just defined. To add the reference, in your `article.json` file, inside your second `section` component, add a property named `style` with a value of `"bodyBackgroundStyle"`. Your code should look like the example code . After you make these changes in your code, you can preview your working `article.json` file in News Preview to see that the lower section remains legible as it scrolls past the upper section. #### Opaque Background: Result Ellipses (`...`) indicate lines of code that have been omitted from this example. ```json { ... "components": [ { "role": "section", "layout": "fullBleedLayout", "behavior": { "type": "parallax", "factor": 0.8 }, "components": [ ... ] }, { "role": "section", "layout": "fullBleedLayout", "style": "bodyBackgroundStyle", "components": [ ... ] } ], ... } ``` ### Previous ### Next ## See Also [`object Parallax`](/documentation/AppleNewsFormat/Parallax) The behavior whereby a component moves at a speed different from the scroll speed. [`object ComponentStyle`](/documentation/AppleNewsFormat/ComponentStyle) The object for setting style properties for components, including background color and fill, borders, and table styles. [`object Section`](/documentation/AppleNewsFormat/Section) The component for organizing an article into sections. --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)