날아다니는 거품으로 물 웹사이트를 구축하는 방법

4910 단어 tutorialjavascriptcsswebdev
안녕하세요 여러분, 오늘의 튜토리얼은 물 웹사이트에 관한 것입니다.

가장 먼저 만들 것:
1- index.html
2- style.css
3- script.js



HTML 파일에서:

우리는 기본 구조를 만들 것입니다. VS Code에서 vs 코드 제안 "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 파일에서 "컨테이너"클래스를 추가하고 h1을 추가하고 "Under Water"를 추가하고 해당 CSS를 편집합니다.

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

    컨테이너의 CSS 편집을 시작하기 전에 추가해야 함font

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

    그 다음에. h1 CSS를 수정해야 합니다.

    .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를 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)
}

    결과:

    Webp를 사용하는 Jamstack의 Cloudinary
    Github의 Dependabot에 따라 저장소가 자동으로 생성됨 [PT/BR]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage