主页 / 问题 / 966422
Accepted
Артём Графский
Asked:2020-04-07 04:32:45 +0000 UTC2020-04-07 04:32:45 +0000 UTC

帮助滚动效果

  • 772

帮助制作漂亮的滚动效果（当背景中的图片停止时）并且网站继续滚动。

一个例子是 YouTube 上任何频道的标题

https://www.youtube.com/channel/UC8omHTwO56vleASFsIE4zTg

或者这里是登录页面（在订阅我们的新闻部分）

http://preview.themeforest.net/item/dj-bishop-dj-personal-page-html-template-with-visual-builder/full_screen_preview/21331278?_ga=2.167736055.853860724.1552740739-505840352.1552242637

告诉我如何实施？最好推荐一个插件）。

javascript

2 个回答

  1. Best Answer

    你是这个意思吗？

    body {
  margin:0;
}

div{
  text-align: center;
  min-height: 200px;
  line-height: 200px;
  font-size: 100px;
  color: red;
}

#bg1 {
  background: url(https://i.imgur.com/cdqfoqZ.png);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

#bg2{
  background: url(https://i.imgur.com/tbmyMTo.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
    <div id="bg1">1</div>
<div>2</div>
<div id="bg2">3</div>
<div>2</div>
<div id="bg1">1</div>
<div>2</div>
<div id="bg2">3</div>

    • 1

  2. 如果您需要完全修复，那么您可以使用通常的方法background-attachment: fixed;

    *{
  margin: 0;
  padding: 0;
}

.header{
  height: 300px;
  background: url('https://www.pastinfo.am/news_images/249/745971_2/f5badf7fabcb6b_5badf7fabcba8.jpg');
  background-position: center top;
  background-attachment: fixed;
 }
 
 .content{
  background: #fff;
  padding: 20px 20px 500px;
 }
    <div class="header"></div>
<div class="content">
  text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content
</div>

    如果你想让前一个块也移动，但更慢，你可以改变它top，translateX或者background-position在滚动时，取决于滚动量

    const header = document.querySelector('.header');

document.addEventListener('scroll', () => {
  header.style.top = document.documentElement.scrollTop/2 + 'px';
  //header.style.transform = `translateY(${document.documentElement.scrollTop/2}px)`;
  //header.style.backgroundPositionY = `${document.documentElement.scrollTop/2}px`;
});
    *{
  margin: 0;
  padding: 0;
}

.header{
  position: relative;
  height: 300px;
  background: url('https://www.pastinfo.am/news_images/249/745971_2/f5badf7fabcb6b_5badf7fabcba8.jpg');
  background-position: center top;
 }
 
 .content{
  position: relative;
  background: #fff;
  padding: 20px 20px 500px;
 }
    <div class="header"></div>
<div class="content">
  text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content
</div>

    或者有一个 parallax.js 插件，有很多可能 - https://github.com/wagerfield/parallax

    • 1

相关问题