Инстаграм — одна из самых популярных социальных сетей во всем мире. Сегодня я расскажу вам о функции Instagram, при которой при лайке публикации в приложении Instagram Like App появляется сердечко. Когда мы дважды щелкаем по любому сообщению, на нем появляется всплывающее окно с сердечком, которое означает, что вам понравилось сообщение. Сегодня мы собираемся изучить только эту функцию.
В этом уроке мы будем с душой создавать функцию, похожую на публикацию в Instagram, с использованием HTML, CSS и JavaScript, что включает в себя создание страницы публикации, на которой пользователи смогут прокручивать и просматривать опубликованные изображения.
Как создать Instagram как функцию приложения
К концу этого поста в блоге вы поймете, как HTML, CSS и JavaScript работают вместе, создавая визуально привлекательную и удобную для пользователя функцию, похожую на публикацию в Instagram, которая отлично смотрится на всех устройствах. Итак, давайте не будем терять времени и приступим к созданию страницы публикации в Instagram.
Создать HTML-страницу для показа публикации в Instagram
Это HTML-файл для нашего Instagram ниже. Здесь мы используем HTML-скрипт для создания содержимого пользовательского интерфейса публикации в Instagram. Мы добавили открытку и одно изображение, а также значок сердечка.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Instagram like 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="container"> <img src="https://images.unsplash.com/photo-1534008757030-27299c4371b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"> <i class="ri-heart-3-fill"></i> </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{ width: 100%; height: 100%; } body{ display: flex; align-items: center; justify-content: center; background: cornflowerblue; } .container{ height: 400px; width: 300px; background: #fff; position: relative; border-radius: 10px; text-align: center; overflow: hidden; } .container img{ height: 100%; width: 100%; object-fit: cover; object-position: top; border-radius: 10px; } .container i{ color: white; font-size: 100px; position: absolute; top: 30%; left: 50%; transform: translate(-50%,50%) scale(0); opacity: 0; transition: transform ease 0.5s; }
Создайте файл JavaScript для реализации функции публикации лайков.
В-третьих, вставьте следующие коды в файл script.js.
script.js
let container = document.querySelector(".container"); let icon = document.querySelector("i"); container.addEventListener("dblclick", function () { icon.style.transform = "translate(-50%,50%) scale(1)"; icon.style.opacity = 0.8; icon.style.color = "red"; setTimeout(function () { icon.style.opacity = 0; }, 1000); setTimeout(function () { icon.style.transform = "translate(-50%,50%) scale(0)"; }, 1000); });
Нажмите на сообщение в блоге ниже
https://webscodex.com/build-instagram-like-app-in-html-css-and-javascript/