egoselfaxis
asked on
Emulating the Zillow homepage effect using javascript?
I'm curious about how I might emulate what's currently going on with the Zillow homepage, .. where clicking on the different tabs both changes the background image, and also changes the appearance and behavior of the search form.
https://www.zillow.com/
I'd like to try to implement something similar on a WordPress site, most likely using JQuery (though I'm not averse to using vanilla JavaScript). Does anyone here have any tips or some "quick start" code examples they could share with me?
By the way .. it's not necessary that I change the page url when I click on the different tabs. I'm just looking to modify the DOM.
Thanks,
- Yvan
https://www.zillow.com/
I'd like to try to implement something similar on a WordPress site, most likely using JQuery (though I'm not averse to using vanilla JavaScript). Does anyone here have any tips or some "quick start" code examples they could share with me?
By the way .. it's not necessary that I change the page url when I click on the different tabs. I'm just looking to modify the DOM.
Thanks,
- Yvan
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Julian -- thank you for this. I've succeeded at creating a working example. I just have one more quick question.
How would I go about adding a similar "cross dissolve" type of effect / animation when the different LI items are clicked? (Right now my prototype seems a bit harsh / abrupt with each transition).
Thanks,
- Yvan
How would I go about adding a similar "cross dissolve" type of effect / animation when the different LI items are clicked? (Right now my prototype seems a bit harsh / abrupt with each transition).
Thanks,
- Yvan
ASKER
It's been a few days and I still haven't heard back. Any thoughts?
- Yvan
- Yvan
Can you explain what you mean by a cross dissolve - can you point us at a site that does what you want?
There are default transitions like fadeIn and fadeOut that you could experiment with - more complex transitions might require additional libraries.
There are default transitions like fadeIn and fadeOut that you could experiment with - more complex transitions might require additional libraries.
ASKER
Yes .. I was just referring to JQuery fadeIn and fadeOut effects. I'm assuming that I'd just do something like this ...
- Yvan
$('#backgroundContainer').fadeOut( "fast" ).fadeIn( "fast").css(backgroundImage: newbg);
.. or am I missing the mark here? - Yvan
ASKER
Hmm .. this definitely isn't working the way I'd hoped it would.
http://sanctuary.royalpalm.com/zillow-example/
Do you have any ideas as to why it's fading to and from white when clicking on the different tabs (instead of to the black background color of the DIV)?
- Yvan
http://sanctuary.royalpalm.com/zillow-example/
Do you have any ideas as to why it's fading to and from white when clicking on the different tabs (instead of to the black background color of the DIV)?
- Yvan
replace :
jQuery('#backgroundContainer').fadeOut( "fast" ).fadeIn( "fast").css(backgroundImage: newbg);
by : jQuery('#backgroundContainer').fadeOut( "fast", function() {
jQuery(this)
.css("backgroundImage", 'url(' + newbg + ')')
.fadeIn( "fast");
});
ASKER
That looks a little better -- but it still seems to be fading to white instead of black.
And I think I might need to preload this different background images, because the transitions are a bit jumpy when I clear my browser's cache and load the page for the first time. Any idea how I might do that, considering that this is going to go on the homepage of a WordPress site? Also .. is it just my imagination, .. or are the foreground elements also fading in and fading out ?
I'd be happy to award you the points and post this as a different question if you thank that'd be more appropriate. Just let me know.
Thanks,
- Yvan
And I think I might need to preload this different background images, because the transitions are a bit jumpy when I clear my browser's cache and load the page for the first time. Any idea how I might do that, considering that this is going to go on the homepage of a WordPress site? Also .. is it just my imagination, .. or are the foreground elements also fading in and fading out ?
I'd be happy to award you the points and post this as a different question if you thank that'd be more appropriate. Just let me know.
Thanks,
- Yvan
it don't fade to white.
it fade mean it start being transparent to totally transparent.
you set you body background to something near white so once it transparent you see the background
if you want to avoid this, put a background (a div) same height and size but background-color to black
it fade mean it start being transparent to totally transparent.
you set you body background to something near white so once it transparent you see the background
body {
background-color: #f7f7f7;
}
if you want to avoid this, put a background (a div) same height and size but background-color to black
ASKER
The background images images are already in a DIV that has the background color of black.
#backgroundContainer {
z-index: -1;
height: 1080px;
width: 100%;
background-color: #000000 !important;
background-image: url('http://sanctuary.royalpalm.com/wp-content/uploads/2018/01/Ocean_OH.jpg');
background-size: contain;
background-repeat: no-repeat;
text-align: center;
padding-top: 20%;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That worked Leakim971. I'm going to just go ahead and award points and close out this ticket .. and likely open up a new either later today or tomorrow, as I'm running in to some other issues that I need to figure out how to resolve.
Thanks guys!
- Yvan
Thanks guys!
- Yvan
You are welcome.
tabX_ID is the value of the ID attribute of each tab
Open in new window