JS & CSS Help On Scroll
- Started
- Last post
- 9 Responses
- mg33
I am trying to fade between two colors within a div that is fixed and uses cover to fill the screen.
Ideally, the color transition is from rgba(0,0,0.0) to rgba(0,0,0.5) to introduce a transparent black background above something below it.
Been fooling around with a few different examples and tutorials, and nothing ends up working. This is within a Wordpress page where I have an overlay layer that's fixed above a background video.
Seems like it should be so much easier than it is. Any suggestions or tutorials any of you have used?
- sted1
visual composer?
- can you drop the url here?
but since you have video in the bg drawing a canvas object and doing the transition on that would be recommendedsted - http://theagelesssea… PW: agelessseamg33
- I've been slowly building this site whenever I have the chance. Basically, I want the layer above the video to be fully transparent until scrolling begins...mg33
- Once the content portion starts, I want to fade in on scroll the rgba(0,0,0.65) layer so that the video bg is a little darker, easier to read what's above it.mg33
- There a css position property called 'sticky' (I think) , sticks a header to the top of the page a bit like how Instagram scrolls. You could use that with a trmonNom
- *Transistion, likely.monNom
- Or just add a class to the body when scrollY != 0monNom
- Here u go:
https://pastebin.com…sted - quick fix for the initial status of that overlay:
https://pastebin.com…sted
- can you drop the url here?
- sted0
Replace this JS (please keep in mind that $(... isn't the way you call jquery in WP unless u defined it earlier proper call is jQuery(... )
<script type="text/javascript">
$(document).scroll(function() {
var positionScroll = $(this).scrollTop();if(positionScroll <= 499) {
$(".overlay").css("background-color", "#fff");
} else if (positionScroll > 500 && positionScroll < 1100) {
$(".overlay").css("background-color", "#2ecc71");
} else {
$(".overlay").css("background-color", "#fff");
}
});
</script>With this:
<script type="text/javascript">
/* Add overlay */
jQuery(document).ready(function... {
jQuery('<dvi class="overlay"></div>').insertAfter(jQuery('.nk-awb-inner'));
jQuery('.nk-awb-wrap .overlay').fadeOut();
});
/* get viewport height and adjust the scroll trigger position by 300px */
var vH=jQuery(window).height()-300;/* set the overlay status */
var overlay=false;jQuery(document).scroll(function... {
/* get window scroll px */
var positionScroll = jQuery(this).scrollTop();/* add/remove overlay whenever its required */
if(positionScroll>vH && !overlay){
overlay=true;
jQuery('.nk-awb-wrap .overlay').fadeIn();
}else if(positionScroll<vH && overlay){
overlay=false;
jQuery('.nk-awb-wrap .overlay').fadeOut();
}
});
</script>Add this CSS for the overlay:
.nk-awb-wrap .overlay{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #000, #000);
opacity: .7;
}
.nk-awb-wrap .overlay {
z-index: 1;
}
.nk-awb-wrap > * {
z-index: 100;
}
- sted0
and if you add this to the (document).ready(function() it will take care of the pages loaded with larger scroll position than the viewports top secion (anchor links etc.).
if(positionScroll>vH && !overlay){
overlay=true;
jQuery('.nk-awb-wrap .overlay').fadeIn();
}else if(positionScroll<vH && overlay){
overlay=false;
jQuery('.nk-awb-wrap .overlay').fadeOut();
}
- sted0
All together because qbn cuts some parts of the code:
- sted0
quick fix for the initial status of that overlay:
https://pastebin.com/wPBAviL7
- mg332
Thank you sted! This worked. :) Really appreciate you providing a solution for this!
- mg330
sted - let's say I wanted to change this for sections of the page based on where I've scrolled to. How would you go about adding additional scroll points in that javascript to make it work?
- sted0
Here u go:
https://pastebin.com/4JaLhUDKnote that color js array what you can move outside of this script and define colors per pages.
this is fixed to the viewport height not pre-definied pixel heights or anchors.
this will only allow it to run if the specific div is on the page:
if(('.nk-awb-inner').length){and note the css change @
.nk-awb-wrap .overlay
- sted1
I think this is what u can actually use:
anchored to the h2 tags ... jQuery( 'h2' ).filter...
with these two variables (converts the text to lower case to avoid issues)/* set the sections with words inside h2 tags or whatever */
var words=['music','information'];/* set overlay bg colors for the sections, nobody cares if it has more than required lol */
var colors=['#4E1402','#3f2f4f','#13...- I can't get that video playing anywhere so let me know how this affects that stuff lol :Dsted