Инстаграм — одна из самых популярных социальных сетей во всем мире. Сегодня я расскажу вам о самой популярной функции Просмотры историй в Instagram, которая сегодня наиболее популярна в Instagram. Сегодня мы собираемся изучить только эту функцию.

В этом уроке мы создадим функцию Просмотр историй Instagram с публикацией, используя HTML, CSS и JavaScript.

Как создать просмотры историй в Instagram с помощью JavaScript

К концу этой статьи вы поймете, как HTML, CSS и JavaScript работают вместе, создавая визуально привлекательную и удобную функцию просмотра историй в Instagram, которая отлично смотрится на всех устройствах. Итак, давайте не будем терять времени и приступим к созданию страницы просмотра историй в Instagram.

Создать HTML-страницу для истории в Instagram

Это HTML-файл для нашего Instagram ниже. Здесь мы используем тег HTML для создания содержимого пользовательского интерфейса истории Instagram. Мы включаем карточку, одно изображение и немного CSS для стилизации для просмотра истории.

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/[email protected]/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>

Создайте CSS-файл для стилизации

Мы используем CSS для управления содержимым HTML, таким как цвет, ширина, высота, размер шрифта, отступы, поля и т. д.

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;
}

Создать файл JavaScript для истории просмотров в Instagram

В этом файле мы создаем массив для хранения статического изображения с помощью JavaScript. В этом массиве мы создали объект для изображения магазина, которое будет отображаться в истории пользователя Instagram.

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)
});

Нажмите на ссылку ниже, чтобы просмотреть дополнительные сообщения в блоге, а также вы можете найти кнопку загрузки на сайте.

https://webscodex.com/create-instagram-story-views-using-javascript/