how to change background color on scroll

ByAnurag batra July 2, 2022June 30, 2022

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})`
})

Here is what the above code is Doing:
1. We’re grabbing the section1 element and storing it in a variable.
2. We’re adding an event listener to the window object that listens for the scroll event.
3. When the scroll event is fired, we’re calculating the y value.
4. We’re then using the y value to calculate the new RGB values.
5. Finally, we’re setting the background color of the section1 element to the new RGB values.

Javascript Examples

canvas full screen js

ByAnurag batra July 14, 2022June 30, 2022

(window.onresize = () => { canvas.width = innerWidth, canvas.height = innerHeight; })(); Here is what the above code is Doing: 1. We’re creating a canvas element and appending it to the body of the document. 2. We’re creating a context object from the canvas element. 3. We’re setting the width and height of the canvas…

Javascript Examples

getter in action vuex

ByAnurag batra July 13, 2022June 30, 2022

this.getters[“store/getNameStore”] Here is what the above code is Doing: 1. We’re importing the store module. 2. We’re creating a new store instance. 3. We’re passing the store module to the store instance. 4. We’re passing the store instance to the Vue instance. 5. We’re creating a computed property that uses the store instance to get…

Javascript Examples

json vs gson

ByAnurag batra July 5, 2022June 30, 2022

JSON is a format which has key and values GSON is a process of converting from java to json(serialization), from json to java(deserialization) Here is what the above code is Doing: 1. Create a new Gson instance which we will use to convert Java objects to JSON and vice versa. 2. Create a new Person…

Javascript Examples

popper.js cdn

ByAnurag batra July 6, 2022June 30, 2022

Here is what the above code is Doing: 1. We’re importing the HTML module from the IPython.display library. 2. We’re importing the CSS and JavaScript files that we need to display our HTML. 3. We’re creating a string called html_string that contains the HTML code for our table. 4. We’re using the HTML() function from…

Javascript Examples

defining functions in react

ByAnurag batra July 15, 2022June 30, 2022

class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(‘Click happened’); } render() { return Click Me; } } Here is what the above code is Doing: 1. We create a class called Foo and give it access to React.Component’s functionality by using the extends keyword. 2. We create a…

how to push the get variables without page reloading in Jquery

Javascript Examples

how to push the get variables without page reloading in Jquery

ByAnurag batra July 13, 2022June 30, 2022

const url = new URL(window.location.href); url.searchParams.set(‘param1’, ‘val1’); url.searchParams.delete(‘param2’); window.history.replaceState(null, null, url); // or pushState Here is what the above code is Doing: 1. Create a new URL object with the current URL. 2. Set a new parameter or update an existing one. 3. Delete a parameter. 4. Replace the current URL with the new one.

Similar Posts