👨‍💻 HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥

96807 단어 webdev css javascript html

👋 안녕하세요, 사랑하는 개발자 여러분.👩‍💻👨‍💻, 오늘 우리는 HTML, CSS, JS, 그리고 GreenSock 애니메이션 라이브러리로 다른 응답 로그인 페이지를 쉽게 만들어서 애니메이션을 만드는 방법을 볼 수 있습니다.
HTML과 CSS로 로그인 페이지를 만드는 것은 매우 간단한 작업이지만, 무엇이 우리의 댓글을 더욱 재미있게 하는지 아십니까!네, 제가 토론해 보겠습니다.
그러나 그 전에 코드 튜토리얼의 시범을 살펴보자.너는 아래의 동영상을 볼 수 있다.

코드 자습서

If you want to see more web design tutorials just like these ! Please consider subscribing to our Youtube Channel.

이 글의 원본 코드는 Github에서 찾을 수 있으며, 모든 그림과 더 많은 내용을 포함하므로, 아래에 제시된 링크를 방문하여 원본 코드를 얻으십시오

Source Code Link

따라서 이 인코딩 블로그 글에서 우리는 두 가지 가장 기본적인 현대 구조 구축 시스템, 즉 CSS Flexbox와 CSS Grid를 소개할 것이다.
너는 이 두 사람의 주요 차이가 무엇인지 아니?
만약 그렇다면 당신은 절대적인 천재이지만, 그렇지 않다면, 간단하게 설명하자면, CSS Flexbox는 1차원 레이아웃 시스템이고, CSS grid는 2차원 레이아웃 시스템이다.
할 수 있다😆, 지금 이대로!인코딩 부분으로 들어갑시다, 여기 있습니다!!!
우선 프로젝트 폴더 구조부터 시작합니다👇

일반적으로 우리는 4개의 외부 라이브러리를 사용하는데, 그 중에서👇

Remixicon - 원본을 시작하는 아이콘 라이브러리

구글 글꼴 - 글꼴이 서비스 라이브러리에 포함되어 있습니다.

스크롤 애니메이션 - 스크롤할 때 페이지의 요소에 애니메이션을 설정할 수 있는 작은 라이브러리입니다.

그린스토크 GSAP - 현대 네트워크에 대한 전문적인 JavaScript 애니메이션을 만듭니다.

그래서 위의 프로젝트 폴더 구조를 보면 색인이 필요합니다.html, 스타일.css, 스크립트.단일 이미지 파일을 저장하는 js&IMG 폴더입니다.
따라서 이 파일들을 만든 후에 가장 좋아하는 코드 편집기로 이동합니다.
우선, 루트, HTML, 변수 리셋을 포함한 CSS 파일에서 기본적인 변경을 할 것입니다.

풍격css

/* ==== "Inter" FONT-FAMILY FROM FONTS.GOOGLE.COM ==== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
/* ==== ROOT RESET ==== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Inter", sans-serif;
}
*,
*::before,
*::after {
 box-sizing: border-box;
}
/* ==== CSS VARIABLES ==== */
:root {
 - primary-color: #335eea;
 - link-color: #506690;
 - btn-hover-color: #2b50c7;
 - lg-heading: #161c2d;
 - text-content: #869ab8;
 - fixed-header-height: 4.5rem;
}
/* ==== RESET HTML ==== */
body {
 width: 100%;
 height: 100vh;
 overflow-x: hidden;
 background-color: #fafbfb;
}
ul li {
 list-style-type: none;
}
a {
 text-decoration: none;
}
button {
 background-color: transparent;
 border: none;
 outline: none;
 cursor: pointer;
}

좋아, 좋아!뼈대, 즉 HTML을 추가합니다.
그러니 저희 색인에 들어오세요.html 파일로 기본 태그를 추가할 수 있습니다.

색인html

<!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>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>
 </body>
</html>

아주 좋아요!이제 조금 더 네비게이션을 만들어보도록 하겠습니다.
너 그거 알아?탐색 모음은 그래픽 사용자 인터페이스의 일부로서 방문자가 정보에 액세스할 수 있도록 도와줍니다.

할 수 있다😆, 현재, 색인에navbar에 태그를 추가합니다.html 파일

색인html

<!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>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
 <div class="logo">
 <h2>Devkit.</h2>
 </div>
<div class="nav_menu" id="nav_menu">
 <button class="close_btn" id="close_btn">
 <i class="ri-close-fill"></i>
 </button>
<ul class="nav_menu_list">
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">account</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">about</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">service</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">contact</a>
 </li>
 </ul>
 </div>
<button class="toggle_btn" id="toggle_btn">
 <i class="ri-menu-line"></i>
 </button>
 </nav>
 </header>
<! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>
 </body>
</html>

더 보기 좋게 위에 스타일을 추가합시다.

풍격css

/* ==== CONTAINER ==== */
.container {
 width: 100%;
}
@media screen and (min-width: 1040px) {
 .container {
 width: 1040px;
 margin: 0 auto;
 }
}
/* ==== HEADER ==== */
.header {
 height: var( - fixed-header-height);
 padding: 0 1.7rem;
}
/* ==== NAV ==== */
.nav {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
/* ==== LOGO ==== */
.logo h2 {
 font-size: 28px;
 color: var( - primary-color);
}
/* ==== NAV-MENU ==== */
.nav_menu_list {
 display: flex;
 align-items: center;
}
.nav_menu_list .nav_menu_item {
 margin: 0 2rem;
}
.nav_menu_item .nav_menu_link {
 font-size: 16.5px;
 line-height: 27px;
 color: var( - link-color);
 text-transform: capitalize;
 letter-spacing: 0.5px;
}
.nav_menu_link:hover {
 color: var( - primary-color);
}
.toggle_btn {
 font-size: 20px;
 font-weight: 600;
 color: var( - lg-heading);
 z-index: 4;
}
.nav_menu,
.close_btn {
 display: none;
}
.show {
 right: 3% !important;
}

결실

이제 디바이스의 차이에 응답할 수 있는 마지막 단계입니다.
따라서 이를 실현하기 위해 우리는 내비게이션 표시줄에 미디어 조회를 추가하여 우리의 스타일로 들어가야 한다.css 파일을 변경합니다.

풍격css

/* ==== MEDIA QURIES FOR RESPONSIVE DESIGN ==== */
@media screen and (min-width: 768px) {
 .toggle_btn {
 display: none;
 }
 .nav_menu {
 display: block;
 }
}
@media screen and (max-width: 768px) {
 .logo h2 {
 font-size: 23px;
 }
 .nav_menu {
 position: fixed;
 width: 93%;
 height: 100%;
 display: block;
 top: 2.5%;
 right: -100%;
 background-color: #fff;
 padding: 3rem;
 border-radius: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
 z-index: 50;
 transition: 0.4s;
 }
 .nav_menu_list {
 flex-direction: column;
 align-items: flex-start;
 margin-top: 4rem;
 }
 .nav_menu_list .nav_menu_item {
 margin: 1rem 0;
 }
 .nav_menu_item .nav_menu_link {
 font-size: 18px;
 }
}

여기에서, 우리는 네비게이션 링크가 이동 화면에 숨겨져 있고, 데스크톱 화면에서 볼 수 있다는 것을 관찰했다.그래서 여기에 작은 자바스크립트를 추가해서 내비게이션 링크를 메뉴 전환 단추를 누르면 볼 수 있도록 합니다
이제 우리 각본으로 들어가.논리적 js 파일 추가🧠

각본js

const navId = document.getElementById("nav_menu"),
 ToggleBtnId = document.getElementById("toggle_btn"),
 CloseBtnId = document.getElementById("close_btn");
// ==== SHOW MENU ==== //
ToggleBtnId.addEventListener("click", () => {
 navId.classList.add("show");
});
// ==== HIDE MENU ==== //
CloseBtnId.addEventListener("click", () => {
 navId.classList.remove("show");
});

GIF 형식 생성

"영웅"부분을 한층 더 제작하고, 이 부분은 귀사와 제품에 대한 일별을 정의합니다.

색인html

<!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>Responsive Landing Page using HTML, CSS & Javascript</title>
<! - ==== STYLE.CSS ==== →
 <link rel="stylesheet" href="./css/style.css" />
<! - ==== REMIXICON CDN ==== →
 <link
 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
 rel="stylesheet"
 />
<! - ==== ANIMATE ON SCROLL CSS CDN ==== →
 <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
 </head>
 <body>
 <! - ==== HEADER ==== →
 <header class="container header">
 <! - ==== NAVBAR ==== →
 <nav class="nav">
 <div class="logo">
 <h2>Devkit.</h2>
 </div>
<div class="nav_menu" id="nav_menu">
 <button class="close_btn" id="close_btn">
 <i class="ri-close-fill"></i>
 </button>
<ul class="nav_menu_list">
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">account</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">about</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">service</a>
 </li>
 <li class="nav_menu_item">
 <a href="#" class="nav_menu_link">contact</a>
 </li>
 </ul>
 </div>
<button class="toggle_btn" id="toggle_btn">
 <i class="ri-menu-line"></i>
 </button>
 </nav>
 </header>
<! - ==== HERO ==== →
 <section class="wrapper">
 <div class="container">
 <div class="grid-cols-2">
 <div class="grid-item-1">
 <h1 class="main-heading">
 Welcome to <span>Devkit.</span>
 <br />
 Develop anything.
 </h1>
 <p class="info-text">
 Build a beautiful, modern website with flexible components built
 from scratch.
 </p>
<div class="btn_wrapper">
 <button class="btn view_more_btn">
 view all pages <i class="ri-arrow-right-line"></i>
 </button>
<button class="btn documentation_btn">documentation</button>
 </div>
 </div>
 <div class="grid-item-2">
 <div class="team_img_wrapper">
 <img src="./img/team.svg" alt="team-img" />
 </div>
 </div>
 </div>
 </div>
 </section>
<! - ==== ANIMATE ON SCROLL JS CDN →
 <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
 <! - ==== GSAP CDN ==== →
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
 <! - ==== SCRIPT.JS ==== →
 <script src="./script.js" defer></script>

풍격css

/* ==== WRAPPER ==== */
.wrapper {
 width: 100%;
 padding-left: 1.7rem;
 padding-right: 1.7rem;
 padding-top: 5rem;
 margin-bottom: 5rem;
}
.grid-cols-2 {
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 4rem;
}
.grid-item-1 {
 padding-top: 5rem;
 padding-left: 1.5rem;
}
.main-heading {
 font-weight: 300;
 font-size: 40px;
 line-height: 55px;
}
.main-heading span {
 color: var( - primary-color);
}
.info-text {
 margin-top: 1.5rem;
 font-size: 19px;
 line-height: 28px;
 color: #334157;
}
.btn_wrapper {
 margin-top: 3.5rem;
 display: flex;
 width: 100%;
}
.btn {
 width: 110px;
 height: 50px;
 background-color: var( - primary-color);
 display: block;
 font-size: 16px;
 color: #fff;
 text-transform: capitalize;
 border-radius: 7px;
 letter-spacing: 1px;
 transition: 0.4s;
}
.btn:hover {
 transform: translateY(-3px);
 background-color: var( - btn-hover-color);
}
.view_more_btn {
 width: 180px;
 height: 55px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 letter-spacing: 0;
 color: #fff;
 font-weight: 500;
 margin-right: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
}
.view_more_btn i {
 margin-left: 0.7rem;
}
.view_more_btn:hover {
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.documentation_btn {
 width: 150px;
 height: 55px;
 font-size: 16px;
 font-weight: 500;
 color: #fff;
 letter-spacing: 0;
 background-color: #e1e7fc;
 color: #0e2a86;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
}
.documentation_btn:hover {
 background-color: #d7ddf1;
 transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.grid-item-2 {
 width: 100%;
 height: 100%;
}
.team_img_wrapper {
 width: 500px;
 max-width: 100%;
 height: 440px;
}
.team_img_wrapper img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}
@media screen and (max-width: 768px) {
 .logo h2 {
 font-size: 23px;
 }
 .nav_menu {
 position: fixed;
 width: 93%;
 height: 100%;
 display: block;
 top: 2.5%;
 right: -100%;
 background-color: #fff;
 padding: 3rem;
 border-radius: 10px;
 box-shadow: 0 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
 z-index: 50;
 transition: 0.4s;
 }
 .nav_menu_list {
 flex-direction: column;
 align-items: flex-start;
 margin-top: 4rem;
 }
 .nav_menu_list .nav_menu_item {
 margin: 1rem 0;
 }
 .nav_menu_item .nav_menu_link {
 font-size: 18px;
 }
 .close_btn {
 display: block;
 position: absolute;
 right: 10%;
 font-size: 25px;
 color: #50689e;
 }
 .close_btn:hover {
 color: #000;
 }
.wrapper {
 padding: 0 0.7rem;
 }
 .grid-item-1 {
 padding-left: 0rem;
 }
 .main-heading {
 font-size: 35px;
 }
 .view_more_btn {
 width: 140px;
 height: 55px;
 font-size: 13.5px;
 margin-right: 1rem;
 }
}
@media screen and (max-width: 991px) {
 .wrapper {
 padding-top: 3rem;
 }
 .grid-cols-2 {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 .grid-item-1 {
 order: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding-top: 0;
 }
 .main-heading {
 font-size: 32px;
 text-align: center;
 line-height: 40px;
 }
 .info-text {
 font-size: 16px;
 text-align: center;
 padding: 0.7rem;
 }
 .btn_wrapper {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .grid-item-2 {
 order: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 }
 .team_img_wrapper {
 width: 350px;
 height: 350px;
 }
}

결실

좋습니다. 우리는 큰 진전을 거두고 있습니다. 이제 마지막 구성 부분으로 들어갑니다. 이것은 특색 있는 정보와 페이지의 끝부분입니다.

색인html

<! - ==== NAVBAR ==== →
 <! - ==== HERO ==== →
<section class="wrapper">
 <div class="container">
 <div class="grid-cols-3">
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M9.75 17L9 20l-1 1h8l-1–1-.75–3M3 13h18M5 17h14a2 2 0 002–2V5a2 2 0 00–2–2H5a2 2 0 00–2 2v10a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Built for developers </span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
 ratione facilis animi voluptas exercitationem molestiae.
 </p>
 </div>
 </div>
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M17 14v6m-3–3h6M6 10h2a2 2 0 002–2V6a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002–2V6a2 2 0 00–2–2h-2a2 2 0 00–2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002–2v-2a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Designed to be modern</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
 ipsum esse corrupti. Quo, labore debitis!
 </p>
 </div>
 </div>
<div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M10 20l4–16m4 4l4 4–4 4M6 16l-4–4 4–4"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Documentation for everything</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
 nostrum voluptate totam ipsa corrupti vero!
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>
<footer></footer>

풍격css

/* ==== RESET CSS ==== */
/* ==== Navbar ==== */
/* ==== Hero Section ==== */
/*
.
.
.
.
.
*/
.grid-cols-3 {
 width: 100%;
 height: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 3rem;
 row-gap: 2rem;
 padding: 1rem;
}
.grid-col-item {
 height: 100%;
}
.icon {
 width: 100%;
 line-height: 40px;
}
.icon svg {
 width: 30px;
 height: 30px;
 color: #6b85d8;
}
.featured_info {
 width: 100%;
}
.featured_info span {
 width: 100%;
 display: block;
 font-size: 21px;
 line-height: 33px;
 color: var( - lg-heading);
}
.featured_info p {
 display: block;
 width: 100%;
 margin-top: 7px;
 font-weight: 400;
 color: #334157;
 line-height: 25px;
 font-size: 15.5px;
}
footer {
 width: 100%;
 background-color: var( - primary-color);
 height: 12px;
 margin-top: 8rem;
}
@media screen and (max-width: 768px) {
 .grid-cols-3 {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
 .featured_info p {
 line-height: 23px;
 font-size: 14px;
 }
}
@media screen and (max-width: 991px) {
 .featured_info span {
 font-size: 19px;
 }
}

결실

이제 이 글을 끝내고 애니메이션에 스크롤 속성을 추가합니다. 이 속성을 추가하기 위해서는 HTML 파일에 data- 속성을 추가한 다음 스크립트 js에서 초기화해야 합니다.
우리 의 특색 부분 을 조금 바꾸자. 바로👇

<section class="wrapper">
 <! - ==== ADDITION OF data- attribute ==== →
 <div class="container" data-aos="fade-up" data-aos-duration="1000">
 <div class="grid-cols-3">
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M9.75 17L9 20l-1 1h8l-1–1-.75–3M3 13h18M5 17h14a2 2 0 002–2V5a2 2 0 00–2–2H5a2 2 0 00–2 2v10a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Built for developers </span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
 ratione facilis animi voluptas exercitationem molestiae.
 </p>
 </div>
 </div>
 <div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M17 14v6m-3–3h6M6 10h2a2 2 0 002–2V6a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002–2V6a2 2 0 00–2–2h-2a2 2 0 00–2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002–2v-2a2 2 0 00–2–2H6a2 2 0 00–2 2v2a2 2 0 002 2z"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Designed to be modern</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
 ipsum esse corrupti. Quo, labore debitis!
 </p>
 </div>
 </div>
<div class="grid-col-item">
 <div class="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 stroke-width="2"
 d="M10 20l4–16m4 4l4 4–4 4M6 16l-4–4 4–4"
 />
 </svg>
 </div>
 <div class="featured_info">
 <span>Documentation for everything</span>
 <p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
 nostrum voluptate totam ipsa corrupti vero!
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>

각본js

// ==== Animate on Scroll Initialize ==== //
AOS.init();

js 파일에 데이터-attribute와 initialize AOS를 추가하면 작은 페이드 효과를 줍니다.
잘 됐다!현재 자바스크립트를 사용하여 GSAP 애니메이션을 추가해서 프로젝트를 끝냅니다.

각본js

// ==== GSAP Animations ==== //
// ==== LOGO ==== //
gsap.from(".logo", {
 opacity: 0,
 y: -10,
 delay: 1,
 duration: 0.5,
});
// ==== NAV-MENU ==== //
gsap.from(".nav_menu_list .nav_menu_item", {
 opacity: 0,
 y: -10,
 delay: 1.4,
 duration: 0.5,
 stagger: 0.3,
});
// ==== TOGGLE BTN ==== //
gsap.from(".toggle_btn", {
 opacity: 0,
 y: -10,
 delay: 1.4,
 duration: 0.5,
});
// ==== MAIN HEADING ==== //
gsap.from(".main-heading", {
 opacity: 0,
 y: 20,
 delay: 2.4,
 duration: 1,
});
// ==== INFO TEXT ==== //
gsap.from(".info-text", {
 opacity: 0,
 y: 20,
 delay: 2.8,
 duration: 1,
});
// ==== CTA BUTTONS ==== //
gsap.from(".btn_wrapper", 
 opacity: 0,
 y: 20,
 delay: 2.8,
 duration: 1,
});
// ==== TEAM IMAGE ==== //
gsap.from(".team_img_wrapper img", {
 opacity: 0,
 y: 20,
 delay: 3,
 duration: 1,
});

And that's it guys here we end our project! Thank you so much for reading the post till the end !!! Please Make sure you check out my Youtube Channel where I post this kind of coding tutorial.

감사합니다!즐거움 코드

Reference

이 문제에 관하여(👨‍💻 HTML CSS 및 JS를 사용하여 응답 로그인 페이지 만들기🔥), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ananiket/create-a-responsive-landing-page-using-html-css-js-b7m

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

AWS Fargate에 대한 CircleaCI(등)를 통한 완전 자동/반자동 설계

useEffect부터 useMemo를 활용해볼까요?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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