Mouse Over Effects

Ask the community
,
1

Hello. I’m crazy about this site’s mouse over effects and I imagine it’s possible of happening with Wix Code. Can anyone help me do it?

I’m talking about these moving objects.

2

Hi wuum,
try using the following events:

  • onMouseEnter / onMouseLeave
  • on viewportEnter / Leave

in the code that responds to these events, you can show/hide elements with animations.

play with it and let’s see how far you can go…

good luck!

3

Hi, Ziv. I spent some hours (I mean… a lot of hours) trying to use onMouseEnter & onViewportEnter events, which I imagined would be the ones I’d use…

But to teel you the truth, I’m a beginner in coding. And I could do nothing.

I tried to find some tutorial videos that’d teach me how to use them (the Wix Help description also as very confusing to me).

Let’s say I want the element image1 to scroll from right as I scroll the mouse down the page.

How would the code look like?

Sorry for asking such a dumb question. I’m even embarrassed.

Thanks in advance.

4

Hi wuum,
your questions are great.
this is the exact feedback we need to make wix code better.

let’s try this for starters.

  • place the image in it’s final position (the position you want it at after it slides in).
  • mark the image as hidden
  • add an anchor element to your page. this anchor will serve as a “hidden trigger” to start the animation you want.
  • now add an “onViewPortEnter” event to the anchor. in the event code, show the image with a “slide in from right” effect.
    ==>
    the result should be that when you scroll down the page and hit the anchor, the image slides into view.

if this works you can do the same with onViewPortLeave and letting the image slide out, of course…

good luck!

p.s.
can you share with us which tutorials you’ve watched, and what was confusing about them?
thanks!

5

Don’t know what I’m doing incorrectly :frowning:

Sorry :frowning:

The anchor is positioned above “O que é a Oficina da Mulher?”. I’d like the green pencil to scroll from right (entering and leaving).

Sorry for such a dumb question :frowning:

1920×762 172 KB

6

Hi wuum,
your code is half way there… let’s make it work!

you added the onViewPortEnter and onViewPortLeave events to the anchor - that’s excellent.

in the onViewPortEnter event code, what you want to do is this:

$w("#image27").show("GlideIn"); //will make the image appear with a glide-in effect

and in onViewPortLeave:


$w("#image27").hide("GlideOut"); //will make the image disappear with a glide-out effect

try it out!

7

Thanks a lot! Now I could do it! <3

8

how to change the speed of the animation?

9

Hello, please start a new post with the code you are working with and what you have tried. This post is from 2017 and will be closed.