ID/ lab

Exploring emerging technologies for visual storytelling

Jump to coordinates in sync with content

In this test, we want to see to what extent you can link html text blocks on a web page to a visual viewpoint. So that we can determine exactly what content (text, photo, video,...) is shown at predefined camera angles.

Setting the points of interest

As in the previous example, we choose some points of interest in the presentation. By pressing the c key, the legend coordinates can be made visible.
I choose these 3 points:
{x: -1.87, y: 0.43, z: -0.44} {x: -1.19, y: -0.26, z: 1.55} {x: 1.83, y: 0.19, z: 0.72}


                     <script>

    // Array of coordinates

    let pathCoordinates = [

                        {x: -1.87, y: 0.43, z: -0.44}

                        {x: -1.19, y: -0.26, z: 1.55}

                        {x: 1.83, y: 0.19, z: 0.72}

    ];

    

        // jQuery toggle for coordinates display

    $(document).keypress((e) => {

        if (e.key === 'c' || e.key === 'C') {

            coords.toggle();

        }

    });

    </script>

Adding content

Using HTML, I create a visualisation of the content. Structure or css doesn't matter much at this point. I personally use bootstrap css, but other frameworks or vanilla css are of course possible. Each beginning of a chapter, or point of interest, is named with class ‘.step’ followed with data-step=‘0’, data-step=‘1’,... according to the number of coordinates in the array.


                     <div id="tekstinhoud" class="row">

        <div class="col-lg-6">

            <div class="content">

                <div class="push"></div>

                <div class="step" data-step="0">

                    <div class="card">

                        <div class="card-body">

                            <h1>Onderliggende Content 1</h1>

                            <p>

                                Dit is de content onder de canvas die zichtbaar wordt na de volledige cirkelbeweging.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam purus eget nunc tincidunt,

                                sit amet tempor nisl auctor. Sed id felis aliquam, luctus libero a, tempor ex. Nulla vel est sed dui

                                rutrum maximus sed at mi. Aliquam dapibus efficitur dolor, ut auctor mauris auctor vel. Aliquam erat

                                volutpat. Sed laoreet odio nec nibh facilisis venenatis.

                            </p>

                        </div>

                    </div>



                </div>

                <div class="push"></div>

                <div class="step" data-step="1">...

Linking content and viewpoints

And then at this point we can link the predetermined views to the correct story block. From the moment a div with class .step appears in the viewport, it switches between coordinates.


                     <script>

 let scroller = scrollama();



    scroller

        .setup({

            step: '.step',

            offset: 0.8,

            progress: false

        })

        .onStepEnter(response => {

            let stepIndex = response.index;

            let currentCoord = pathCoordinates[stepIndex];



            // Start smooth transition for both up and down scroll

            initialCoord.set(camera.position.x, camera.position.y, camera.position.z);

            targetCoord.set(currentCoord.x, currentCoord.y, currentCoord.z);

            transitionStart = performance.now();

            transitionActive = true;



            $('.step').removeClass('is-active');

            $(response.element).addClass('is-active');

        });

        </script>

Finetuning and styling


            .step {

            opacity: 0.5;

            transition: opacity 0.3s ease;

            height: min-content;

        }

        .is-active {

            opacity: 1;

        }

        .push{

            margin-bottom: 50vh;

        }

Further fine-tuning and form enhancements can easily be made through css.

https://github.com/joostdb/LAB/blob/main/GST02.php

Demo

Jump to coordinates in sync with content

Toggle between path and free view.

"The photographer is the Swiss Army knife of the visual content industry, versatile and indispensable, crafting moments into timeless stories."