I Built JavaScript-Powered Minimap Scroll Animation

Summary

In this tutorial, the creator explores a unique mini map scroll animation, inspired by the Artificial Garage site. They guide viewers through building the feature using pure JavaScript, without plugins or external libraries. The project includes a dynamic light mode that adjusts based on scroll depth, enhancing user experience. The video covers setting up HTML, CSS for styling and responsive design, and JavaScript for interactive elements, providing a comprehensive walkthrough for developers looking to implement a visually appealing and functional mini map.

Takeaways

• 🌟 The video introduces a creative web project focusing on a mini map scroll animation without using plugins or scroll triggers.
• 🎨 The project integrates a dynamic light mode that changes the theme based on the user's scroll depth, enhancing user experience.
• 📝 The HTML structure includes a navigation bar, a gallery section with a mini map and main images, and a footer with placeholder content.
• 🖼️ The mini map features a preview container for thumbnail images and an active image indicator that highlights the current view.
• 🔧 JavaScript is used to manipulate the position of elements based on user scroll actions, creating a synchronized scroll effect between the main content and the mini map.
• 🎨 CSS is utilized to style the page, including responsive design elements through media queries to adjust image item sizes on smaller screens.
• 🛠️ The 'get element top' function is crucial for calculating the distance from the top of the page to any given element, aiding in scroll synchronization.
• 🔄 The 'handle scroll' function updates the mini map's position in real-time as users scroll, ensuring a seamless visual representation of the user's location within the content.
• 🌓 The theme switching logic is based on scroll depth, with a toggle point set at four times the viewport height to dynamically change the page's appearance.
• 🔗 The 'handle scroll' and 'check scroll' functions are attached to the window's scroll event to ensure the page responds dynamically to user interactions.

Q & A

What was the main motivation behind the project described in the script?

The main motivation was to try something new and different from the usual sliders, landing pages, and menus, which led to the decision to recreate a mini map scroll animation using vanilla JavaScript without any plugins, libraries, or scroll triggers.

What is the inspiration for the mini map scroll animation?

The inspiration came from a site called 'artificial garage' by Dennis Nanberg, which featured an amazing mini map scroll animation that caught the creator's eye.

What are the key features of the mini map implementation in the project?

The mini map includes a preview container with thumbnail images and an active image indicator that highlights the part of the mini map currently in view. It also features a sticky position to remain in place as the user scrolls.

How is the layout of the HTML structure designed for this project?

The layout consists of a wrapper with a navigation bar, a gallery section split into a mini map and main images, and a generic container at the bottom filled with placeholder content.

What is the purpose of the 'item preview' divs within the mini map?

The 'item preview' divs are used to wrap each thumbnail image in the mini map, allowing for easy manipulation and duplication to fill the mini map for the demo.

How does the CSS styling support the light and dark mode functionality?

The CSS includes a class toggle on the wrapper that switches the background and text colors to accommodate both light and dark modes as the user scrolls.

What is the role of the 'get element top' function in the JavaScript implementation?

The 'get element top' function calculates the distance from the top of the page to any given element, which is vital for determining the exact position of images on the page and syncing the scroll position with the mini map preview.

How is the scrolling experience synchronized with the mini map preview?

As the user scrolls, the position of the mini map preview is updated proportionally to the scroll position within the images container, ensuring a seamless visual representation of where the user is in the images set.

What is the significance of the multiplier value 2.84 in the scroll animation?

The multiplier value 2.84 dictates the maximum translation of the preview container, determining how far the bottom of the preview should move by the end of the scroll range, which is crucial for fine-tuning the synchronization of the preview with the scrolling content.

How does the theme switching based on scroll depth enhance the user experience?

The theme switching based on scroll depth dynamically changes the page's appearance to either light or dark mode as the user scrolls, enhancing the user experience by adapting the page's theme to the scrolling depth.

How are the scroll event listeners attached to ensure dynamic responses to user interactions?

The 'handle scroll' and 'check scroll' functions are attached to the window's scroll event, ensuring that the page responds dynamically to user interactions as they navigate through the content.

Outlines

00:00

🌟 Introduction to Mini Map Scroll Animation

The speaker expresses a desire to explore a new and trendy web design element, the mini map. They were inspired by a mini map scroll animation on 'artificial garage' and decided to recreate it using vanilla JavaScript. The project aims to integrate a dynamic light mode that changes the theme based on scroll position, all without plugins or scroll triggers. The video encourages viewers to like and subscribe before diving into the tutorial. The tutorial starts with setting up the HTML structure, which includes a navigation bar, a gallery section divided into a mini map and main images, and a container for placeholder content. Each thumbnail in the mini map is wrapped in a div called 'item preview', and the main images are housed within a structure that includes an image and a text description.

05:02

🎨 Styling the Mini Map and Gallery

The speaker moves on to the styling part of the project, starting with resetting margins and paddings, setting box-sizing to border-box, and specifying the font family. The wrapper is set to full width and height with a starting black background and a transition property for color animation based on scroll events. Images are styled to occupy 100% of their container's width and height with an 'object-fit' property set to 'cover'. Links, paragraphs, and headers are given generic styling properties. The navigation bar is positioned at the top using 'position: fixed' and styled with 'Flexbox'. The gallery section is made to take the entire available space, with the mini map set to 'position: sticky' and covering 25% of the width and full viewport height. The mini map has a black background that changes color during scrolling, and the active image indicator is styled to stand out against varying backgrounds. The preview container is designed to scroll within the mini map, and the main images take up the remaining space with specified dimensions. A light mode class toggle is introduced for the wrapper to switch between light and dark themes as the user scrolls. Media queries are added for responsiveness on smaller screens.

10:03

💻 Implementing JavaScript for Interactive Features

The tutorial concludes with the implementation of JavaScript to bring interactivity to the project. The speaker selects key elements such as the main container for images, the preview section, and the mini map itself. A function called 'get element top' is created to calculate the distance from the top of the page to any given element, which is crucial for syncing the scroll position with the mini map preview. The 'handle scroll' function updates the position of the mini map as the user scrolls, creating a seamless scrolling experience. A multiplier value is introduced to dictate the maximum translation of the preview container, which can be adjusted based on the project's specific requirements. The theme switching logic is implemented based on scroll depth, with a toggle point set at four times the viewport height to switch the page's theme dynamically. Finally, the 'handle scroll' and 'check scroll' functions are attached to the window's scroll event to ensure the page responds dynamically to user interactions.

Keywords

💡Mini Map

A 'Mini Map' in the context of the video refers to a small, interactive map that provides a visual overview of a larger area or content. It is used to navigate through a website's content more intuitively. In the video, the creator aims to recreate a mini map scroll animation that was found on the 'artificial garage' site, showcasing how to implement such a feature using vanilla JavaScript without relying on plugins or additional libraries.

💡Scroll Animation

A 'Scroll Animation' is a visual effect that occurs as a user scrolls through a webpage. It can include elements moving, changing size, or transforming in appearance. The video describes creating a mini map with a scroll animation that updates as the user navigates through different sections of the website, enhancing the user experience by providing a dynamic visual representation of the content being viewed.

💡Vanilla JavaScript

Vanilla JavaScript refers to JavaScript code that is written without the use of external libraries or frameworks. It is the core JavaScript language without any additional features provided by libraries like jQuery or React. The video emphasizes the use of vanilla JavaScript to create the mini map and scroll animation, showcasing the capabilities of the language itself without relying on external tools.

💡Dynamic Light Mode

The 'Dynamic Light Mode' mentioned in the video refers to a feature that changes the theme of a website based on user interaction, such as scrolling. As the user scrolls, the theme of the website transitions from a light mode to a dark mode, providing a responsive and adaptive user experience. This feature is integrated into the website using JavaScript, demonstrating how to manipulate styles based on scroll events.

💡HTML Structure

The 'HTML Structure' is the arrangement of HTML elements that define the layout and content of a webpage. In the video, setting up the HTML structure involves creating a wrapper, a navigation bar, a gallery section, and a content container. This structure is essential for organizing the elements of the page and ensuring that the mini map and scroll animation function correctly.

💡CSS Styling

CSS Styling is the use of Cascading Style Sheets to define the appearance of HTML elements. The video discusses various CSS properties used to style the navigation bar, gallery, and content container, including positioning, dimensions, colors, and transitions. Proper CSS styling is crucial for creating a visually appealing and functional user interface.

💡JavaScript Manipulation

JavaScript Manipulation refers to the process of dynamically altering the content, structure, style, or behavior of HTML elements using JavaScript. In the video, the creator discusses how to manipulate elements like the mini map and preview section to respond to scroll events, creating a synchronized scrolling experience and theme switching.

💡Sticky Positioning

Sticky Positioning is a CSS positioning property that keeps an element in a fixed position relative to the viewport, even when the user scrolls. In the video, the mini map is given a sticky position to ensure it remains visible and in place as the user scrolls through the gallery section, enhancing the navigational aspect of the mini map.

💡Flexbox

Flexbox is a CSS layout mode that allows for the efficient arrangement of items within a container, even when their size is unknown or dynamic. The video mentions using Flexbox to space out the links in the navigation bar and to align the text within the image descriptions. Flexbox provides a flexible and responsive layout that adapts to different screen sizes and content changes.

💡Media Queries

Media Queries are CSS techniques that apply different styles based on the device characteristics, such as screen size, resolution, or orientation. In the video, media queries are used to adjust the size of image items on smaller screens, ensuring that the layout remains responsive and visually appealing across various devices.

Highlights

Introduction to creating a mini map scroll animation with vanilla JavaScript.

Inspiration from the site 'artificial garage' by Dennis Nanberg for the mini map design.

Challenge to recreate the mini map without using plugins or scroll triggers.

Integration of a dynamic light mode that changes the theme based on scroll.

Setting up the HTML structure with a navigation bar, gallery section, and placeholder content.

Designing the gallery with a mini map and main images in a two-column layout.

Creating a preview container and active image indicator for the mini map.

Styling the navigation bar with fixed positioning and Flexbox for link spacing.

Using CSS to style links, paragraphs, and headers with generic properties.

Setting up the gallery with sticky positioning and a defined height for the mini map.

Styling the active image indicator with a solid white border and mix-blend-mode.

Creating a preview container with a defined height and Flexbox for thumbnail alignment.

Styling the images section with a specified width and height for the main content.

Implementing a class toggle for light and dark mode based on scroll depth.

Adding media queries for responsive design on smaller screens.

Selecting key elements with document.querySelector for JavaScript manipulation.

Creating a function to calculate the distance from the top of the page to any given element.

Syncing the scroll position with the mini map preview using JavaScript.

Defining a handle scroll function to update the mini map position during scrolling.

Adding logic to handle theme switching based on scroll depth.

Attaching event listeners for dynamic responses to user interactions.

Transcripts

this time around I found myself growing

a bit tired of the usual sliders landing

pages and menus we typically create I

wanted to try something new so we are

diving into something a bit different

and very trendy mini Maps recently I

came across an amazing mini map scroll

animation on a site called artificial

garage by Dennis nanberg it really

caught my eye and I thought it would be

an interesting challenge to recreate

using vanilla JavaScript no plugins no

gap or scroll trigger we are also going

to integrate that Dynamic light mode

that changes the theme as you scroll all

using JavaScript before we get started

don't forget to hit that like button and

subscribe if you haven't already all

right let's get into it without wasting

any more time let's kick things off by

setting up our HTML structure we'll

begin with a wrapper inside this wrapper

the first thing we'll add is a

navigation bar it will have a couple of

links next up is the gallery section

this section will be split into two main

parts to create a clear layout on one

side the mini map and on the other the

main images it's like having two columns

within the mini map we'll have a preview

container holding all our thumbnail

images and an active image indicator

that will highlight the part of the mini

map currently in view each thumbnail

will be wrapped in a div called item

preview since we need 10 images for this

demo I'll set up one and then duplicate

it nine more times to fill up the mini

map

switching over to the right column the

images container this is where our main

visual content lives each image will be

housed within a item D split into two

sections item image for the image itself

and item copy for the text

description we'll replicate this setup

for each of 10 images

[Music]

[Music]

lastly at the bottom of our page I will

add a generic container filled with some

placeholder content a few headers and

image just to give it a bit more life

and context to our phage

[Music]

layout that's it let's move on to the

styling

part first up we'll reset the margins

and paddings for all elements and set

their box sizing to border box we'll

also specify the the font family for the

body the wrapper is key here it's set to

100% width and height with a starting

background color of black we'll

introduce a transition property as well

because we will animate the background

color based on scroll events images will

occupy 100% of their parents width and

height and I'll set their object fit to

cover to maintain their aspect ratio now

let's style our links paragraphs and

headers with some generic properties

including color font size font weight

text transform Etc

for the navigation I'm using position

fixed to keep it at the top employing

Flex box to space out the links and

setting some

[Music]

padding the container holding the dummy

website content will also take the

entire available space with some

padding moving on to the gallery this is

where it gets interesting I'll set its

position to relative s sticky positioned

elements behave

correctly the mini map particularly will

be sticky positioned with its stop set

to zero to keep it in place as you

scroll through the gallery it will cover

25% of the width and full viewport

height we will add some top padding to

push the preview images down and set the

Overflow to Hidden which is crucial for

our scrolling animation the mini map

will maintain a black background with a

transition property because we will

change its color during the scroll our

activ image indicator within the mini

map will be absolutely positioned about

300 pixels down centered horizontally

with the left and transform properties

it will have a specified width and

height a solid white

border its mix blend mode set to

difference will make it stand out

against varying

backgrounds the preview container itself

will also be absolutely positioned

centered horizontally and designed to

scroll within the mini map it will have

100% width and a defined height based on

our item previews we'll align these

thumbnails in a vertical column using

Flex boox currently the height of the

preview container is set based on the

number of the items and height of the

child elements however you can easily

verify or adjust this height by using

your browser's inspect tool simply hover

over the preview container to see the

exact

[Music]

value each item preview will have have a

relative position with fixed Dimensions

similar to our active image indicator

plus some padding for

spacing the images section taking up the

remaining 75% of the vid

will have items with a specified width

and

height inside the item image will

directly match the dimensions of the

item

itself with each item copy styled using

Flex boox to neatly align the text

to accommodate light mode I'll use a

class toggle on the rapper when

activated it will switch the background

and text colors accordingly this ensures

our page adopts to both light and dark

modes as the user Scrolls and to ensure

our design remains responsive I will add

some media queries to adjust the image

item sizes on smaller screens

[Music]

that wraps up our CSS let's move on to

the exciting part bringing all this to

life with JavaScript once the page is

ready we start by selecting the key

elements we will manipulate we grab the

main container for the images the

preview section inside our mini map and

the mini map itself using document.

query selector these elements are

crucial because it will be directly

adjusting their positions based on the

users scroll actions now to handle

positioning we we create a function

called get element top this function

calculates the distance from the top of

the page to Any Given element it works

by summing up all the distance from our

element to its highest ancestor this is

vital because it tells us exactly where

our images start on the

page using this function we determine

the top position of our images container

and calculate its End by adding the

height of the container to its starting

position knowing where our images start

and end allows us to sync the scroll

position with the mini map preview we

also grab the viewport height and the

height of our preview section these

measurements are essential to understand

how much space we have to work with as

the user

[Music]

Scrolls now you might be wondering where

the random multiplier of 2.84 for

preview Max translate variable came from

this value is crucial as it dictates the

maximum translation of the preview

container essentially it tells us how

far the bottom of the preview should

move by the end of our scroll range

remember we defined a fixed height for

the preview rapper in the

CSS through the experimentation I found

that 2.84 work perfectly based on that

fixed height however this value may vary

in your project depending on the number

of items in your mini map and the

dimensions of those items I encourage

you to play around with this multi

multiplier to see how it affects where

the preview stops as you scroll

adjusting this value will help you

fine-tune the synchronization of the

preview with the scrolling through your

content now here is where the magic

happens we Define a handle scroll

function that updates the position of

the mini map as you scroll through the

images as you scroll down we calculate

your scroll position relative to the

height of the images container this

calculation helps us determine how far

the preview should move within the mini

map we translate the preview vertically

using CSS Translate Y value the

translation is proportional to your

scroll position within the images

container ensuring that as you approach

the end of the images the preview also

reaches the end of the mini map this

sync creates a seamless scrolling

experience that visually represents

where you are in the images set

additionally we add a logic to handle

cases when the user Scrolls beyond the

images container if the user Scrolls

above the start of the images the

preview res at the

Top If the user Scrolls beyond the end

the preview remains at the maximum

possible translation

Point next we handle theme switching

based on the scroll depth we set a

toggle point at 4 times the viewport

height basically 400 viewport

height if the user Scrolls past this

point we add a light them class to the

rapper to switch its appearance this

Dynamic change enhances the user

experience by adopting the pages them to

scrolling depth finally we attach handle

scroll and check scroll functions to the

windows scroll event

this setup ensures that our page

responds dynamically to user

interactions as they navigate through

the content hope you found the video

helpful see you in the next one