Dynamically change background color on scroll
You need to smoothly interpolate the colors by taking into account the page's scroll offset (window.scrollY
, or window.pageYOffset
on older browsers).
The Samsung site is transitioning a solid color instead of a gradient, which is a bit simpler.
Like this (see CodePen):
const [red, green, blue] = [69, 111, 225]
const section1 = document.querySelector('.section1')
window.addEventListener('scroll', () => {
let y = 1 + (window.scrollY || window.pageYOffset) / 150
y = y < 1 ? 1 : y // ensure y is always >= 1 (due to Safari's elastic scroll)
const [r, g, b] = [red/y, green/y, blue/y].map(Math.round)
section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})
You can apply the same logic to the gradient colors.
JavaScript Change Background Color On Scroll
Here is a dynamic way.
Get all containers elements and add the position of their top to an array:
containers = document.getElementsByClassName("container");
var containertops = [];
containertops.push(0); // add for space before 1st container
for (var i = 0; i < containers.length; i++) {
containertops.push(containers[i].offsetTop);
}
Make an array of the colour classes in the order to be used. It is easy to change the colours and order doing this:
// array of colours to use
var colours = [
"white",
"color-violet",
"color-indigo",
"color-blue",
"color-green",
"color-yellow",
"color-orange",
"color-red",
];
In scroll function, loop through the array of containers top positions. For each i
in the loop, use this as an index to get a new colour from the colours array so the colour changes for every container. If there are more containers than colours, use the last colour for the rest.
// loop through the containers and add a new colour as the containers change
for (var i = 0; i < containertops.length; i++) {
// if this container is at the top of the screen get a new colour class
if (document.body.scrollTop >= containertops[i] || document.documentElement.scrollTop >= containertops[i]) {
document.body.className = ''; // clear class
// if we have not enough colours, use the last colour class again
colourclass= (i>=colours.length?colours.length-1: i);
document.body.classList.add(colours[colourclass]);
}
}
This is the code working:
//dynamically add all containers to array
containers = document.getElementsByClassName("container");
var containertops = [];
containertops.push(0); // add for space before 1st container
for (var i = 0; i < containers.length; i++) {
containertops.push(containers[i].offsetTop);
}
// array of colours to use
var colours = [
"white",
"color-violet",
"color-indigo",
"color-blue",
"color-green",
"color-yellow",
"color-orange",
"color-red",
];
function showScrollColorChange() {
// loop through the containers and add a new colour as the containers change
for (var i = 0; i < containertops.length; i++) {
// if this container is at the top of the screen get a new colour class
if (document.body.scrollTop >= containertops[i] || document.documentElement.scrollTop >= containertops[i]) {
document.body.className = ''; // clear class
// if we have not enough colours, use the last colour class again
colourclass= (i>=colours.length?colours.length-1: i);
document.body.classList.add(colours[colourclass]);
}
}
}
window.onscroll = function() {
showScrollColorChange()
};
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
transition: background 300ms linear, color 300ms linear;
}
.container {
display: flex;
justify-content: center;
margin-top: 20px;
padding: 50px;
min-height: 100vh;
}
p {
width: 50%;
font-size: 20px;
}
img {
width: 500px;
height: 500px;
border-radius: 5px;
}
/* colours */
.color-violet {
background-color: #7A4EAB;
}
.color-indigo {
background-color: #4332CF;
}
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
.color-orange {
background-color: #F19031;
}
.color-red {
background-color: #F2293A;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil at eaque in aliquam assumenda. Officiis omnis ex sunt quaerat magni. Provident at nihil molestias dolores tempora voluptas laborum aspernatur sint.</p>
<img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
</div>
Trying to Dynamically change background video as user scrolls
you can just change the video.src property for changing video instead of creating a new video source eachtime , but your main issue was because you were using "document.body.scrollTop" it was not changing I have edited the code
HTML
<div class="section">
<h1>1</h1>
<div class="video-container">
<video autoplay loop id="video-background" muted autoplay></video>
</div>
</div>
JS file
var video = document.getElementById('video-background');
var source = document.createElement('source');
window.onscroll = function() {
if (document.documentElement.scrollTop > 200) {
if(video.src !== 'https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4'){
video.src='https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4';
}
}
else{
if(video.src !== 'https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4')
video.src='https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4';
}
};
This is the fiddler attached https://jsfiddle.net/qtrfj3ks/4/
Dynamically change navbar color on scroll
Tweaking the computations a little, you could get something like this (instead of reducing the rgb values and fading to black, we are now increasing them and hence fading to white):
const [red, green, blue] = [249, 82, 4];const section1 = document.querySelector('.navbar');
window.addEventListener('scroll', () => { let y = 1 + (window.scrollY || window.pageYOffset); y = y < 1 ? 1 : y; const [r, g, b] = [red + y, green + y, blue + y].map(Math.round); section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;})
body { height: 100vh; margin: 0; padding: 0;}.navbar { position: fixed; top: 0; left: 0; background-color: rgb(249, 82, 4); height: 50px; width: 100%; transition: background-color 200ms ease;}.section { background: rgb(249, 82, 4); height: 300%; }
<html><body> <section class="navbar"> </section> <section class="section"> </section></body></html>
change background-color of navbar when scroll event with vuejs
Add event listener to your window and assign new data to your data model and update it's value when scroll event is started. see code below
date model
data: {
scrollPosition: null
},
methods
methods: {
updateScroll() {
this.scrollPosition = window.scrollY
}
}
mounted hook
mounted() {
window.addEventListener('scroll', this.updateScroll);
}
Now in your case, put this in your navbar
<nav :class="{change_color: scrollPosition > 50}">
...
...
</nav>
and put css to your change_color class
<style scoped>
.change_color {
background-color:red
}
</style
Dynamically change UITableViewCell background color on scroll
You can create a gradient like the messages app using the CAGradientLayer
.
Now, you can listen to the table view's scrolling using the UIScrollView
delegate API. When scroll occurs, get all the visible cells of your table view, and calculate their frames in the superview (the table view) using convertPoint:toView:
or convertRect:toView:
. You can then make a small calculation of lighter and darker colors depending on the y coordinate.
Related Topics
Regex to Get String Between Curly Braces
How to Add a Dynamic Action That Will Redirect to Another Page by Executing JavaScript Code
Blocking Device Rotation on Mobile Web Pages
Append Data to Json Array Issue
How to Add or Update a Query String Parameter
Pause/Stop Videos into Tabs When I Clicked on a Tab
Scaling Between Two Number Ranges
Can We Map Over Two Arrays At Same Time in Js
How to Convert Gmt Time to Ist Time in JavaScript
Convert JavaScript Date Format to Yyyy-Mm-Ddthh:Mm:Ss
How to Redirect Drop Down Menu When Option Is Selected
Javascript/Regex: Remove Text Between Parentheses
Reactjs: Download CSV File on Button Click
Redirect Another Page After Successful Form Submission
How to Read a CSV File into a 2D Array in JavaScript
Check If a Number Has a Decimal Place/Is a Whole Number
Dynamically Increase and Decrease an Input Text Box Size Depending on Another Selector Width