Как повторно использовать этот параллакс внутри раздела - PullRequest
Новая
       5

Как повторно использовать этот параллакс внутри раздела

1 голос
/ 21 февраля 2020

Я видел этот код параллакса из Codepen https://codepen.io/eehayman/pen/qdGZJr

<div class="container">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Full Page Parallax Effect</p>
      <p class="content-subtitle">Scroll down and up to see the effect!</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Cras lacinia non eros nec semper.</p>
      <p class="content-subtitle">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Etiam consequat lectus.</p>
      <p class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</p>
    </div>
  </section>
</div>

// ------------- VARIABLES ------------- //
var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
var totalSlideNumber = $(".background").length;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //
function parallaxScroll(evt) {
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);

// ------------- SLIDE MOTION ------------- //
function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

Я хочу использовать его, но хочу добавить два (не параллакс) раздела героев в вверху и 2 внизу (без параллакса).

  1. На главной странице пользователь сначала увидит героя без параллакса (изображение)
  2. , а когда он прокрутит вниз, см. 2-й герой, не имеющий параллакса, затем следующий раздел - параллакс, и он будет запущен
  3. После того, как весь параллакс пройден, снова появится другое фиксированное изображение (аналогичное # 1).
  4. и когда пользователь прокручивает назад, параллакс (в обратном направлении) будет

1 Ответ

0 голосов
/ 21 февраля 2020

посмотрите на это, я добавил раздел героя до и после 3 разделов

https://codepen.io/vkv88/pen/poJEXOG

ИЗМЕНЕНИЯ:

  1. в HTML Вы дублируете тег Scection с его содержимым, изменяете только тексты

  2. в S CSS Вы дублируете &:nth-child(3) { background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.jpg); }

    * * * * 3 - это номер героя, поэтому, если вы хотите, чтобы 10 героев дублировались 10 раз, каждый раз увеличивайте это число

  3. также в S CSS вы меняете $slide-number: 5; на количество Heros, которое вы хотите, в этом примере это 5 героев

.

, чтобы реализовать этот код сначала, когда вы загружаете jquery из https://code.jquery.com/jquery-2.1.4.min.js в теге сценария также загружаем библиотеку sh из https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js

, также устанавливаем sass, затем запускаем sass NAME_OF_CSS_FILE index. css затем связываем этот индекс. css на вашей веб-странице

ps : если вы не хотите использовать s css go для параметров на панели css в codepen, тогда выберите show compiled css .. скопируйте это css в себя р портфель

. также если вы заходили на целевую страницу / примерно по отдельности, я редактировал код для другой страницы https://codepen.io/vkv88/pen/wvagaKV?editors=1100

...