Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #2093870
Swapping animation
Closed

Comments

  • Patrick started the conversation

    I have the scalia demo and it has the large watch that spins its hands as you scroll. This is so close to what I want but not quite. I want to change the image as I scroll. I have 48 images each slightly rotated. As I scroll I just want to change the src instead of the rotation. Exactly like this camera is doing here https://www.ajax-zoom.com/index.php?cid=blog&article=rotate_360_product_view_onscroll&lang=en

    Is this an easy thing to do with what we already have or do I need to buy the embedded thing?

  •  4,621
    Michael replied

    Hi, sorry, not quite sure what do you mean. Can you pls provide more details with screenshots?

  • Patrick replied

    Thanks for reply. 

    So I'm using the Scrollex page. Sorry, should have said. And on it is a large watch that as you scroll the hands spin round and round. 

    Interestingly the spinning hands are broken on your demo, but work just fine on my site. Screenshot labelled spinningwatch.jpg below.

    https://staging.metomics.com/

    ^hands spin just fine.

    Now, I'm not making a website about watches. I'm actually making a website about metal Lego. So I don't want a watch. What I want is to show a model spinning and I want that model to spin as you scroll. 

    There is a perfect example on the site below.

    https://www.ajax-zoom.com/index.php?cid=blog&article=rotate_360_product_view_onscroll&lang=en

    Scroll down a little way on that site and you see a camera spins around as you scroll. 

    I want that. 

    Now this template already 'scrolljacks' and the feel of the site is that as you scroll things happen on the page. And so instead of rotating the hands as you scroll, I actually just want to change the image url for the next one in the animation. 


    So I have 48 images. 

    The template knows how much scrolling is happening. 

    It does some math calculation somewhere to work out which angle the clock-arrow-1 and clock-arrow-2 should be at. 

    And what I want instead is to say ok, this template clearly knows how many pixels we scrolled. In stead of dividing that into an angle and swapping style="transform: rotate(-120.518deg);" can I instead of making that angle, swap the source src="staging.metomics.com/wp-content/uploads/2015/02/arr-2-no-mark.png" to something like src="staging.metomics.com/wp-content/uploads/2015/02/1.png"

    "staging.metomics.com/wp-content/uploads/2015/02/2.png"

    "staging.metomics.com/wp-content/uploads/2015/02/3.png"

    ...

    "staging.metomics.com/wp-content/uploads/2015/02/48.png"

    as you scroll down the page?

    Basically is there a simple way to swap the animation from spinning hands (image transform) to animated image (src change) easily using the code we already have?


  •  4,621
    Michael replied

    Unfortunately, there is no easy way to use what you want.

    It's requires some code changes (it's not a couple lines of code).  

    We would be glad to help you and assist you in resolving your issues, however it would be a paid individual support. Pls. let me know if you are interested so I can send you an approx. quote for that