invert background color of page on scroll
invert background color of page on scroll
Still pretty new to coding here. I am trying to create a scroll effect like this:
http://richbrown.info/about.html
I have tried a few things but can't seem to get the color to fade away like the example above. All I can manage is the color coming up from the bottom.
I don't think it will be much help but, here is my code:
$(function() {
var header = $(".about-bkg");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('about-bkg').addClass("about-bkg-alt");
} else {
header.removeClass("about-bkg-alt").addClass('about-bkg');
}
});
});
.about-bkg {
height: 900px;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
}
.about-bkg-alt {
height: 400px;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 200;
width: 100%;
transition: all 0.5s;
}
.wrap {
height: 2000px;
padding-top: 200px;
}
<header class="about-bkg"></header>
TEXT Transform
instead of transition all use ` transition: background-color 600ms,color 600ms;`
– Suhail AKhtar
Jul 3 at 4:51
1 Answer
1
If you want not only change background-color, but other properties too - you should use themes.
background-color
Also, this is a perfect opportunity to use css custom-properties:
custom-properties
$(function() {
let cont = $('.container'),
win = $(window);
win.scroll(function() {
let scroll = win.scrollTop();
if (scroll >= 200) {
cont.removeClass('container-dark').addClass('container-light');
} else {
cont.removeClass('container-light').addClass('container-dark');
}
});
});
body,
html {
margin: 0;
}
.container {
min-height: 100vh;
padding: 1rem;
font-family: Open Sans;
/* default colors without a theme */
--text-color: #000;
--background-color: #fff;
color: var(--text-color);
background-color: var(--background-color);
transition: color .5s, background-color .5s;
}
/* dark-theme */
.container-dark {
--text-color: #fff;
--background-color: #000;
}
/* light-theme */
.container-light {
--text-color: #000;
--background-color: #fff;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan mauris convallis, placerat libero ac, bibendum orci. In euismod elit vel cursus molestie. Mauris lobortis neque in consectetur facilisis. Cras pretium quam orci, ac luctus justo Praesent in felis vel leo hendrerit ullamcorper at eu nibh. Vestibulum id turpis risus. Etiam vitae metus odio. Nullam porta rutrum ante sed congue. Nunc id feugiat erat, id aliquet lorem. Morbi malesuada orci et faucibus consectetur. Vestibulum a elementum Nullam mauris tortor, vestibulum nec malesuada quis, finibus vel odio. Aliquam at lobortis leo. Praesent sollicitudin nunc non justo pharetra, vitae auctor nisl ullamcorper. Phasellus porttitor consequat lorem vulputate consectetur. Sed pretium scelerisque In ultrices ut quam efficitur semper. Vivamus scelerisque sit amet sapien vitae accumsan. Vivamus scelerisque lectus iaculis metus ullamcorper, ut egestas arcu ornare. Maecenas vitae scelerisque elit. Vestibulum non placerat metus, vitae ultrices tellus. Cras gravida elit lectus, non eleifend nunc aliquam vel. Aenean eget ligula vitae neque ornare ultrices ac quis ipsum. Nullam in odio sapien. Morbi eget libero ac elit congue dignissim. Sed est lacus, rhoncus eget leo commodo, vulputate commodo felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan mauris convallis, placerat libero ac, bibendum orci. In euismod elit vel cursus molestie. Mauris lobortis neque in consectetur facilisis. Cras pretium quam orci, ac luctus justo Praesent in felis vel leo hendrerit ullamcorper at eu nibh. Vestibulum id turpis risus. Etiam vitae metus odio. Nullam porta rutrum ante sed congue. Nunc id feugiat erat, id aliquet lorem. Morbi malesuada orci et faucibus consectetur. Vestibulum a elementum Nullam mauris tortor, vestibulum nec malesuada quis, finibus vel odio. Aliquam at lobortis leo. Praesent sollicitudin nunc non justo pharetra, vitae auctor nisl ullamcorper. Phasellus porttitor consequat lorem vulputate consectetur. Sed pretium scelerisque In ultrices ut quam efficitur semper. Vivamus scelerisque sit amet sapien vitae accumsan. Vivamus scelerisque lectus iaculis metus ullamcorper, ut egestas arcu ornare. Maecenas vitae scelerisque elit. Vestibulum non placerat metus, vitae ultrices tellus. Cras gravida elit lectus, non eleifend nunc aliquam vel. Aenean eget ligula vitae neque ornare ultrices ac quis ipsum. Nullam in odio sapien. Morbi eget libero ac elit congue dignissim. Sed est lacus, rhoncus eget leo commodo, vulputate commodo felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan mauris convallis, placerat libero ac, bibendum orci. In euismod elit vel cursus molestie. Mauris lobortis neque in consectetur facilisis. Cras pretium quam orci, ac luctus justo Praesent in felis vel leo hendrerit ullamcorper at eu nibh. Vestibulum id turpis risus. Etiam vitae metus odio. Nullam porta rutrum ante sed congue. Nunc id feugiat erat, id aliquet lorem. Morbi malesuada orci et faucibus consectetur. Vestibulum a elementum Nullam mauris tortor, vestibulum nec malesuada quis, finibus vel odio. Aliquam at lobortis leo. Praesent sollicitudin nunc non justo pharetra, vitae auctor nisl ullamcorper. Phasellus porttitor consequat lorem vulputate consectetur. Sed pretium scelerisque In ultrices ut quam efficitur semper. Vivamus scelerisque sit amet sapien vitae accumsan. Vivamus scelerisque lectus iaculis metus ullamcorper, ut egestas arcu ornare. Maecenas vitae scelerisque elit. Vestibulum non placerat metus, vitae ultrices tellus. Cras gravida elit lectus, non eleifend nunc aliquam vel. Aenean eget ligula vitae neque ornare ultrices ac quis ipsum. Nullam in odio sapien. Morbi eget libero ac elit congue dignissim. Sed est lacus, rhoncus eget leo commodo, vulputate commodo felis.https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
convallis rhoncus. Etiam libero lorem, pretium in sem a, ullamcorper aliquet ligula. Donec consectetur augue velit, et tincidunt nisi maximus ut. Ut ultrices euismod lectus. Fusce at leo enim. Ut vitae neque turpis. Mauris iaculis urna venenatis quam
porttitor pulvinar vitae at diam.
metus, vulputate fermentum felis. Donec at justo finibus, luctus augue ut, tincidunt ligula. Integer nec augue odio. Vestibulum dapibus, massa in imperdiet suscipit, nibh velit fringilla eros, id efficitur enim turpis at velit. Pellentesque porta
nibh eu rutrum mattis.
augue in euismod. Fusce id commodo diam, at pellentesque mi. Nunc tortor risus, posuere in nulla sed, vestibulum pellentesque neque. Nulla vel laoreet mauris.
Etiam accumsan urna ipsum. Phasellus faucibus vestibulum tellus. Etiam euismod mi purus, tempor sodales ligula cursus egestas. Quisque nec diam ac metus dignissim consequat. Sed porta enim vitae congue scelerisque. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim nibh nec commodo mollis. Sed sed metus vitae lacus vehicula finibus. Ut cursus arcu a lorem semper, vitae laoreet diam ultricies. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Pellentesque sit amet commodo tortor, vitae lobortis purus.
Mauris mollis ac neque non maximus. Vivamus at vulputate risus. Maecenas sagittis, mi ac dignissim consequat, orci est imperdiet tellus, vel pellentesque libero ante finibus dui. Nulla ex nunc, venenatis quis velit sit amet, malesuada vulputate mi.
convallis rhoncus. Etiam libero lorem, pretium in sem a, ullamcorper aliquet ligula. Donec consectetur augue velit, et tincidunt nisi maximus ut. Ut ultrices euismod lectus. Fusce at leo enim. Ut vitae neque turpis. Mauris iaculis urna venenatis quam
porttitor pulvinar vitae at diam.
metus, vulputate fermentum felis. Donec at justo finibus, luctus augue ut, tincidunt ligula. Integer nec augue odio. Vestibulum dapibus, massa in imperdiet suscipit, nibh velit fringilla eros, id efficitur enim turpis at velit. Pellentesque porta
nibh eu rutrum mattis.
augue in euismod. Fusce id commodo diam, at pellentesque mi. Nunc tortor risus, posuere in nulla sed, vestibulum pellentesque neque. Nulla vel laoreet mauris.
Etiam accumsan urna ipsum. Phasellus faucibus vestibulum tellus. Etiam euismod mi purus, tempor sodales ligula cursus egestas. Quisque nec diam ac metus dignissim consequat. Sed porta enim vitae congue scelerisque. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim nibh nec commodo mollis. Sed sed metus vitae lacus vehicula finibus. Ut cursus arcu a lorem semper, vitae laoreet diam ultricies. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Pellentesque sit amet commodo tortor, vitae lobortis purus.
Mauris mollis ac neque non maximus. Vivamus at vulputate risus. Maecenas sagittis, mi ac dignissim consequat, orci est imperdiet tellus, vel pellentesque libero ante finibus dui. Nulla ex nunc, venenatis quis velit sit amet, malesuada vulputate mi.
convallis rhoncus. Etiam libero lorem, pretium in sem a, ullamcorper aliquet ligula. Donec consectetur augue velit, et tincidunt nisi maximus ut. Ut ultrices euismod lectus. Fusce at leo enim. Ut vitae neque turpis. Mauris iaculis urna venenatis quam
porttitor pulvinar vitae at diam.
metus, vulputate fermentum felis. Donec at justo finibus, luctus augue ut, tincidunt ligula. Integer nec augue odio. Vestibulum dapibus, massa in imperdiet suscipit, nibh velit fringilla eros, id efficitur enim turpis at velit. Pellentesque porta
nibh eu rutrum mattis.
augue in euismod. Fusce id commodo diam, at pellentesque mi. Nunc tortor risus, posuere in nulla sed, vestibulum pellentesque neque. Nulla vel laoreet mauris.
Etiam accumsan urna ipsum. Phasellus faucibus vestibulum tellus. Etiam euismod mi purus, tempor sodales ligula cursus egestas. Quisque nec diam ac metus dignissim consequat. Sed porta enim vitae congue scelerisque. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Morbi dignissim nibh nec commodo mollis. Sed sed metus vitae lacus vehicula finibus. Ut cursus arcu a lorem semper, vitae laoreet diam ultricies. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Pellentesque sit amet commodo tortor, vitae lobortis purus.
Mauris mollis ac neque non maximus. Vivamus at vulputate risus. Maecenas sagittis, mi ac dignissim consequat, orci est imperdiet tellus, vel pellentesque libero ante finibus dui. Nulla ex nunc, venenatis quis velit sit amet, malesuada vulputate mi.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Here is my css .about-bkg { height: 900px; background-color: rgba(0,0,0,0.5); position: fixed; top: 200; width: 100%; transition: all 0.5s; } .about-bkg-alt { height: 400px; background-color: rgba(0,0,0, 0.8); position: fixed; top: 200; width: 100%; transition: all 0.5s; } .wrap { height: 2000px; padding-top: 200px; }
– Bently
Jul 3 at 4:01