I’m looking to set up a few images on my site so that they go transparent/opaque on mouse over. Hoping for some help in completing the code.
Here is as far as I can get (lol), am I on the right track?
export function column10_onMouseIn(event) {
}
If it’s not a vector image (svg), then I don’t think you can do it with Corvid.
You may be able to have it in an html component and do it there using html code.
J.D. - thanks for the information, I appreciate it. Any idea how I would go about coding this in HTML?
@kyle14215 Put in the html component something like:
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://static.wixstatic.com/media/9d7fe992a4814a7eb816b8e6b3767233.jpg/v1/fit/w_924,h_520/9d7fe992a4814a7eb816b8e6b3767233.jpg">
</body>
</html>
Hello, This can be done with some work. I did some testing and this is what I got:
Upload and place two identical image elements on top of each other. One image with 50% opacity and one with 100% opacity (keep in mind you need to edit the opacity in photoshop or similar photo editing software outside of Wix since there is no way to control the image opacity once it’s in the Wix media manager) . Set the 100% image element to “hide on load” in the properties panel.
For simplicity I’ve named the images #image50 and #image100 in the code. Then set event listeners for your hover area (in my case a strip, could be any element though) and add the following code to your page:
//set fade options so you can control the effect better.
let fadeOptions = {
"duration": 1000, //milliseconds = 1 second
"delay": 0
};
export function columnStrip2_mouseIn(event) {
$w('#image50').hide('fade', fadeOptions);
$w('#image100').show('fade', fadeOptions);
}
export function columnStrip2_mouseOut(event) {
$w('#image50').show('fade', fadeOptions);
$w('#image100').hide('fade', fadeOptions);
}
Hope this helps! Best of luck! =)
//Joe
Interesting solution Joe, which i think would work perfectly for image objects.
However I have a similar concern and am working with columns.
Its a shame that there isn’t some direct code to reduce the opacity when on mouse in to simulate a button etc.
A new way to do it is to use the new animation API and changing the opacity attribute:
https://www.wix.com/corvid/reference/wix-animations.html
https://www.wix.com/corvid/reference/wix-animations.TimeLine.html#AnimationAttributes
Thank you: it looks like a nice improvement. I will look into this. I do have a question to investigate: how can a timeline be truly stopped so it stops staying in memory? You can pause a timeline, but if animation needs to be run multiple times (run in total, not just completed from last run) and some timelines are paused, will the paused ones remain in memory indefinitely? Or even worse, will they block other timelines from happening at all?
Also, do you know why my comment disappeared? It was very useful especially since most clients are not IT developers.
@raymondnaseef I think you can reset the timeline or change it by assigning a new value to the variable that stores the timeline.
I don’t know which comments disappeared. Maybe something went wrong (a bug or something).
@jonatandor35 Thanks. Haven’t played with reset yet, have tested timeline changing opacity and using pause/play & pause/reverse.
The timeline is have the same issue I have with using hide() and show() [moving mouse in-out fast enough ends up showing the wrong image sometimes].
That’s alright. For this question I found an interesting solution that appears to work correctly if there does not need to be duration: using a MultiStateBox. Wire up mouseIn and mouseOut in the box to show one state or the other.
@raymondnaseef interesting, but this also has its limitations (for example you can’t put a MultuStateBox inside a repeater).
@raymondnaseef Try this one : (better than show and hide). You can set opacity as between 0 to 1.
import wixAnimations from 'wix-animations';
let timeline = wixAnimations.timeline(
{
"repeat": 0,
"repeatDelay": 0,
"yoyo": true
}
);
$w.onReady( function () {
const myImage = $w("#vectorImage3");
timeline
.add( myImage, {
"opacity": 0,
"duration": 200
} );
$w("#vectorImage3").onMouseIn( () => {
timeline.play();
} );
$w("#vectorImage3").onMouseOut( () => {
timeline.reverse();
} );
} );
The problem with this is if you trigger the mouseOut event while the image is fading out, it doesn’t fade back in probably because it doesn’t recognize that it is hidden. You can easily test this by swiping over the repeater very quickly. Wix is so frustratingly annoying. This could be easily fixed if they just allow you to access the CSS properties of the elements to see if the opacity is less than 1 so you can write a condition into the script that recognizes that element is fading out and still needs to fade back in. I see no reason why they have to force people to customize sites only through the limited Corvid code when so many of their features are so limited in customization.
Hi All, I found this thread searching for a solution to a similar problem. I want to hide/show my page header upon mousein/out. (FYI I cannot use scrolling for this on this page) I wrote simple code to .hide() in the mouse out and .show() in the mouse in. After mouse out, I no longer get mouse in events from the header. When we use .hide(), why do we no longer get mouse in events from the element (header section) Many thanks! Michael
it’s very strange, when I try this using headerSection (my page header in masterpage) instead of an image, I can hide but not unhide the header . Mouseout doesn’t reverse the opacity.
More info, I also tried this:
import wixAnimations from ‘wix-animations’ ;
let tlShow = wixAnimations . timeline (
{
“repeat” : 0 ,
“repeatDelay” : 0 ,
“yoyo” : true
}
);
let tlHide = wixAnimations . timeline (
{
“repeat” : 0 ,
“repeatDelay” : 0 ,
“yoyo” : true
}
);
$w . onReady ( function () {
tlShow
. add ( $w ( ‘#headerSection’ ), {
“opacity” : 1 ,
“duration” : 200
} );
tlHide
. add ( $w ( ‘#headerSection’ ), {
“opacity” : 0 ,
“duration” : 200
} );
$w ( “#headerSection” ). onMouseIn ( () => {
console . log ( “in” );
tlShow . play ();
} );
$w ( “#headerSection” ). onMouseOut ( () => {
console . log ( “out” );
tlHide . play ();
} );
} );
I see in the console in, out, and then nothing. The header remains invisible.