Пользовательские анимации прокрутки - пауза в секциях и горизонтальная прокрутка элементов - PullRequest
Новая
       56

Пользовательские анимации прокрутки - пауза в секциях и горизонтальная прокрутка элементов

3 голосов
/ 22 июня 2019

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

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

У меня естьдобавлена ​​своенравная функция jquery для определения, когда отображается вложенный спред.

Примерно так:

enter image description here

Вот фрагмент HTML.Слайд 1 является полным элементом страницы, как и слайд 5 и 6. Это могут быть привязки к меню.Поведение, которое я заинтересован в создании здесь - это когда пользователь приближается к вложенному блоку - он блокируется в верхней части слайда 2, а затем трансформирует слайды 3 и 4. 

$win.on('scroll', function() {
  var top = $win.scrollTop() / 3;
  console.log("top", top);
  $nested.css('transform', 'translate(' + -top + 'px, 0)');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">slide 1</div>
<div class="nested">
  <div class="section first">slide 2</div>
  <div class="section second">slide 3</div>
  <div class="section third">slide 4</div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>

JSFiddle Пример

Ответы [ 2 ]

4 голосов
/ 24 июня 2019

Это просто, чтобы дать вам представление о том, как этого можно достичь.Вам нужен контейнер-заполнитель, который сохраняет вертикальное пространство, когда ваши слайды становятся фиксированными элементами.

Следующий код может обрабатывать несколько слайдов на одной странице, вы также можете реализовать свой собственный, как только получите идею. 

$('.nested').each(function() {
  let $window = $(window), $body = $('body');
  let $nested = $(this), $nestedPlaceholder = $nested.parent();
  let verticalScrollRange, upperMargin, lowerMargin;
  $window.resize(function(){
    $nested.removeClass("sticky").css({left: 0});
    let placeholderHeight = $nestedPlaceholder.css({height: ''}).height();
    verticalScrollRange = placeholderHeight - $window.height();
    upperMargin = $nestedPlaceholder.offset().top;
    lowerMargin = upperMargin + verticalScrollRange;
    $nestedPlaceholder.height(placeholderHeight);
  });
  $window.scroll(function() {
    let scrollTop = $window.scrollTop();
    if (scrollTop > upperMargin && scrollTop < lowerMargin) {
      $nested.addClass("sticky");
      let horizontalScrollRange = $nested.width() - $body.width();
      let verticalScrollPosition = scrollTop - upperMargin;
      let horizontalScrollPosition = verticalScrollPosition / verticalScrollRange * horizontalScrollRange;
      $nested.css({left: -horizontalScrollPosition});
    } else {
      $nested.removeClass("sticky");
    }
  });
  $window.resize();
});
body {
  background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}

.section {
  height: 100vh;
  font-size: 5em;
  text-align: center;
  position: relative;
  border: 1px solid red;
}

.nested .section {
  width: 100vw;
}

.nested-placeholder {
  overflow: hidden;
}

.sticky {
  position: fixed;
  z-index: 1;
  top: 0;
  height: 100vh;
  white-space: nowrap;
}

.sticky .section {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">Start scrolling down!</div>
<div class="section">slide 1</div>
<div class="nested-placeholder">
  <div class="nested">
    <div class="section first">slide 2</div>
    <div class="section second">slide 3</div>
    <div class="section third">slide 4</div>
  </div>
</div>
<div class="section">slide 5</div>
<div class="section">slide 6</div>
0 голосов
/ 23 июня 2019

Я придумала это решение, которое активирует горизонтальную прокрутку, когда слайд достигает верхней части страницы.

https://jsfiddle.net/zny0c8s6/

Когда вложенный слайд попадает в верхнюю часть страницы, в гнездо добавляется липкий класс. Это фиксирует фиксированное положение партии и превращает гнездо в свободную карусель. Поскольку пользователь продолжает прокручивать вниз, гнездо переводится горизонтально. После того, как последний вложенный слайд очищен, я удалил липкий класс - и чтобы пользователь появился в обычном путешествии, попытался зафиксировать гнездо на высоте слайда и количестве. Хотя обратное направление должно быть решено - также, если есть несколько гнезд. 

$nested.waypoint(function(direction) {    
  var distance = $nested.offset().top;
  var $nestedHeight = $nested.height();
  var $nestedCount = $nested.find(" > .section").length;
  var $nestedSectionWidth = $nested.next(".section").eq(0).width();

  var clearNestedWidth = $nestedSectionWidth * $nestedCount;
  var $window = $(window);

  $window.scroll(function() {
    if ($window.scrollTop() >= distance) {
      // Your div has reached the top        
      $nested.addClass("sticky");

      var $nestedCompactWidth = $nested.width();    
      var $win = $(window);

      $win.on('scroll', function() {
        var top = $win.scrollTop() / 3;   
        $nested.css('transform', 'translate(' + -top + 'px, 0)');

        if (top >= clearNestedWidth) {
          console.log("cleared slides - now clear sticky")
          $nested.removeClass("sticky");              
          $nested.css('height', $nestedHeight);
          //set scroll to end of slide 2
        }
      });

    } else {
      //$nested.removeClass("sticky");
    }
  });


}, {
  offset: '50%'
});
...