Hola a todos, soy Xiao Zhang
En este caso, se utiliza un conjunto de front-end de tres piezas para realizar una página web de diseño receptivo simple. Cuando la resolución de la pantalla cambia de forma adaptativa, el diseño de la página web cambiará automáticamente. El diseño de la página web es compatible tanto con PC como con terminales móviles.
Efecto de diseño de página web en la pantalla normal de la PC
Diseño de página móvil:
Además del diseño básico, con la ayuda de scrollreveal complementos , se agregan algunas animaciones a la página web,
Por ejemplo, cuando se abre una página por primera vez,
-
El icono de la izquierda aparece con un retraso de 500ms de izquierda a derecha, y la transparencia va de 100 a 0;
-
El título y la imagen del medio aparecen con un retraso de 400 ms de abajo hacia arriba, y la transparencia varía de 100 a 0;
Código
La parte del código html en este caso
- En el caso, incluso se utiliza una biblioteca de iconos y fuentes de Google, que se agregan al proyecto a través de CDN en la etiqueta de cabecera;
- Además, dado que el complemento scrollreveal se usa para realizar la animación en el caso, el complemento también se carga a través de CDN;
<!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>Website2 Responsitive</title>
<!-- boxicons link -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- remixionc link -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="style.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=Open+Sans:ital,wght@0,400;0,500;1,800&display=swap"
rel="stylesheet">
</head>
<body>
<div class="head">
<div class="logo">
LOGO
</div>
<div class="menu-bar">
<li>
<a href="#">Menu1</a>
</li>
<li>
<a href="#">Menu2</a>
</li>
<li>
<a href="#">Menu3</a>
</li>
<li>
<a href="#">Menu4</a>
</li>
</div>
<div id="mobile-bar" class="bx bx-menu">
</div>
</div>
<div class="content">
<div class="center">
<div class="left">
<span class="tag"> Some Tag </span>
<span class="title-top">Title After</span>
<span class="title">The Website</span>
<p class="desc"> e careful using this method in production. Without specifying a fixed version number,
Unpkg may delay your page load while it resolves the latest version. </p>
<div class="btn">
<a class="left-btn">Button1</a>
<a class="right-btn"><i class='bx bx-play-circle'></i> Playing</a>
</div>
</div>
<div class="right">
<img src="./static/logo-vuejs-min.png" />
</div>
</div>
<div class="left-icons">
<a><i class='bx bxl-twitter'></i></a>
<a><i class="ri-github-line"></i></a>
<a><i class="ri-vuejs-line"></i></a>
</div>
<div class="top-down">
<a><i class="ri-arrow-down-circle-line"></i></a>
</div>
</div>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="script.js"></script>
</body>
</html>
La parte JS del caso controla principalmente la aparición y desaparición de la barra de menú en el terminal móvil; y algunas animaciones flotantes
// 中部
const scrollRevealOpt1 = {
delay: 400,
distance: '100px',
duration: 600,
easing: 'cubic-bezier(0.5, 0, 0, 1)',
interval: 0,
opacity: 0,
origin: 'bottom'
}
const scrollRevealOpt2 = {
delay: 400,
distance: '100px',
duration: 500,
easing: 'cubic-bezier(0.5, 0, 0, 1)',
interval: 0,
opacity: 0,
origin: 'bottom'
}
// 左侧图标区域 动画效果配置
const leftIconsOpt = {
delay: 400,
distance: '45px',
duration: 600,
easing: 'cubic-bezier(0.5, 0, 0, 1)',
origin: 'left'
}
const leftcontent = document.querySelector('.content .left')
const rightcontent = document.querySelector('.content .right')
const mobileBar = document.getElementById('mobile-bar')
const leftIcons = document.querySelector('.left-icons')
ScrollReveal(scrollRevealOpt1).reveal(leftcontent);
ScrollReveal(scrollRevealOpt2).reveal(rightcontent);
ScrollReveal(leftIconsOpt).reveal(leftIcons)
const menuList = document.querySelector('.menu-bar')
mobileBar.onclick = () => {
menuList.classList.toggle('open')
mobileBar.classList.toggle('bx-x')
}
Código de sección CSS
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
height: 100vh;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
font-family: 'Open Sans', sans-serif;
position: relative;
}
.head {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 1rem 5rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 200;
}
.logo {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.menu-bar {
display: flex;
gap: 3rem
}
.menu-bar li {
list-style: none;
}
.menu-bar li a {
color: white;
text-decoration: none;
padding-bottom: 4px;
font-size: 18px;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.menu-bar li a:hover {
border-bottom: 2px solid white;
}
#mobile-bar {
position: fixed;
right: 5%;
top: 5%;
transform: translateY(-50%);
color: white;
font-size: 30px;
transition: all 0.3s ease;
cursor: pointer;
display: none;
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
min-height: 100vh;
align-items: center;
background: linear-gradient(245.59deg, #4d9559 0%, #38703d 28.53%, #133917 75.52%);
}
El código completo involucrado en el caso se puede obtener visitando Web2_Responsive