Scrollytelling
A technique often used to create engaging and interactive content that keeps the user interested and encourages them to continue scrolling down the page.
Madonna
Build with Svelte Javascript framework and SvelteKit.
Your screen has a portrait orientation.
Scrollytelling
Scrollytelling is a form of digital storytelling that allows the storyteller to present information in a visually engaging way. It typically involves scrolling through a webpage or presentation, with each scroll revealing new information or images.
Some of the advantages of using scrollytelling as a storytelling method include the ability to present complex information in a simple and intuitive way, the ability to engage the reader's attention with visually appealing graphics and animations, and the ability to create a more immersive and interactive experience for the reader.
"Scrollytelling is a technique that combines storytelling with scrolling to create a more engaging and interactive experience for the viewer."
Images is important elements on a webpage
Images can help to make a webpage more visually appealing and can help to break up large blocks of text, making the page easier to read and navigate.
Additionally, images can help to illustrate ideas and concepts, making them easier for the viewer to understand.
Furthermore, well-chosen images can help to enhance the overall aesthetic of a webpage, making it more attractive and engaging for the viewer.
Below is an example of a media grid where the column width is set to "wide" and the grid width is set to "narrow".
Additionally use of storytelling elements
Scrollytelling can be used to create immersive, interactive experiences that engage the reader or viewer and allow them to explore the story at their own pace. It can be particularly effective for longer, more complex narratives that might be difficult to present in a traditional, linear format.
To create a scrollytelling experience, designers and developers often use a combination of text, images, video, and other media elements, and use scrolling or other interactive elements to reveal the content as the user scrolls through the page.
Below is a image in full-bleed width with scrolly functionality.
Scrollytelling can be used to reveal a story while scrolling a set of images
This can be achieved by placing text or other media elements on top of the images that changes when the user is scrolling.
As the user scrolls through the image, the text or media elements are revealed, providing additional context or advancing the story..
Very high resolution images
High-resolution images can be good for storytelling because they provide clear, detailed, and sharp images that can help to engage the audience and make the story more impactful and memorable.
High-resolution images can also be used to show fine details and subtle nuances that may not be visible in lower-resolution images. This can be especially important for stories that involve close examination of objects, landscapes, or people.
IIIF gigapixel images a useful tool for storytelling because they allow the audience to explore the images and discover hidden details and stories within the image
Below is a image with IIIF functionality.
Scrollytelling can be used on large images.
IIIF gigapixel images can provide a rich and engaging experience for the audience and enhance the visual aspect of a story.
By using scrolling to reveal different parts of an image, scrollytelling can help to break up a large image into more manageable chunks and make it easier for the viewer to process the information.
Comparing photos
Comparing photos can be a powerful storytelling tool because it allows the audience to see the similarities and differences between two or more things, events, or people.
Infrared photos can help to reveal details and features of a painting that are not visible to the naked eye, such as underdrawings, alterations, and retouching.
This can provide valuable insights into the artist's creative process and the history of the painting. Second, infrared photos can be used to detect damage or deterioration in the painting that may not be visible in visible light.
Below is two photos compared.
Video in storytelling
Video is a powerful medium for digital storytelling because it allows creators to convey a message or tell a story in a visual and immersive way.
It can be more engaging and memorable than text or static images, as it adds an element of motion and can capture the attention of the viewer more effectively.
ideo is increasingly being used on social media and other digital platforms as a way to connect with and engage audiences. It can be shared easily and has the potential to reach a wide audience, making it a valuable tool for storytelling and marketing.
Below is a video in fullscreen.
3D models
3D models are a type of digital file that allows users to create and manipulate three-dimensional objects on a computer.
These models are commonly used in various fields, including architecture, engineering, and video game development, among others.
When it comes to the web, 3D models can be integrated into websites to create interactive and engaging content for users. This can be accomplished using various technologies, such as WebGL, which allows for the rendering of 3D graphics in web browsers.
Below is a 3D model of Madonnas head.
360 tours
Many museums and other exhibition venues are using 360 tours to allow users to virtually explore their exhibits and collections.
This can be a useful way to promote exhibitions, as it allows potential visitors to get a sense of what they can expect to see and can help to generate interest in the exhibition.
additionally, 360 tours can be a valuable tool for accessibility, as they can allow people who are unable to visit the exhibition in person to still experience it in a virtual way.