Как создать водный сайт с летающими пузырьками

Здравствуйте, ребята, сегодняшний урок посвящен водному сайту.

Первым делом мы создадим :
1- index.html
2- style.css
3- script.js

В HTML файле:

мы создадим основную структуру. Если вы находитесь в VS Code, выберите из предложений vs code «html:5» или «!», чтобы сделать это:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь мы свяжем CSS-файл с html-файлом.

<link rel="stylesheet" href="style.css">
Войти в полноэкранный режим Выйти из полноэкранного режима

Мы будем использовать это изображение для фона:

В файле CSS :

  • Сначала удалите основной стиль
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
Войти в полноэкранный режим Выйти из полноэкранного режима
  • отредактируйте тело и добавьте для него фоновое изображение
body {
    background-image: url(./background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

В HTML файле добавим

присвоим ему класс «container» и добавим в него h1 в него добавим «Under Water» и отредактируем CSS этого класса

<div class="container">
    <h1>Under Water</h1>
</div>

перед началом редактирования CSS контейнера нам нужно добавить шрифт

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

В CSS файле:

  • сначала мы хотим выровнять по центру «.container» и сделать отступы слева.
.container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
}

затем. нам нужно отредактировать CSS h1

.container h1 {
    color: white;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 3px;
    font-size: 48px;
}

на данный момент результат есть:

Затем мы создадим пузырьки:

для HTML :
мы добавим это:

<div class="bubbles"></div>

для CSS мы отредактируем «.bubble» и сделаем анимацию

.bubbles .bubble {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 46% 54% 40% 60% / 46% 41% 59% 54% ;
    box-shadow: 0 0 10px white inset;
    transform: translateY(-100%);
    animation-name: getDown;
    animation-iteration-count: infinite;
}

@keyframes getDown {
    0%{
        transform: translateY(-100%);
    } 100% {
        transform: translateY( calc(100vh + 100%) );
    }
}

для Javascript :

Сначала нам нужно связать javascript с HTML:

<script src="./script.js"></script>

затем (в файле Javascript) мы получим «.bubble» в переменной

let bubbles = document.querySelector('.bubbles')

Затем нам нужен цикл for, чтобы сделать все пузырьки, которые нам нужны. мы создадим случайное число для позиции X, анимации Дейли и продолжительности. в заключение

for (let i = 0; i < 30; i++) {
    let bubble = document.createElement('div')
    let posX = Math.random() * 100
    let daley = Math.random() * -10
    let duration = (Math.random() * 10) + 3

    bubble.className = 'bubble'
    bubble.style.left = posX + '%'
    bubble.style.animationDelay = daley + 's'
    bubble.style.animationDuration = duration + 's'


    bubbles.appendChild(bubble)
}

Результат:

Оцените статью
devanswers.ru
Добавить комментарий