了解PARALLAX滚动效果-Javascript

如何解决了解PARALLAX滚动效果-Javascript

我有这个测试页面，我用我的基本JS技能来折磨。我目前正在研究另一个更认真的项目，并且在YouTube上看到了一个不错的{ Parallax滚动效果，所以我认为最好在 >严重的项目。

1。我会问你我是否正确理解代码

2。我会问你那部分代码是什么意思

以下是代码：

    let paral = document.querySelector('.paral');
let bubble = document.querySelector('.bubble');
let burgerimage = document.querySelector('.burgerimage');
let ximage = document.querySelector('.ximage');


window.addEventListener('scroll',() => {
  let curr = window.scrollY;

  bubble.style.left = curr * 0.5 + 'px';
  burgerimage.style.right = curr * .5 + 'px';
  ximage.style.bottom = curr * 3 + 'px';
})

* 1。了解代码：

如果我做对了，例如bubble.style.left = curr * 0.5 + 'px';这行的意思是：

获取气泡变量并将其从滚动速度的一半移到左侧。 这是对的吗？

* 2。这是问题：

我不明白：'px'。如果我取消它，效果当然将不再起作用。

为什么在那里，又意味着什么？

代码段

const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');


burger.addEventListener('click',() => {
  nav.classList.toggle('active');
  burger.classList.toggle('hide');
  xicon.classList.toggle('active');
});

const xicon = document.querySelector('.xicon');
xicon.addEventListener('click',function() {
  nav.classList.toggle('active');
  xicon.classList.toggle('active');
  burger.classList.toggle('hide');
})



const header = document.querySelector('header');
let prev = window.pageYOffset;

window.addEventListener('scroll',function(){
  let current = window.pageYOffset;

  if(prev < current){
    header.classList.add('hide');
  }
  else {
    header.classList.remove('hide');
    }

    prev = current;

})


const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;

window.addEventListener('scroll',function() {
  let currentScroll = window.pageYOffset;

  if(prevScroll < currentScroll) {
    shareThing.classList.add('hide');
    icons.classList.add('hide');
  }
  else {
    shareThing.classList.remove('hide');
    icons.classList.remove('hide');
  }

  prevScroll = currentScroll;

})


let share = document.querySelector('.share');
let icons = document.querySelector('.side');

share.addEventListener('click',() => {
  icons.classList.toggle('active');
})




let paral = document.querySelector('.paral');
let bubble = document.querySelector('.bubble');
let burgerimage = document.querySelector('.burgerimage');
let ximage = document.querySelector('.ximage');


window.addEventListener('scroll',() => {
  let curr = window.scrollY;

  bubble.style.left = curr * 0.5 + 'px';
  burgerimage.style.right = curr * .5 + 'px';
  ximage.style.bottom = curr * 3 + 'px';
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logoandicon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: powderblue;
  padding: .7em 0;
}

.logo {
  margin-left: .5em;
}

.burger {
  margin-right: 1em;
  z-index: 2;
}

.burger.hide {
  display: none;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: verdana;
}

nav ul li {
  text-align: center;
  list-style: none;
}

nav {
  padding: 1em 0;
  line-height: 2em;
  background: lightgreen;
  display: none;
}

nav.active {
  display: block;
}

.xicon {
  position: absolute;
  right: 1em;
  display: none;
}

.xicon.active {
  display: block;
}

header {
  width: 100vw;
  position: fixed;
  z-index: 5;
}

header.hide {
  display: none;
}

main {
  padding-top: 5em;
}

.one {
  width: 20px;
  height: 20px;
  background: blue;
  color: white;
}

.two {
  width: 20px;
  height: 20px;
  background: green;
  color: white;
}

.three {
  width: 20px;
  height: 20px;
  background: red;
  color: white;
}

.side {
  width: 30px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 50%;
  background: black;
  display: none;
  border-radius: 10px;
  transition: .5s;
  opacity: 0;
}

.side.active {
  display: flex;
  opacity: 1;
}

.side.hide {
  margin-left: -35px;
}

.share {
  position: fixed;
  top: 50%;
  background: black;
  color: white;
  font-family: verdana;
  font-size: 1.3rem;
  transform: rotateZ(-90deg);
  transform-origin: 0 0;
  padding: .15em 1em;
  border-radius: 10px;
  border: 1px solid white;
  transition: .5s;
  z-index: 3;
}

.share.hide {
  margin-left: -35px;
}

.paral {
  width: 100vw;
  height: 400px;
  overflow: hidden;
  border: 2px solid black;
  transition-delay: .5s;
  position: relative;
}

.bubble {
  position: absolute;
}

.burgerimage {
  position: absolute;
  right: 0px;
}

.ximage {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <header>
    <div class="logoandicon">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" width="30px" alt="burger-icon">
      <img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <p class="share">Share</p>
    <div class="side">
      <div class="one">Fb</div>
      <div class="two">Ig</div>
      <div class="three">Tw</div>
    </div>

    <div class="paral">
      <img src="bubble.svg" width="100px" class="bubble" alt="bubbles">
      <img src="menu.svg" width="100px" class="burgerimage" alt="burgericon">
      <img src="xicon.svg" width="100px" class="ximage" alt="xicon">
    </div>

    <h1>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Porro ut,animi iure sequi voluptatem maiores,aspernatur tempora,ipsa tempore,voluptate sint. Maiores quos inventore cumque reiciendis iusto illum,aut quam,suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis,animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt,ab dolor accusamus sequi eum optio. Fuga dolorum,quod qui laboriosam iure molestiae magnam explicabo! Accusamus,alias,non. Eius voluptas in aspernatur natus illo et possimus optio,cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe,impedit eveniet suscipit,deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium,sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde,quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui,veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis,eveniet reprehenderit neque rem sint eum,ratione,numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel,sed distinctio,voluptatibus quibusdam! Soluta voluptate,non facilis?</h1>
  </main>


<script src="main.js">

</script>
</body>
</html>

解决方法

如果我做对了，例如bubble.style.left = curr * 0.5 + 'px';这行的意思是：

采用气泡变量并将其从左侧移动到滚动速度的一半速度处。是这样吗？

~~否，bubble.style.left = curr * 0.5 + 'px';并不意味着。~~ element.style.用于应用CSS属性。例如，element.style.left将更改left的CSS element属性。

编辑：关于“气泡”的“速度”：它确实会将其移动到滚动“速度”的一半。由于它是根据Window.scrollY的一部分（此处为0.5）定义的。 Window界面的只读scrollY属性返回文档当前垂直滚动的像素数。

我不明白：“ px”。如果我取消它，效果当然将不再起作用。

为什么在那里，又意味着什么？

在设置CSS属性时，您需要提及正在使用的单元。所以要指定

element {
  left: 4px;
}

您需要编写此代码

element.style.left = 4 + 'px'

如果仍然有问题，则可能需要学习CSS。
检出ElementCSSInlineStyle on MDN。

了解PARALLAX滚动效果-Javascript

如何解决了解PARALLAX滚动效果-Javascript

解决方法

相关推荐