Use JavaScript/jQuery to change linear gradient percentage
Question
I have a page with a linear gradient in the wrapper element.
Here is the HTML:
<body>
<div id="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</body>
The CSS is:
#wrapper {
position: relative;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
background: -webkit-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%); /* Firefox 3.6 - 15 */
background: linear-gradient(rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 60%, rgba(180,180,180,1) 100%);
padding-bottom: 1px;
}
The gradient shows up ok on its own. However, I want to use js/jquery to change the gradient as I scroll down the page. I don't think the current js code is affecting anything at the moment. How do I fix this? Thanks.
$(window).scroll(function(){
var topDis = $(window).scrollTop();
$("#wrapper").css("background", "linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);");
$("#wrapper").css("background", "-webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);")
});
2 answers
solution1
0 2019-08-11 09:39:36
It can be achieved without Javascript/jQuery. Simply by using CSS. Below is the example.
body { height: 3000px; /* height has to be defined for scrolling */ background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%); }
<h1>Change Background Gradient on Scroll</h1> <h2>Linear Gradient - Top to Bottom</h2> <p>This linear gradient starts at the top. It starts green, transitioning to blue.</p> <h2 style="position:fixed;">Scroll to see the effect.</h2>
solution2
0 2021-06-30 09:43:28
Delete the semicolon before the closing quote.
$("#wrapper").css("background", "-webkit-linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%);")
It should look like this:
$("#wrapper").css("background", "linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(30,30,30,1) " + (60 - topDis/100) + "%, rgba(180,180,180,1) 100%)")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I change linear-gradient percentage via JavaScript?
Animating a CSS linear-gradient's change in percentage values in Javascript?
How to change background-image properties (linear-gradient) with jQuery?
replace linear-gradient percentage by using regex
How to use a function to change background color with linear gradient?
Box, linear gradient, css and javascript
Linear gradient for background image in JavaScript
changing repeating linear gradient with Javascript
How to use linear gradient in rechart
generating manual linear gradient in vue with the color ,percentage and degree input
Related Tags