Create Instagram Story views using JavaScript
Instagram is one of the most popular social media platforms worldwide. Today I am going to tell you about a most popular feature of Instagram story views which feature is most trending these day on Instagram. Today we are going to learn this feature only.
In this tutorial, we will be building an Instagram stories views feature with post using HTML, CSS and JavaScript.
Sharing my experience in recreating the Instagram stories modal using pure JavaScript. Here is the preview of Instagram Stories Modal:
See also: Build Instagram like App in HTML CSS and JavaScript
How to Create Instagram Story views using JavaScript
By the end of this blog post, you will understand how HTML,CSS and JavaScript work together to create a visually appealing and user-friendly Instagram Story views feature that looks great on all devices. So, let’s waste no time and start the steps to creating a Instagram story view page.
Folder Structure of Instagram Story View
Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here, the name of the root folder is instagram-story-view-feature. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.
Create HTML Page for Instagram Story
This is the HTML file for our Instagram below. Here, we are using the HTML tag to create the content of the Instagram story UI. We are including the card and one image and some CSS for styling to view story.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create Instagram story feature using html css and javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="full-screen"></div>
<div class="stories">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>Create CSS file for Styling
We are using CSS for managing the content of HTML like the content color, width, height, font size, padding, margin, etc.
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Roboto Slab', sans-serif;
}
html, body{
height: 100%;
width: 100%;
}
body{
background: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
.card{
height: 550px;
width: 350px;
background: #fff;
border-radius: 10px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.stories{
height: 90px;
width: 100%;
border-bottom:1px solid grey;
padding: 15px 5px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.stories::-webkit-scrollbar{
display: none;
}
.story{
border: 1px solid #155dfd;
height: 60px;
width: 60px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
margin-right: 7px;
}
.story img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.full-screen{
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
position: absolute;
display: none;
border-radius: 10px;
}Create JavaScript File for Instagram Views Story
In this file we are make a array for store static image using JavaScript. In this array we have make a object for store image to display on user Instagram story.
script.js
let array = [
{dp:"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", story:"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"},
{dp:"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", story:"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"},
{dp:"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", story:"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"},
{dp:"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1727&q=80", story:"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1727&q=80"},
{dp:"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", story:"https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"},
{dp:"https://images.unsplash.com/photo-1513490043969-e15088e02c8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", story:"https://images.unsplash.com/photo-1513490043969-e15088e02c8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"},
];
let parentElement = "";
let storyElement = document.querySelector(".stories");
array.forEach(function(element, index){
parentElement +=`<div class="story">
<img id="${index}" src="${element.dp}">
</div>`;
});
storyElement.innerHTML = parentElement;
storyElement.addEventListener("click", function(dets){
let image = array[dets.target.id].story;
document.querySelector(".full-screen").style.display = "block";
document.querySelector(".full-screen").style.backgroundImage = `url(${image})`;
setTimeout(function(){
document.querySelector(".full-screen").style.display = "none";
},3000)
});You can visit to my site for more best articles for your project or else. click on the below link.
https://webscodex.com/create-instagram-story-views-using-javascript/