CodePen view

Apply a camera parallax effect on the hotspots layer.

configuration.json

{
    "camera":
    {
        "parallax": 0.4,

        "yaw":
        {
            "default": -110
        }
    },

    "story":
    {
        "uid": "parallax-story",
        "name": "Story with Parallax Effect",
        "slug": "parallax-story",
        "description": "This is sample of the parallax effect applied on hotspots",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first and only scene",

                "media":
                {
                    "uid": "media-0",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "Innerschweiz-no-planes.jpg"
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-plane-a917",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 200,
                                "theta": -103.7,
                                "phi": 9.6
                            }
                        },

                        "material":
                        {
                            "image": "plane-a917.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 167,
                                "height": 60
                            }
                        }
                    },

                    {
                        "uid": "hotspot-plane-a919",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 200,
                                "theta": 150.2,
                                "phi": 8.7
                            }
                        },

                        "material":
                        {
                            "image": "plane-a919.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 161,
                                "height": 60
                            }
                        }
                    },

                    {
                        "uid": "hotspot-plane-a912",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 400,
                                "theta": -69,
                                "phi": 4
                            }
                        },

                        "material":
                        {
                            "image": "plane-a912.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 173,
                                "height": 60
                            }
                        }
                    },

                    {
                        "uid": "hotspot-plane-a933",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 400,
                                "theta": 109.2,
                                "phi": 1.7
                            }
                        },

                        "material":
                        {
                            "image": "plane-a933.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 186,
                                "height": 60
                            }
                        }
                    },

                    {
                        "uid": "hotspot-plane-a915",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 750,
                                "theta": 90.9,
                                "phi": 0.2
                            }
                        },

                        "material":
                        {
                            "image": "plane-a915.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 199,
                                "height": 60
                            }
                        }
                    },

                    {
                        "uid": "hotspot-plane-a928",
                        "facingCenter": true,
                        "interactive": false,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 750,
                                "theta": -53.5,
                                "phi": 2.1
                            }
                        },

                        "material":
                        {
                            "image": "plane-a928.png",
                            "transparent": true
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 183,
                                "height": 60
                            }
                        }
                    }
                ]
            }
        ]
    }
}

Back to samples

3rd Jan 2017