Hello everyone, I'm Xiao Zhang
In this case, a three-piece front-end set is used to realize a simple responsive layout webpage. When the screen resolution changes adaptively, the webpage layout will automatically switch. The webpage layout is compatible with both PC and mobile terminals.
Web page layout effect under normal PC screen
Mobile page layout:
In addition to the basic layout, with the help of scrollreveal plug-ins , some animations are added to the webpage,
For example, when a page is first opened,
-
The icon on the left appears with a delay of 500ms from left to right, and the transparency ranges from 100 to 0;
-
The title and picture in the middle appear with a delay of 400ms from bottom to top, and the transparency ranges from 100 to 0;
Code
The html code part in this case
- In the case, even an icon library and Google fonts are used, which are added to the project through CDN in the head tag;
- In addition, since the scrollreveal plug-in is used to realize the animation in the case, the plug-in is also loaded through 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>
The JS part of the case mainly controls the appearance and disappearance of the menu bar on the mobile terminal; and some floating animations
// 中部
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')
}
CSS section code
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%);
}
The complete code involved in the case can be obtained by visiting Web2_Responsive