[Resolved] Implementing full page sliding in homepage

[g_younes]

Hello. This is quite advanced and probably at this point, I am abusing the support but just thought of trying you as a last resort. If you cannot help with this then all is cool.

I am trying to implement full page sliding. I saw you recommending this https://codepen.io/Javarome/post/full-page-sliding for other people who asked about it here, and it was indeed helpful.

It was not working when I implemented it inside WordPress. So I copied the *whole* homepage element into a code editor, applied the needed CSS and javascript (as indicated by the tutorial), and sure enough, it worked beautifully (in the editor only).

That’s how my homepage element is built (using sections):

View post on imgur.com

(The <main> element is what I copied to the code editor. You can see my working code here: https://docs.google.com/document/d/1dyC_MBLtHmJU0PSjo-gEx2UenB1jWPCnBcb3O4qHUdY/edit?usp=sharing). Note that generate-section-1 has some big ugly html inside it. That’s because there is a video slider there.

But again it wasn’t working in WordPress. I erased almost everything else that wasn’t related to the problem, and it still wasn’t working. I guess that’s because of classes already applied in generate press that are conflicting with my code. So in the hopes that I just have to disable/override something, I put my new ugly stripped down site here: ghadiryounes.com (in case you want to have a look).

So in summary: “https://docs.google.com/document/d/1dyC_MBLtHmJU0PSjo-gEx2UenB1jWPCnBcb3O4qHUdY/edit?usp=sharing&#8221; is where the code is working, ghadiryounes.com (full website) is where the code isn’t.

Is there some class I should override? Or would that be impossible and would cause the theme to break down? Thank you for reading this far, I might need professional help at this point, so again it’s cool if you cannot help with it.

[David]

Hi there,

so try this:

1. Create your three Sections with your content background colors etc. Then for each one add a unique ID on the Settings tab. The IDs for the three sections should be: one , two , three

2. Then create a new Hook Element using the WP_head hook for your CSS:

<style>
#main {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.generate-sections-container {
    width: 100%;
    height: 100vh;
}
</style>

3. Now create another Hook element for the WP_Footer to contain the Javascript:

<script type="text/javascript">

function ScrollHandler(pageId) {
    var page = document.getElementById(pageId);
    var pageStart = page.offsetTop;
    var pageJump = false;
    var viewStart;
    var duration = 1000;
    var scrolled = document.getElementById("main");
  
    function scrollToPage() {
      pageJump = true;
  
      // Calculate how far to scroll
      var startLocation = viewStart;
      var endLocation = pageStart;
      var distance = endLocation - startLocation;
  
      var runAnimation;
  
      // Set the animation variables to 0/undefined.
      var timeLapsed = 0;
      var percentage, position;
  
      var easing = function(progress) {
        return progress < 0.5
          ? 4 * progress * progress * progress
          : (progress - 1) * (2 * progress - 2) * (2 * progress - 2) + 1; // acceleration until halfway, then deceleration
      };
  
      function stopAnimationIfRequired(pos) {
        if (pos == endLocation) {
          cancelAnimationFrame(runAnimation);
          setTimeout(function() {
            pageJump = false;
          }, 500);
        }
      }
  
      var animate = function() {
        timeLapsed += 16;
        percentage = timeLapsed / duration;
        if (percentage > 1) {
          percentage = 1;
          position = endLocation;
        } else {
          position = startLocation + distance * easing(percentage);
        }
        scrolled.scrollTop = position;
        runAnimation = requestAnimationFrame(animate);
        stopAnimationIfRequired(position);
        console.log("position=" + scrolled.scrollTop + "(" + percentage + ")");
      };
      // Loop the animation function
      runAnimation = requestAnimationFrame(animate);
    }
  
    window.addEventListener("wheel", function(event) {
      viewStart = scrolled.scrollTop;
      if (!pageJump) {
        var pageHeight = page.scrollHeight;
        var pageStopPortion = pageHeight / 2;
        var viewHeight = window.innerHeight;
  
        var viewEnd = viewStart + viewHeight;
        var pageStartPart = viewEnd - pageStart;
        var pageEndPart = pageStart + pageHeight - viewStart;
  
        var canJumpDown = pageStartPart >= 0;
        var stopJumpDown = pageStartPart > pageStopPortion;
  
        var canJumpUp = pageEndPart >= 0;
        var stopJumpUp = pageEndPart > pageStopPortion;
  
        var scrollingForward = event.deltaY > 0;
        if (
          (scrollingForward && canJumpDown && !stopJumpDown) ||
          (!scrollingForward && canJumpUp && !stopJumpUp)
        ) {
          event.preventDefault();
          scrollToPage();
        }
        false; //
      } else {
        event.preventDefault();
      }
    });
  }
  new ScrollHandler("one");
  new ScrollHandler("two");
  new ScrollHandler("three");

</script>

For both of the hooks you will need to set the Display Rules to the pages you’re using this on.

[g_younes]

You won’t believe how thankful I am. This totally worked.

For anyone following this, make sure you set the priority to 1 for the hook elements (my wp_footer js element didn’t work until I set the priority to 1 instead of 10).

I am again really grateful, I’ve been trying to sort this out for 3 days. You just made my day. Thank you.

[David]

Awesome – glad to be of help.

[Author]

Posts