Попытка анимировать и элемент во время прокрутки

Question

Попытка анимировать и элемент во время прокрутки

1

Я пытаюсь сделать прокрутку логотипа вправо и, в конце концов, оживить значок гамбургера. Вот примерно моя конечная цель, но сделанная как страница загружается, а не свитки. https://codepen.io/mthauv/pen/gxJNWq

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

 if( target - mContainer.getBoundingClientRect().right > 0 || startLine - startLine * scrollY/240 > 16 ){
   mContainer.style.right = startLine - startLine * scrollY/240 + "px";
   check = mContainer.style.right.replace(/[^\d.-]/g, '');   
 }

Оператор or позволяет ей прокручивать слишком далеко, где оператор and и позволяет ему остановиться. Я пробовал несколько других заявлений, но большинство из них препятствовали возврату логотипа при прокрутке вниз.

Здесь пером https://codepen.io/mthauv/pen/aygNbe

HTML

 <body>

  <div id="logo-container" class="first-step">
   <div id="m-container" onclick="toggleMenu('menu-btn')">
    <div id="m-1" class="m"></div>
    <div id="m-2" class="m"></div>
    <div id="m-3" class="m"></div>
  </div>
 </div>

 <div id="menu-container">
   <ul id="menu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
 </div>

 <div id="content-container" onclick="toggleMenu('body')">
   <h1>Content</h1>
 </div>

</body>

И JS

var logoContainer = document.getElementById('logo-container');
var mContainer = document.getElementById('m-container');
var menuContainer = document.getElementById('menu-container');
var contentContainer = document.getElementById('content-container');
var m = document.getElementsByClassName('m');

var w = window.innerWidth;
var check = mContainer.style.right.replace(/[^\d.-]/g, '');
var startLine = w/2 - 90;
var totalDistance = window.innerWidth/2;
var target = window.innerWidth - 16;

mContainer.style.right = w/2 - 90 + "px"

window.addEventListener("resize", function(){
  var w = window.innerWidth;
  mContainer.style.right = w/2 - 90 + "px"
  check = mContainer.style.right.replace(/[^\d.-]/g, '');
  startLine = w/2 - 90;
  totalDistance = w/2;
  target = w - 16;
});

window.addEventListener('scroll', function(e){
  var scrollY = (window.pageYOffset) ;
  var x = scrollY/240;

  if( target - mContainer.getBoundingClientRect().right > 0 || startLine - startLine * scrollY/240 > 16 )
    {
      mContainer.style.right = startLine - startLine * scrollY/240 + "px";
      check = mContainer.style.right.replace(/[^\d.-]/g, '');   
    } 

  });

Matt 08 сен. 2017, в 18:14

Источник

Теги:

javascript

2 ответа

0

Проверьте это обновленное перо, я установил положение дочернего элемента M в абсолютный, и родительский элемент был исправлен, чтобы он мог свободно перемещаться.

Я добавил приведенный ниже код, который проверяет, идет ли контейнер справа от экрана, если это так, привяжите его, а не продолжайте.

  if (parseFloat(mContainer.style.right) <= 0) {
    mContainer.style.right = '0px';
  }

https://codepen.io/anon/pen/LjKoNE

mrsq 08 сен. 2017, в 14:14

0

Это работает! Благодарю. Я сделал что-то подобное, но мне больше нравится твоя. Я использовал оператор else if ... else if (mContainer.getBoundingClientRect (). Right / w> 1) {mContainer.style.right = '0'; }
Matt 08 сен. 2017, в 19:12

Ещё вопросы

Это работает! Благодарю. Я сделал что-то подобное, но мне больше нравится твоя. Я использовал оператор else if ... else if (mContainer.getBoundingClientRect (). Right / w> 1) {mContainer.style.right = '0'; }

Marian Gibala · Accepted Answer · 2017-09-08T15-57-00.000Z

Проверь это:

const mContainer = document.getElementById("m-container");

const scrollFinishPosition = 300; // when animation should be finished
const step = scrollFinishPosition / 100;

let startPosition;
let endPosition;
let difference;

function calcSize() {
  const logoWidth = mContainer.offsetWidth; // get width of the logo

  startPosition = window.innerWidth / 2 - logoWidth / 2; // center

  const margin = 80;
  endPosition = window.innerWidth - logoWidth - margin; 

  // used for some simple math later 
  difference = endPosition - startPosition; 
}

function positionLogo() {
  let percentageValue;

  // if scroll position is in animation range - calc % otherwise just use 100%
  if (window.pageYOffset < scrollFinishPosition) {
    percentageValue = pageYOffset / step;
  } else {
    percentageValue = 100;
  }

  // convert % to px and add update styles
  const position = startPosition + difference / 100 * percentageValue;
  mContainer.style.left = position + "px";
}

window.addEventListener("resize", function(e) {
  calcSize();
  positionLogo()
});

window.addEventListener("scroll", function(e) {
  positionLogo();
});

calcSize();
positionLogo();

https://codepen.io/Gibala/pen/gxNJRR

Это работает и гораздо более элегантно, чем у меня было. Плюс это решает проблему (которую я еще не нашел) изменения размера окна после некоторой прокрутки. Спасибо за это.