Инстаграм — одна из самых популярных социальных сетей во всем мире. Сегодня я расскажу вам о самой популярной функции Просмотры историй в 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/