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.
Related
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>
I don't have experience with svg and animations, I have the following file jsfiddle which i want to animate the fill path color.
I want to use it as a loader so the new colour should fill the path like Sliding across or something similiar that gives it a look of "loading". You can use any color it's just an example...
Thank you
I know it's not fully the way you want to do it, but view this link:
http://cdn.tinfishcreativedev.eu/eyeLoad/
It has a VERY simple implementation (quite crude at the minute, but just to get you started).
The code in the HTML file is as follows:
<style>
body{
background:#F3F5F6;
text-align: center;
}
.loader{
background: #000;
display: inline-block;
position: relative;
height:63px;
width:100px;
margin-top:300px;
}
.loader img{
display: block;
position: absolute;
top: 0;
left: 0;
z-index:2;
}
.loaderBar{
background: #16C38B;
width: 0;
position: relative;
z-index: 1;
height:100%;
-webkit-animation:grow 2s infinite linear;
}
#-webkit-keyframes grow{
0%{ width:0; }
100%{ width: 100%; }
}
</style>
<div class="loader">
<img src="eye.png" width="100" />
<div class="loaderBar">
</div>
You could even do it with JS instead of keyframes to get it working on the older browsers like IE8 if needed.
I'm using the background-blend-mode on this:
<a href="#" class="blend">
<h3>Title</h3>
<p>Content goes here</p>
</a>
It has a url set for the background-image. When .blend is hovered over, it changes the background to this:
.blend:hover {
background-blend-mode:multiply;
background-color: rgba(0,0,0,.6);
}
So it works, but not in IE (of course). What alternatives are there? Is there some sort of jQuery trick that I can use to get it to work in IE? Or is there a prefix I could use, say -ms- or something similar?
Not the best solution I know, but as IE and MS Edge can't use background-blend-mode (http://caniuse.com/#feat=css-backgroundblendmode).
I get around this by adding a :after class to the element and manipulating that via background-colour and playing with the opacity on the pseudo element.
DEMO
https://codepen.io/nicekiwi/pen/PmZdMK
HTML
<div class="blend"></div>
CSS
.blend {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
background-repeat: no-repeat;
background-attachment: cover;
width: 200px;
height: 200px;
position: relative;
}
.blend:after {
width: 100%;
height: 100%;
content: '';
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s; /* lets transition to be fancy ^_^ */
}
.blend:hover:after {
opacity: 0.3;
}
Iam positioning my div at the center of the page using below css code :
.content{
width:1000px;
height:600px;
margin:auto;
margin-top:auto;
}
My Requirement :
I would like to implement the above in $(document).ready(function () {} using JQuery. Initially i will assign the div negative position and hide it. Then in document.ready i want to show it and animate the div assigning the above properties.
I tried to implement the same. I am able to assign width and height but margin:auto and margin-top:auto; is not working.
It will be very helpful if somebody can guide me..!!
This is what i am doing:
http://jsfiddle.net/rgd9mwjz/
I need to see the animation of div moving from -5550px to center of div. How to achieve this?
You don't need jQuery to center the item, I've used it to add a class on the div in my example, making it come from left to right :
$(function() {
$("div").addClass("shown");
});
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
div
{
top: 50%;
left: -50%;
background: darkred;
width: 100px;
height: 100px;
position: relative;
transform: translate(-50%, -50%);
-moz-transition: .5s ease;
-webkit-transition: .5s ease;
}
div.shown
{
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I've found a interesting reply on this post Using jQuery to center a DIV on the screen
Hope it helps you!
Check this DEMO:
http://jsfiddle.net/60c977nf/
$(document).ready(function()
{
$('.content').css('display','block');
$('.content').addClass('other_properties');
});
I have added a new class to the div .content on document ready state and specified the new styles in the css files. That would make it easier for you to write new styles using the css file itself.
If you want to add styles using jQuery itself then use .css() property itself.
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 :)