We Keep Coding

How to change value of CSS pseudoelement property using JavaScript in scrollspy?

I'm looking for a relatively simple and standard way of changing CSS pseudoelement property value by JS Scrollspy.
The parent element (section of a landpage) should change grayscale, while scrolled, and its child should have position:fixed.
As it turns out, it's impossible to make it in an easy way, because any filter is removing position:fixed by definition. More about this: CSS-Filter on parent breaks child positioning
Moving that background-image to a pseudoelement creates another problem: manipulation of the pseudoelement's properties by JS.
The expected result: I wanted to make a section of a landing page, having grayscale filter for background image. That's the easy part. But it should has less grayscale, while moving upward (the more picture user see, the more color it has), and centered content element shuffles up from previous section, and later hiding under next one.
So basically I need two things:
filter grayscaled background image, with dynamically changing value of a grayscale, relative to distance to the top of the window (JS scrollspy)
position:fixed central content element visible only in that section
Illustration (with background-picture in pseudoelement) is here: https://codepen.io/tdudkowski/pen/MLyMyG
HTML
<section class="one">
</section>
<section class="two">
<div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>
CSS
section {
position: relative;
max-width: 1000px;
height: 70vh;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
.two {
background-color: transparent;
/* Try to uncomment rule below */
/* filter: grayscale(50%); */
}
.two div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 10rem;
background-color: #f00;
z-index: 1;
}
.one,
.three {
z-index: 100;
}
/* background of section */
section.two::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://picsum.photos/1000/200);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
/* filter: grayscale(50%); */
}

Particles.js as a background? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to use this example as a background but I can't seem to get it to work.
http://vincentgarreau.com/particles.js/#nasa
In order to get around this I'm forced to use a margin top of -1500px just to place my text over the top of it and it's causing major issues with responsiveness.
Does anyone have any idea on how I can use it strictly as a background?
The creator of the plugin has done it here on his website.
http://vincentgarreau.com/en
You can tell because when you inspect it, there is no "canvas" hovering over the top as there is on the CodePen example.

I just managed to do this with the next css code, just as the creator does in his nasa page:
body,
html {
height: 100%
}
#particles-js canvas {
display: block;
vertical-align: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
transition: opacity .8s ease, transform 1.4s ease
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}
Then I wrote <div id="particles-js"></div> just after the body opening tag. Note that you can't see the canvas class because it's being generated by the particles.js library.
Canvas creation code fragment

I've ran into this problem before and fixed it by doing this:
/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
display:block;
background: rgb(33,36,50);
position: fixed;
z-index: -1;
}
then create a div/main element for your content and add this to it:
mainElementNameHere {
position: absolute;
}

Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;
#main-section {
overflow: hidden;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0.48;
}

Try this:
#particle_background canvas{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
where your body has id="particle_background"

I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.
See this pen by Michael Van Den Berg
#particles-js {
width: 100%;
height: 100%;
background-color: #437993;
/*background-image: url('');*/
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
}
canvas {
display: block;
vertical-align: bottom;
}
<body>
<div id="particles-js"></div>
<div> #*Content you want to be in front goes here*# </div>
<body>

If your using particle js for wordpress website and following this link :
http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/
Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”
In this picture, the search bar wasn't working. So, I gave
"z-index: 5"
to it. Now it works fine. Also, the particles are responding well.

You also can implement it like this
<body id="particles-js">
<div class="something">
<h1> something here </h1>
</div>
</body>
in css
.something {
z-index:1;
}
all the element of particle-js placed at the background.
hope useful.

In id="particles-js" just add this code to your css:
position: fixed !important;
display: block;
You can add !important to override the previous styles.

How do I style a circular vertically-loading progress bar?

I'm making a very unique progress bar that visually looks like a glass orb filling up with liquid. Unfortunately, because of the rounded shape, the traditional method of modifying the height doesn't work so well (as demonstrated with this fiddle https://jsfiddle.net/usuwvaq5/2/).
As you can see, having the div height "slide up" is not the desired visual. I have also tried playing a bit with css clip, but was unable to get it to work for me. How can I create the visual effect of the glass "filling" with the second image?

Simply add background-position:bottom; to #inner-progress:
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
background-position:bottom;
width: 100%;
overflow: hidden;
position: absolute;
bottom: 0;
height: 0%;
}
JSFiddle Demo

Jacob Gray probably has the best answer, but here's an alternative:
Fiddle
This approach uses css for the animation, instead of javascript. JS is only used here to trigger the animation, the rest is css.
This uses the css transition property to "animate" the height as it changes from 100% to 0%. The only notable change in the html is that I swapped the background of the inner with the outer.
Perhaps this answer will be a better solution to a future reader of this thread - depending on their implementation and/or preferences.
$(document).ready(function() {
$('#inner-progress').addClass("load");
});
#outer-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
border: 0;
height: 100px;
width: 100px;
position: relative;
}
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
background-color: transparent;
width: 100%;
overflow: hidden;
position: relative;
bottom: 0;
height: 100%;
transition: height 3s;
-webkit-transition: height 3s;
}
.progress-value {
color: #FFF !important;
font-weight: bold;
position: absolute;
top: 40%;
left: 40%;
}
.load{
height: 0% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-progress">
<div id="inner-progress" value="0" max="100"></div>
<span class="progress-value">0%</span>
</div>

fadeIn not working on nth-child(2)

Could someone have a look at my code. what it's suppose to do is animate the img tags using fadeIn and fadeOut but it only fades out the first img and doesn't fade in the second img. I think my css could be wrong and that's why the second image isn't showing Im not getting any errors
its an image on top of another image
jQuery
$(document).ready(function() {
$('.social-media a').on('mouseenter', function(e) {
$(this).find("img:nth-child(2)").fadeIn();
$(this).find("img:nth-child(1)").fadeOut()
});
})
HTML
<div class="social-media">
<a title="Share On Twitter" href="#">
<img alt="" src="images/icon_twitter.png" />
<img class="test" alt="" src="images/icon_twitter_active.png" />
</a>
</div>
CSS
.social-media {
padding-top: 20px;
width: 166px;
margin: 0 auto 10px auto;
}
.social-media a {
position: relative;
width: 55px;
height: 51px;
}
.social-media a img:nth-child(1) {
opacity: 1;
}
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
opacity: 0;
z-index: 2;
}

Instead of hiding the second <img> element with zero opacity, you should use display: none instead:
.social-media a img:nth-child(2) {
position: absolute;
left: 0; top: -33px;
display: none;
z-index: 2;
}
http://jsfiddle.net/8vH4E/
However, I would strongly recommend using a simple CSS image sprite to achieve this effect, which doesn't require JS.
Update: Since OP asked if it is possible to do with CSS, I have modified the Fiddle to exclude the use of JS and simply rely on the use of CSS and pseudo-elements: http://jsfiddle.net/8vH4E/2/
.social-media a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-image: url(http://placehold.it/200x200);
background-size: cover;
}
.social-media a::before {
background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
background-size: cover;
content: '';
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.social-media a:hover::before {
opacity: 1;
}
My strategy is rather simple:
Use background images instead. For sizing, I have used cover but you are free to use any sizing (absolute pixel/point sizes, relative percentage sizes or dynamically-computed sizes like cover, contain)
For the hover state, use an absolutely-positioned pseudo element that covers the entire <a> (by positioning it absolutely and with zero offset from all four directions). We don't need pointer events on the pseudo element, so we set it to pointer-events: none
When the <a> element is hovered on (targeted with the :hover selector), we toggle the opacity of the pseudo-element from 0 to 1. We declare the transition property on the pseudo-element to allow for smooth, browser-computed and JS-agnostic transition.

the sprite is good but does not give smooth fading animation (think that was the main reason, KDM, wasn't it?).
So let's fix existing code:
as the fadeOut() turns the element to the display: none; state, as the fadeIn() starts working when the element is display: none;. So let's turn the 2nd image in display: none; first;
We can omit the opacity at all for both images (relying on 1.0 as default); $.fadeIn/Out() use the opacity from the CSS as the start/end point of the animation. Of course you can set the opacity explicitly for each image if it's designed in such way;
display: inlibe-block; for the <a> is a good point because it contains inline elements which possibly can disappear (display: none;); that causes the the whole <a> disappearing and the mouseleave event firing with unexpected UI bugs.
Enjoy http://jsfiddle.net/8vH4E/1/ and thanks to Terry for the fiddle :)

JavaScript on MouseOver change BODY style. Reverse on MouseOut

I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.

It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle

function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}