I'm not a front end developer so sorry if my question look easy. I search the whole day figuring out how to create a z-index like effect but with a special condition. (Z-index don't work for what I want to accomplish and it's normal).
I would like to find a way to make the text disappear and appear when it cross a div. But the problem that I have with z-index is the following : the text of the first div do not disapear when it cross the red div.
https://jsfiddle.net/2bry9nuj/20/
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>>
</div>
#firstDiv
{
position: relative;
width: 100%;
height: 500px;
background-color:green;
z-index: 1;
}
#secondDiv
{
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1
{
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
If you don't understand the problem properly you can see a demo on the homepage of this website just scroll down and you will see. https://www.lucidmotors.com/
You are almost good, you simply need to clip the text to its section. You can use clip-path for this
#firstDiv {
position: relative;
width: 100%;
height: 500px;
background-color: green;
}
#secondDiv {
position: relative;
width: 100%;
height: 500px;
background-color: red;
}
h1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#firstDiv,
#secondDiv {
clip-path:inset(0);
}
<div id="firstDiv">
<h1 style="">text first div</h1>
</div>
<div id="secondDiv">
<h1>text second div</h1>
</div>
position:fixed doesnt respect z-index cause of the CSS spec or whatever, so you need javascript for this. Please take a look at the following code
text = document.getElementsByTagName("h1");
window.addEventListener("scroll",scroll);
bounds = [];
for(i=0; i<text.length; i++){
bounds.push(text[i].getBoundingClientRect());
}
scroll();
function scroll(){
for(i=0; i<text.length; i++){
text[i].style.top = this.scrollY - bounds[i].top + "px";
}
}
body{
margin:0;
}
#firstDiv, #secondDiv{
height:100vh;
background:grey;
overflow:hidden;
position:relative;
}
#secondDiv{
background:tomato;
}
h1{
position:absolute;
text-align:center;
line-height:100vh;
width:100%;
}
<div id="firstDiv">
<h1>
test1
</h1>
</div>
<div id="secondDiv">
<h1>
test2
</h1>
</div>
cheers
Related
Am trying to make a whole screen overlay, and just pop a single DOM above it, it is kind of web game tutorial which tell the user which button he should press.
Like the above image illustrate, am trying to hide everything under the overlay and only pop the red icon above it
What I've tried so far
I've added a div directly under the body tag (this will be the overlay) that will have a z-index greater that other elements in the page, and only the focused DOM will have a greater z-index than the overlay
Issue
This didn't work because am having a translate for the opts-container element, and remove this style is not an option for me because am using it all over the elements.
code (to illustrate)
$("#veil").hide();
$('.icons-group-s div').on('mouseenter',function(){
console.log("hovered");
$("#veil").show();
})
$("#veil").on('mouseleave', function(){
console.log("hide");
$("#veil").hide();
});
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
#veil {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
#policy {
z-index: 102;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="veil">
</div>
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>
possible solutions in my mind
1- make clipped overlay
2- clone the focused object to be inside the veil div
3- focus the parent of the object and reduce opacity of child elements (workaround)
how can I pop an element over an overlay even if it has a transform style ?
maybe a hack around ?
Consider a big box-shadow on the element instead of an overlay:
#opts-container {
width: 100%;
position: relative;
transform:translateX(50px)
}
.icons-group-s {
height: 500px;
text-align: center;
padding-top: 10px;
position:absolute;
top: 0;
}
.icons-group-s div {
width: 100px;
height: 100px;
background: #f00;
margin-left: 10px;
display: inline-block;
position: relative;
}
/* Make sure the stacking context is also on the top */
#opts-container:hover {
z-index:9999;
}
/* make the element on the top and add a big shadow
100vw + 100vh will make sure that you will cover all the screen
Or use any other big value
*/
#opts-container:hover #policy {
position:relative;
z-index:9999;
box-shadow:0 0 0 calc(100vw + 100vh) rgba(0,0,0,0.5);
}
<div id="opts-container" class="hor menu-bottom">
<div class="icons-group-s">
<div id="policy" class="text-under-icon"></div>
<div id="military" class="text-under-icon" ></div>
<div id="socity" class="text-under-icon"></div>
<div id="eco" class="text-under-icon" ></div>
<div id="inventory" class="text-under-icon" ></div>
</div>
</div>
I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?
I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.
Any ideas?
$(document).on("click", ".duplicate", function() {
var $wrapper = $('.wrapper .inner');
$wrapper.find('.color').each(function() {
$wrapper.append($(this).clone());
});
});
.wrapper {
width: 75%;
margin: 12px auto;
height: 26px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 100%;
position: absolute;
display: flex;
}
.wrapper .color {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
</div>
<button class='duplicate'>
Duplicate
</button>
In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.
Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.
But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...
I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:
.wrapper {
width: 75%;
margin: 12px auto;
position: relative;
}
.wrapper .inner {
width: 100%;
height: 25px;
display: flex;
border-radius: 6px;
overflow: hidden;
}
.wrapper .color {
width: 100%;
height: 100%;
}
.new {
margin-top:5px;
height:25px;
border-radius: 6px;
background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
background-size:100% 100%;
animation:change 5s linear infinite alternate;
}
#keyframes change {
from {
background-position:0 0;
}
to {
background-position:-1000px 0;
}
}
<div class="wrapper">
<div class="inner">
<div class="color" style="background:red;width:231%"></div>
<div class="color" style="background:purple;width:111%"></div>
<div class="color" style="background:orange;width:91%"></div>
</div>
<div class="new"></div>
</div>
I was wondering if you can help me with this.
I have a div (in white) where I need to put two circular buttons (in green) on the borders. Everything should be done with CSS.
It should look like this:
Screenshot
Now, the thing is that I don't know the size of the white div, and I won't know it at the time of creation, because it will get added to the DOM afterwards. All I know is that the white div has a percentage width and height relative to its future parent. So, at the time of creation, since it's not yet added, any calls to width(), height() or its css values won't work.
I've seen all those snippets that tell you how to make a div with a fixed aspect ratio. I need this now, I need the button to be 1:1, but all I know about the dimensions, is that it has to be 100% of the height of the white div (and therefore, its width should be equal as its height). All the examples I've seen assume that you know the width and to make the height keep the ratio. In my case, what I know is the height (100%) and I want the width to adapt.
I have no idea how to achieve this.
This is my snippet:
body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
}
.arrow:after{
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
https://jsfiddle.net/7bxecL9m/
If you know how can I do this without entering any fixed value (jQuery use is of course valid), I'd really appreciate it.
Thanks.
There are many variables here:
Since container's height is % and circle radius is px units, one is static and the other one will resize.
The only way to preserve 1:1 with just html/css, considering the container's height % will resize circle's height as well, would be to isolate circle's div width & height to something static like px units.
Now, since you said no fixed dimensions, the only thing I can think of is to comment .arrow's 100% height, to prevent resizing other than 1:1, and nesting a div inside .arrow to restrain 1:1 with static units (ideally impacting .arrow directly would be less code but if you don't want/can't set them on that element, maybe you consider this).
If you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You could use Javascript to achieve this, but your border-radius is tied to container's in px static units, since container will always be bigger something like border-radius: 50% wouldn't work for both, 50% radius of circle would never match 50% of container's (that is, if you care about radius alignment).
body {
background-color: #DCDCDC;
}
body,
html {
height: 100%;
}
.container {
width: 50%;
height: 37%;
background: white;
border-radius: 20px;
position: relative;
}
.arrow {
background: green;
border-radius: 20px;
/*height: 100%;*/
position: absolute;
overflow: hidden;
}
.bLimit {
height: 40px;
width: 40px;
line-height: 40px;
}
.arrow:after {
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow">
<div class="bLimit">button overflow</div>
</div>
<div class="arrow">
<div class="bLimit">button</div>
</div>
</div>
Why not doing a fixed width in percent for your arrow :
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
width: 10%;
}
body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.container:after,.container:before{
content: " ";
display: block;
padding: 4%;
z-index: 999;
top: 0;
position:absolute;
background: green;
border-radius: 50%;
}
.container:before {
left: 0;
}
.container:after{
right: 0;
}
<div class="container">
</div>
You can achieve using before and after CSS pseudo selectors. You check this Example.
There is a posibility to get this result using a image (that won't show) of the required ratio.
In this case, the ratio is 1:1 so we will use an image of 50px (but it can be any size)
.container {
width: 300px;
height: 20px;
border: solid 1px blue;
margin: 40px;
position: relative;
}
.container:nth-child(2) {
height: 40px;
}
.container:nth-child(3) {
height: 60px;
}
.arrow {
height: 100%;
background-color: red;
opacity: 0.5;
position: absolute;
border-radius: 50%;
transform: translateX(-50%);
}
.arrow:last-child {
right: 0px;
transform: translateX(50%);
}
img {
height: 100%;
opacity: 0;
}
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
I am trying to unveil a responsive background image. Basically, I have a value on load. Let's say 50%. So I want half of my image to be sharp, and the other half to be blurred.
Never done this before so I had the idea to produce two images : one plain, one blurred.
HTML - Two empty divs. Those divs are in a container-fluid div, so their width change at every window resize, that's important.
<div class="col-lg-9 left-header">
<div class="overlay">
</div>
<div class="bg">
</div>
</div>
<div class="col-lg-3 right-header">
// some stuff
</div>
Now, everything else has to be js and css.
So I start to style my divs accordingly.
Blurred bg, notice absolute positionning :
.overlay {
background:url('../img/overlay.jpg');
height:580px;
width:100%;
background-position:right;
background-size:cover;
position:absolute;
right:0;
}
Non-blurred bg
.bg {
background:url('../img/bg.jpg');
background-size:cover;
background-position:right;
height:580px;
}
As you can see in the jsfiddle https://jsfiddle.net/yqdx9vgc/, there is a big problem especially at large widths. Indeed, I wanted to play with the width parameter of the .overlay. But then, the two background cover images aren't of the same proportions, so the effect is not working.
Ideally, in the end, I want to set the width with jquery. For instance, if my value is 50%, then I tell jquery to put .overlay at 50% width. But my solution isn't working, how could I keep the same dimensions for both background images with different div sizes ? While keeping the responsive effect
I achieved this effect with pure CSS, enjoy:
https://jsfiddle.net/fk9rbgv5/1/
Here is the code:
.unveil-container {
width:100%;
position:relative;
overflow:hidden;
background-size:100% 100%;
background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
padding:0;
/* This is for keeping proportion - remove if you do not want */
display: inline-block;
width:100%;
}
/* this whole before is for proportion */
.unveil-container::before {
content:'';
display: block;
margin-top: 50%;
}
.overlay {
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
height:100%;
/* PLAY WITH WIDTH */
width:50%;
top:0;
background-position:100% 0;
background-size:200% 100%;
position:absolute;
left:50%;
-webkit-filter: blur(5px);
}
.bg {
position:absolute;
left:0;
top:0;
width: 50%;
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size:200% 100%;
background-position:0%;
height:100%;
}
<div class="col-lg-9 left-header unveil-container">
<div class="overlay"></div>
<div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>
You can set 2 elements, one inside the other, and then translate them in opposite directions using translate.
Animating them is easy with javascript.
With this layout, the elements are 100% width, and the background can be cover (or contains)
var target1, target2, step;
function move () {
target1.style.transform = "translateX(" + step + "%)";
target2.style.transform = "translateX(-" + step + "%)";
step -= 1;
if (step < 0) step = 100;
}
function start () {
target1 = document.getElementById('moving');
target2 = target1.children[0];
step = 50;
setInterval(move, 20);
}
.base {
width: 80%;
height: 300px;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
z-index: 2;
overflow: hidden;
transform: translateX(50%);
}
.overlayimage {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
transform: translateX(-50%);
-webkit-filter: blur(5px);
-webkit-filter: invert();
}
<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>
I changed your filter to make it more visible ...