Currently I have this piece of code running a canvas animation that shows subtle stars moving and sparkling. Currently the canvas is it's own element but I'm wanting to move it to be a background element on a parent div. Can anybody show me how to do this. JS fiddle attached here - https://jsfiddle.net/83aahcng/
<div id="container">
<canvas id="pixie"></canvas>
</div>
I would just put a div over pixie like this... div over pixie.
HTML:
<div id="container">
<div id="over_stuff">
Here's some stuff over #pixie!
</div>
<canvas id="pixie"></canvas>
</div>
CSS:
#container {
overflow:hidden;
position:relative;
z-index: 1;
}
#pixie {
z-index:0;
background:#010222;
background:
}
#over_stuff{
color:white;
position:absolute;
top:0px;
left:0px;
z-index:5;
padding:10px;
}
Is there is something I'm not understanding? This seems way too simple
Related
The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.
https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">
Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>
I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
Lets say you have two divs:
<div class="div1"></div>
<div class="div2"></div>
div1 has relative positioning and div2 has absolute positioning. Can div2 be positioned as if it was inside div1 either using CSS or pure Javascript?
Using JavaScript.
You have to wrap divs inside parent container with position: absolute and set div2 position to absolute as well.
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>
And then using javascript:
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
div2.style.left = div1.offsetLeft + 'px';
div2.style.top = div1.offsetTop + 'px';
See JS fiddle
Maybe this fits your question? http://jsfiddle.net/bghxmm3o/
Absolute div2 (blue) positioned into relative div1 (red).
It's just CSS:
#d1 {
position:relative;
top:10px;
left:10px;
width:200px;
height:200px;
background:red;
}
#d2 {
position:absolute;
top:100px;
left:50px;
width:20px;
height:20px;
background:blue;
}
Yes and no, it depends on how you build it and the surrounding HTML. If you put this code directly inside the body then yes, because the body would then be the parent element of both .div1 and .div2. And if you didn't know it already positioning something absolute positions the element to the top left corner of the "closest" relative positioned parent element. (Hard to explain in text)
But if you were to have other HTML outside these two div elements, then you would need a parent element with a position relative.
So as an example:
HTML
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS
.parent {
float:left;
position:relative;
}
.box1 {
width:100px;
height:100px;
float:left;
position:relative;
}
.box2 {
width:100px;
height:100px;
position:absolute;
}
I'm new in html and css and javascript I want to build my first onepage website and I'm using skrollr library but I don't know why I can not use it in true way I have 2 div in my index file and styles in css file, when I write something on second div it does not show and its hide behind the first div here is my code in jsfiddle
<div id="please-scroll" data-0="opacity: 1;" data-800="opacity: 0;">
please scroll to see Dinosaurs life story
</div>
<div id="next_generation" data-800="opacity:1;" data-1000="opacity: 0;">
please scroll moreeeeeeeeeeeeeeeeee
</div>
and here is my css
html, body {
margin:0;
padding:0;
height: 4500px;
width:100%;
}
#please-scroll{
position:absolute;
display:block;
height:100%;
width:100%;
background-color:red;
text-align: center;
z-index:100;
}
#next_generation{
height:100%;
width:100%;
background-color:yellow;
text-align: center;
}
for tag div should be:
div class="..."
not
div id="..."
I am trying to drag an element from a container which is an overflow:hidden div. While dragging , the element goes behind the container (looks as if it's behind the screen).The draggable elements should be dragged outside of their container and remain visible once they are outside.
LINK TO THE FIDDLE
Please note that
1)I cannot use the appendTo inside the draggable(Because it'll cause me issues elsewhere)
2)I cannot use helper:clone again for the same reason.
The complete code follows.
HTML
<div id='outer_container'>
<div id = 'inner_container'>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
</div>
</div>
CSS
#outer_container
{
background:#ededed;
position:absolute;
top:100px;
left:40px;
width:400px;
height:100px;
overflow:hidden;
}
#inner_container
{
position:absolute;
width:2000px;
height:100px;
top:0px;
left:0px;
background:#ededed;
}
.draggable_element
{
position:relative;
width:90px;
height:80px;
top:10px;
left:20px;
margin-right:50px;
background:#ff9600;
float:left;
}
SCRIPT
$('.draggable_element').draggable();
I am hoping that somebody can point me in the right direction.Thanks!