Проблема параллакса, неверно рассчитывается высота изображения - PullRequest
Новая
       16

Проблема параллакса, неверно рассчитывается высота изображения

0 голосов
/ 10 июля 2019

Я создал компонент параллакса, который позволяет добавлять несколько слоев на разной глубине.

Очевидно, чтобы пользователь не видел края изображения, когда оно движется медленнее, мне нужно соответствующим образом отрегулировать верхнее положение и высоту. Однако, похоже, мои расчеты неверны.

См. Пример ниже, может кто-нибудь помочь мне с математикой здесь? Как видите, первый компонент параллакса установлен с большой глубиной, но изображение сделано слишком большим. 

Vue.component('parallax', {
  render: function(h) {
      return h('div', { 'class': 'parallax' }, this.$slots.default);
  },
  data: function() {
      return {
          layers: [],
          width: null,
          height: null,
          scrollFactor: null
      }
  },
  mounted() {

      const eventHandler = () => requestAnimationFrame(this.update);
      window.addEventListener('resize', eventHandler);
      window.addEventListener('scroll', eventHandler);

      this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', eventHandler);
          window.removeEventListener('scroll', eventHandler);
      });

      requestAnimationFrame(this.update);

      this.$el.querySelectorAll('[data-layer]').forEach(layer => {
          this.layers.push({
              depth: parseFloat(layer.getAttribute('data-depth')),
              el: layer
          });
      });
  },
  methods: {
      calcParallax: function() {
          const container = this.$el.getBoundingClientRect();

          this.height = container.height;
          this.width = container.width;

          const viewportOffsetBottom = window.innerHeight - container.top;
          return viewportOffsetBottom / (window.innerHeight + this.height);
      },
      update: function() {
          this.layers.forEach(layer => {

              let scrollFactor = this.calcParallax(layer);

              layer.el.style.top = `-${(this.height / 2) * (layer.depth * 2)}px`;
              layer.el.style.height = `calc(100% + ${this.height * layer.depth}px)`;

              let offset = (scrollFactor * this.height * layer.depth).toFixed(1);
              layer.el.style.transform = `translate3d(0, ${offset}px, 0)`;
          });
      }
  }
});

new Vue({ el: '#app' });
.parallax {
    overflow: hidden;
    position: relative;
}
.parallax > .overlay {
    position: relative;
    z-index: 2;
    height: 100%;
}
.parallax > .layer {
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.parallax--about {
  float: left;
  width: 100%;
  height: 500px;
}
.parallax--about > .layer--one {
  background-image: url('https://wallpapercave.com/wp/wp2592074.jpg');
}
.parallax--detail > .layer--one {
  background-image: url('http://hdqwalls.com/wallpapers/yamaha-r1-4k-w7.jpg');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p style="padding-top: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc vitae velit sodales dictum sit amet posuere lorem. Vestibulum sollicitudin velit ut sollicitudin dignissim. Nullam non nisl luctus, facilisis nibh ut, accumsan lorem. Proin bibendum augue quis quam interdum efficitur. Quisque ultricies, neque id dictum sodales, velit ex dictum lectus, vitae molestie dolor arcu in ante. Sed nec interdum sapien. Suspendisse eleifend quis erat ac tempor. Etiam ac maximus odio. Aenean nec augue vel odio aliquam dictum id ac urna. Integer nec libero lorem. Fusce ullamcorper hendrerit dolor nec interdum. Pellentesque ut ipsum tincidunt, placerat dolor nec, scelerisque neque. Suspendisse scelerisque sapien in dolor commodo, nec malesuada justo vulputate. Nunc blandit lacus et elit vulputate, at blandit lorem vulputate. Donec sed mi blandit quam molestie posuere. Quisque consectetur augue ut metus venenatis molestie.</p>

<p>Quisque in lorem non nibh consectetur pulvinar. Aliquam quis mi ac purus blandit pulvinar non sit amet augue. Vestibulum at dictum augue. Phasellus eget nisi in purus ultrices blandit. Donec gravida tellus sed elit lacinia, id consectetur nisi accumsan. Sed vitae vehicula dolor. Phasellus porta turpis ac malesuada suscipit. Nunc dapibus magna dui, ac dignissim risus facilisis a. Proin rutrum, sapien quis viverra ornare, odio lacus finibus lectus, in faucibus lorem augue eu turpis. Nullam sed facilisis ante. Nunc mi justo, condimentum id augue in, vehicula ullamcorper felis. Nunc non elit ut urna elementum mattis. Phasellus dui dolor, malesuada sed eleifend varius, elementum eu massa. Donec consequat lacinia odio.</p>

<parallax class="app parallax--about" style="height: 500px;">
    <div class="overlay">
        <h1>Example Parallax 1 - Slow</h1>
        <h2>SEO Test</h2>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu. <a href='http://www.google.com/'>Test URL</a></p>
    </div>
    <div class="layer layer--one" data-layer data-depth="2"></div>
</parallax>

<p style="padding-top: 20px;">Integer accumsan blandit mauris et semper. Sed interdum a lorem fermentum accumsan. Curabitur congue mi at elit vulputate porta. Curabitur a vestibulum mauris, eu fermentum libero. Sed et lectus mauris. Nulla dignissim libero ac lectus lobortis, et tempus sapien cursus. Proin malesuada bibendum tincidunt. Proin sit amet porttitor eros, eu interdum dolor. Curabitur facilisis sapien in odio accumsan, non elementum urna bibendum. Ut ut augue sit amet massa maximus malesuada non vel est. Pellentesque vitae elit lorem.</p>

<p>Vestibulum tellus ligula, luctus et fringilla sed, facilisis a libero. Nam efficitur eleifend interdum. Vestibulum et leo sed sem consequat interdum. Vivamus aliquam vehicula pharetra. Integer hendrerit vehicula elit at venenatis. Suspendisse placerat sem ut elit ultrices, pretium consectetur est efficitur. Integer quis vulputate sem. Quisque in lobortis erat.</p>

<p>Integer hendrerit augue sit amet ipsum porta fermentum. Aliquam efficitur, magna vel tristique cursus, ante risus fermentum quam, ac auctor ipsum neque et justo. Vivamus aliquam laoreet metus non malesuada. Phasellus eu ultrices eros. Sed commodo, nibh nec pharetra condimentum, mauris orci sodales lectus, a pulvinar diam est sed nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac consequat risus. In fringilla, urna sit amet porta tristique, dui nulla auctor arcu, eget egestas tortor massa a justo. Maecenas bibendum justo id massa bibendum sagittis. Donec volutpat vel justo vitae faucibus. In tempor suscipit erat, a porttitor sapien egestas sed.</p>

<parallax class="app parallax--detail">
    <div class="overlay">
        <h1>Example Prallax 2 - Fast</h1>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu.</p>
        <p>Nulla est sapien, vestibulum nec suscipit in, vulputate sit amet augue. Proin enim urna, congue a tempor sit amet, hendrerit at diam. Quisque iaculis sagittis hendrerit. Suspendisse sagittis mauris elit, non suscipit metus venenatis eu.</p>
    </div>
    <div class="layer layer--one" data-layer data-depth="0.6"></div>
</parallax>

<p style="padding-top: 20px;">Integer accumsan blandit mauris et semper. Sed interdum a lorem fermentum accumsan. Curabitur congue mi at elit vulputate porta. Curabitur a vestibulum mauris, eu fermentum libero. Sed et lectus mauris. Nulla dignissim libero ac lectus lobortis, et tempus sapien cursus. Proin malesuada bibendum tincidunt. Proin sit amet porttitor eros, eu interdum dolor. Curabitur facilisis sapien in odio accumsan, non elementum urna bibendum. Ut ut augue sit amet massa maximus malesuada non vel est. Pellentesque vitae elit lorem.</p>

<p>Vestibulum tellus ligula, luctus et fringilla sed, facilisis a libero. Nam efficitur eleifend interdum. Vestibulum et leo sed sem consequat interdum. Vivamus aliquam vehicula pharetra. Integer hendrerit vehicula elit at venenatis. Suspendisse placerat sem ut elit ultrices, pretium consectetur est efficitur. Integer quis vulputate sem. Quisque in lobortis erat.</p>

<p>Integer hendrerit augue sit amet ipsum porta fermentum. Aliquam efficitur, magna vel tristique cursus, ante risus fermentum quam, ac auctor ipsum neque et justo. Vivamus aliquam laoreet metus non malesuada. Phasellus eu ultrices eros. Sed commodo, nibh nec pharetra condimentum, mauris orci sodales lectus, a pulvinar diam est sed nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ac consequat risus. In fringilla, urna sit amet porta tristique, dui nulla auctor arcu, eget egestas tortor massa a justo. Maecenas bibendum justo id massa bibendum sagittis. Donec volutpat vel justo vitae faucibus. In tempor suscipit erat, a porttitor sapien egestas sed.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut nunc vitae velit sodales dictum sit amet posuere lorem. Vestibulum sollicitudin velit ut sollicitudin dignissim. Nullam non nisl luctus, facilisis nibh ut, accumsan lorem. Proin bibendum augue quis quam interdum efficitur. Quisque ultricies, neque id dictum sodales, velit ex dictum lectus, vitae molestie dolor arcu in ante. Sed nec interdum sapien. Suspendisse eleifend quis erat ac tempor. Etiam ac maximus odio. Aenean nec augue vel odio aliquam dictum id ac urna. Integer nec libero lorem. Fusce ullamcorper hendrerit dolor nec interdum. Pellentesque ut ipsum tincidunt, placerat dolor nec, scelerisque neque. Suspendisse scelerisque sapien in dolor commodo, nec malesuada justo vulputate. Nunc blandit lacus et elit vulputate, at blandit lorem vulputate. Donec sed mi blandit quam molestie posuere. Quisque consectetur augue ut metus venenatis molestie.</p>

<p>Quisque in lorem non nibh consectetur pulvinar. Aliquam quis mi ac purus blandit pulvinar non sit amet augue. Vestibulum at dictum augue. Phasellus eget nisi in purus ultrices blandit. Donec gravida tellus sed elit lacinia, id consectetur nisi accumsan. Sed vitae vehicula dolor. Phasellus porta turpis ac malesuada suscipit. Nunc dapibus magna dui, ac dignissim risus facilisis a. Proin rutrum, sapien quis viverra ornare, odio lacus finibus lectus, in faucibus lorem augue eu turpis. Nullam sed facilisis ante. Nunc mi justo, condimentum id augue in, vehicula ullamcorper felis. Nunc non elit ut urna elementum mattis. Phasellus dui dolor, malesuada sed eleifend varius, elementum eu massa. Donec consequat lacinia odio.</p>
</div>

Это также немного нервно, но это другая проблема.

...