3 votes

How can I change the image of a web page when scrolling?

I'm using Adobe Muse and I want to make a page that when you scroll it to produce an animation. This could be done in Adobe Edge Animate only which is not available anymore and I decided to make as sprites, and that at the time of scrolling down to change from one to another and produce the animation. I have exported everything to html. I wanted to know how can I do that. I guess that is javascript.

Here is the part generated in Adobe Muse where is the image:

<!--------------Bloque de la imagen que quiero cambiar------------>
 <div class="clip_frame ose_pre_init colelem" id="u7080">
<!-- imagen -->
 <img class="block" id="u7080_img" src="images/bbq0001.png?crc=294256661" alt="" width="654" height="696"/>
</div>
<!-----------Fin del bloque de la imagen---------------------->

0voto

Marc Lemien Points 1071

I leave you an adobe muse tutorial to do exactly what you say , you can download even the files they use to practice better. This effect is known as parallax. ( https://helpx.adobe.com/muse/how-to/scroll-effects-motion.html ) I also work with Adobe Muse and have tried the tutorial. You will tell me what you think about @CarlosOrtega

-1voto

JorelC Points 137

with jquery it would be something as simple as this (assuming bbq0002.png for the name of the second image):

 <script>
    $( window ).scroll(function() {
        $( "#u7080_img" ).attr('src', 'images/bbq0002.png');
    });
</script>
 

You can add this portion of code anywhere, preferably inside the <head></head> tag

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X