Skip to content

Instantly share code, notes, and snippets.

@27rabbitlt
Created May 1, 2025 16:37
Show Gist options
  • Save 27rabbitlt/54465c587d5d96cff51538138f78dccd to your computer and use it in GitHub Desktop.
Save 27rabbitlt/54465c587d5d96cff51538138f78dccd to your computer and use it in GitHub Desktop.
simple native demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WOW.js Hero Scroll</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
body,
html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero {
height: 100vh;
background: url('https://picsum.photos/id/1018/1920/1080') center center / cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.section {
display: flex;
padding: 100px 10%;
align-items: center;
justify-content: space-between;
background-color: #f5f5f5;
}
.section:nth-child(even) {
background-color: #e0e0e0;
flex-direction: row-reverse;
}
.text {
width: 45%;
font-size: 1.2em;
}
.image {
width: 45%;
}
.image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="hero">
Hero Background
</div>
<div class="section">
<div class="text wow animate__animated animate__fadeInLeft">
<h2>第一部分标题</h2>
<p>这是第一部分的文本内容,会在滚动时从左侧淡入。</p>
</div>
<div class="image wow animate__animated animate__fadeInRight">
<img src="https://picsum.photos/seed/pic1/600/400" alt="示例图片1">
</div>
</div>
<div class="section">
<div class="text wow animate__animated animate__fadeInLeft">
<h2>第二部分标题</h2>
<p>这是第二部分的文本内容,也会有滚动动画。</p>
</div>
<div class="image wow animate__animated animate__fadeInRight">
<img src="https://picsum.photos/seed/pic2/600/400" alt="示例图片2">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment