Rollover alternate on mobile?

Community resources General
1

Hi Guys,

I have a section on my site which when viewed on desktop with rollover the contents change.

It’s the third section on this page (Installation / Augmented Reality / Digital Art) :

https://alan-test-project-7f62be8135109ac19d859.webflow.io

Is there a way I can set the mobile version to do a similar effect, but when the user is scrolling over, instead of needing to click?

Thx

2

Yes, this is totally possible with some Javascript + little jQuery.

I don’t know if you’re familiar with JS/jQuery but what you can do is.

  1. Make the whole section sticky on mobile in a wrapper of min-heigh 300vh
  2. On scroll - calculate when to change which part is active of the three
  3. Set the corresponding part active on scroll
3

Thanks for the response Stefan… Although I understand what you’re saying, I’m fairly limited in scripting aside from cut/pasting JS code snippets… and JQuery, well I’ve heard of it :wink: … Anywhere I might search for this kind of thing?

4

I cannot share here the project of a client’s work I had to do where this exact thing had to be build on mobile, but…

Here are some resources that will be helpful:

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top
  • The condition magic on resize and screen sizes
$(document).ready(function() {
    if($(window).width() >= 1024) {
        //do the magic
    }
});
  • After that on met conditions, toggle, add or remove some classes:
  $('.class-name').toggleClass('class-name');
  $('.class-name').addClass('class-name');
  $('.class-name').removeClass('class-name');
5

That’s very kind of you Stefan! Looking into jquery and your code :slight_smile: