ScrollingBannerLayout.json

{
    "document": {
        "type": "APL",
        "version": "1.4",
        "import": [
            {
                "name": "alexa-layouts",
                "version": "1.2.0"
            }
        ],
        "layouts": {
            "myLayout": {
                "parameters": [
                    "itemNumber"
                ],
                "items": [
                    {
                        "type": "Container",
                        "items": [
                            {
                                "type": "Container",
                                "padding": "@marginHorizontal",
                                "items": {
                                    "type": "Text",
                                    "text": "Item ${itemNumber}"
                                }
                            }
                        ]
                    }
                ]
            }
        },
        "mainTemplate": {
            "item": {
                "type": "Container",
                "width": "100%",
                "height": "100%",
                "items": [
                    {
                        "type": "Container",
                        "position": "absolute",
                        "width": "100%",
                        "height": "100%",
                        "items": [
                            {
                                "type": "Sequence",
                                "data": [
                                    1,
                                    2,
                                    3,
                                    4,
                                    5,
                                    6,
                                    7,
                                    8,
                                    9,
                                    10,
                                    11,
                                    12,
                                    13,
                                    14,
                                    15
                                ],
                                "width": "100%",
                                "grow": 1,
                                "firstItem": {
                                    "type": "AlexaImage",
                                    "imageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
                                    "imageAspectRatio": "standard_landscape",
                                    "imageScale": "best-fill",
                                    "imageWidth": "100%",
                                    "imageHeight": "40vh"
                                },
                                "items": [
                                    {
                                        "type": "myLayout",
                                        "itemNumber": "${data}"
                                    }
                                ],
                                "onScroll": [
                                    {
                                        "type": "SetValue",
                                        "componentId": "frameHeaderBack",
                                        "property": "opacity",
                                        "value": "${event.source.position * 10}"
                                    },
                                    {
                                        "type": "SetValue",
                                        "componentId": "DebugText",
                                        "property": "text",
                                        "value": "${event.source.position * 10}"
                                    }
                                ]
                            },
                            {
                                "type": "Container",
                                "position": "absolute",
                                "items": [
                                    {
                                        "type": "Frame",
                                        "id": "frameHeaderBack",
                                        "backgroundColor": "black",
                                        "width": "100vw",
                                        "height": "100%",
                                        "position": "absolute",
                                        "opacity": 0
                                    },
                                    {
                                        "type": "AlexaHeader",
                                        "id": "Header",
                                        "headerBackButton": true,
                                        "headerTitle": "Item Home",
                                        "width": "100vw"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        }
    },
    "datasources": {},
    "sources": {}
}