大气磅礴的网页背景滑动效果

原创于 2022-04-25 21:05:27 发布 · 721 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

257 篇文章

订阅专栏

这篇博客展示了如何创建一个大气磅礴的网页背景滑动效果，适合宽屏网页，提供震撼的用户体验。通过使用HTML、CSS和JavaScript，用户可以通过键盘上下箭头、鼠标滚轮或者屏幕滑动进行导航。源码可供下载。

大气磅礴的网页背景滑动效果，效果真的很棒，特别适合宽屏的网页，效果很震撼。
效果如下：
请添加图片描述
主要代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> - Yet another slider</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Sen&amp;display=swap'>
  <link rel="stylesheet" href="./style/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="main">
    <h1>something</h1>
    <div class="content">
        <p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p>
    </div>
    <div class="buttons">
        <button class="next" onclick="go(-1)"></button>
        <button class="prev" onclick="go(1)"></button>
    </div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
  <script  src="./style/script.js"></script>

</body>
</html>