Created
May 1, 2025 16:37
-
-
Save 27rabbitlt/54465c587d5d96cff51538138f78dccd to your computer and use it in GitHub Desktop.
simple native demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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