Multiple panoramas can be joined together into a virtual tour using Pannellum’s tour feature. A fade animation between scenes can be configured using the sceneFadeDuration parameter. See the hot spots example for more information on placing the hot spots used to navigate between scenes.


<iframe width="600" height="400" allowfullscreen style="border-style:none;" src=""></iframe>



    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=""/>
    <script type="text/javascript" src=""></script>
    #panorama {
        width: 600px;
        height: 400px;

<div id="panorama"></div>
pannellum.viewer('panorama', {   
    "default": {
        "firstScene": "circle",
        "author": "Matthew Petroff",
        "sceneFadeDuration": 1000

    "scenes": {
        "circle": {
            "title": "Mason Circle",
            "hfov": 110,
            "pitch": -3,
            "yaw": 117,
            "type": "equirectangular",
            "panorama": "/images/from-tree.jpg",
            "hotSpots": [
                    "pitch": -2.1,
                    "yaw": 132.9,
                    "type": "scene",
                    "text": "Spring House or Dairy",
                    "sceneId": "house"

        "house": {
            "title": "Spring House or Dairy",
            "hfov": 110,
            "yaw": 5,
            "type": "equirectangular",
            "panorama": "/images/bma-0.jpg",
            "hotSpots": [
                    "pitch": -0.6,
                    "yaw": 37.1,
                    "type": "scene",
                    "text": "Mason Circle",
                    "sceneId": "circle",
                    "targetYaw": -23,
                    "targetPitch": 2


Pannellum is developed on GitHub by Matthew Petroff.
CDN via KeyCDN.