This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
This Is My First Question On This Website So I Don't Know If I Implemented The Format Correctly.. So Incase this Post Is Missing Something Crucial Which is Necessary Please Tell Me At The Comments.
Here Below Is My Code
#recupd {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div style = "overflow: hidden;white-space: nowrap;box-sizing: border-box;">
<b>
<span id = "rectitle" style = "color:darkred;z-index: 2;background-color: cyan;">Recent Updates:</span>
<span id = "recupd">Some Random Recent Update</a></span>
</b>
</div>
Whenever I Run This Code The Update Contents(recupd) After Moving Goes Below The Recent Updates Element(rectitle)(CSS Implementation Of Marquee Tag) but it doesn't get hidden but instead in a weird way gets overlapped over each other. Instead of that I want the part of moving text which goes below the Title to get hidden.
I Tried To Use A Method Similar To This Click Here But It doesn't seem to work.
I Also Tried Making The Title Element Opaque and also tried to use Div Instead Of Span But That Makes The Moving Text Go Below The Line Which I Don't Want To Happen
So I Need Help In Making It Such That Whenever Some Part Of Text Going Below The Title It Isnt Visible To User Even Though it Exists And Rest Of The Text Still Intact.
Just set the position property of the #rectitle span to relative. The z-index property is only effective on positioned elements:
#recupd {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
#rectitle {
position: relative;
}
#keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
<div style="overflow: hidden;white-space: nowrap;box-sizing: border-box;">
<b>
<span id = "rectitle" style = "color:darkred;z-index: 2;background-color: cyan;">Recent Updates:</span>
<span id = "recupd">Some Random Recent Update</a></span>
</b>
</div>
By applying a position: relative; and z-index: 1 to the #rectitle span you can place it higher in the vertical stack and position it over the scrolling text:
#recupd {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
<div style = "overflow: hidden;white-space: nowrap;box-sizing: border-box;">
<b>
<span id = "rectitle" style = "color:darkred;z-index: 2;background-color: cyan; position:relative; z-index:1;">Recent Updates:</span>
<span id = "recupd">Some Random Recent Update</a></span>
</b>
</div>
Related
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.
This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example
I've been trying to teach myself some css animations with keyframes, and I'm trying to create something in which a small square drops down, then out of that square, a rentangle protrudes from the left, it then displays some text after 8 or so seconds and then the rentangle retreats back into the smaller square (to the right) and the smaller square retreats upwards into 'thin air'. If you're wondering what this is for it's an alert notification when someones follows me on Twitch TV while I livestream. Here is a JSFiddle of my efforts so far. For some reason on JSFiddle the content doesn't appear before the animation, however on the the alert service i use it does happen. I've linked their tester here, so you can see what I mean.
HTML CODE:
<html>
<head>
<title>GR412 Twitch Follower Alert</title>
<link href="Twitch\followeralert.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="follower-container">
<div class="left-square-container">
</div>
<div class="right-retangle-container">
<div class="header">
<span class='keyword name'>{name}</span> is now following you!
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
#keyframes slideInFromTheRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 75px;
height: 75px;
background: #313131;
animation: 1s 1s 1 slideInFromAbove;
}
.right-retangle-container {
width: 500px;
height: 75px;
background: #212121;
animation: 1s 2s 1 slideInFromTheLeft;
}
.header {
font-size: 24px;
color: #ffffff;
text-align: center; /*vertical alignment of text*/
position: relative; /*horizontal alignment of text*/
top: 50%; /*horizontal alignment of text*/
transform: translateY(-50%); /*horizontal alignment of text*/
margin: 10px,
10px,
10px,
10px; /*GOT TO HERE, THIS COULD BE CAUSING TWITCHING*/
}
.keyword:not(.user_message) {
color: #0d47a1;
}
However there are some issues, first being that the content appears first, then does the animation. I would like it so you start with an empty screen and then the animation ensures that the square drops down first, then the rentangle protrudes from the square and finally the text is displayed. These three components should hold for 8 seconds then as already described another animation should hide each component in the order specified in the first paragraph.
The second issue is that when the rentangle protrudes, it doesn't do it from the right hand edge of the square, rather it does it from the left. So it overlaps the square, which ruins the effect.
I've based my code off this exsisting question:css3 transition animation on load?, which has helped a lot, but it doesn't help with my specifc needs.
Any help would be appreicated, and if something isn't clear let me know.
Note, if the second link doesn't work, let me know and i'll sort it.
Thanks, GR412.
Issue 1: You need to set the styles of the initial placement for the content.
Issue 2: position: relative; z-index: /*some value*/ So you can properly layer the content.
You also need to use animation-fill-mode: forwards
This sets the end styles to the end styles of #keyframes associate with it.
I've tweaked your timing. Here's a plnkr of it. Read the comments in the CSS
You end up having to calculate percentages. I would consider working out a calculation that can accept variables for scss/less/sass etc.
CSS comments:
/*
to calculate these percentages:
([seconds of portion of animation] x 100)/[total seconds of animation]
1) slideInFromAbove starts
2) slideInFromTheLeft starts
3) slideInFromTheLeft ends
4) slideInFromAbove ends
slideInFromAbove:
1) slide down
2) hold
2) slide up
slideInFromTheLeft:
1) slide right
2) hold
3) slide left
*/
I'm trying to create an overlay that says: 'Waiting...', but I want the ellipses to be animated. So the text would actually go from:-
'Waiting' -> 'Waiting.' -> 'Waiting..' -> 'Waiting...' -> 'Waiting' ->
However, when the ellipses count changes it's pushing the 'Waiting' to the left since the content is centered in its container.
HTML:
<div style='text-align: center'>
<span>Waiting</span>
<span id='ellipses'></span>
</div>
Javascript:
var ellipses = 0;
setInterval(function () {
$('#ellipses').text('.'.repeat(ellipses))
ellipses = (ellipses + 1) % 4;
}, 400)
Any good way to handle this ?, Easy to do with some magic numbers or manual calculation of what 'center' is + a fixed position, but I'd like to have a clean css solution if possible..
Using pure CSS, try this Fiddle,
.ellipses1 {
-webkit-animation: elipses 1.3s infinite;
-webkit-animation-delay: 0.0s;
}
.ellipses2 {
-webkit-animation: elipses 1.3s infinite;
-webkit-animation-delay: 0.2s;
}
.ellipses3 {
-webkit-animation: elipses 1.3s infinite;
-webkit-animation-delay: 0.3s;
}
#-webkit-keyframes elipses {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Try adding the following to your style:
#ellipses{
position:absolute;
}
Place the ellipsis inside an after pseudo element and declare its position as absolute. I created a fiddler to demonstrate the behavior. The ellipsis depends on your mouse pointer hovering over the second (middle) line for demonstration purpose: http://jsfiddle.net/f9eutj40/
HTML:
<div>
<span>
The first line
</span>
</br>
<span class="ellipsis">
The second line
</span>
</br>
<span>
The third line
</span>
</div>
CSS:
div {
text-align: center;
background-color: green;
}
span {
color: cyan;
}
span.ellipsis:hover:after {
color: cyan;
content: ".....";
position: absolute;
}
This way you don't even have to make a modification to the text itself (and clean it up afterwards again...). You just modify the styling of the text. This is done in a static manner in the demo above using the content: rule, but nothing speaks against doing that dynamic.
I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this:
#-webkit-keyframes backandforth {
0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;}
}
Demo in JSFiddle
But since it's not possible to animate text-align, I've been searching for an alternative property that can be animated to reach the desired positioning. That's where I'm stuck at.
I tried setting the left property to 100% midway through the animation, but that ended up pushing the span off the div. I also tried animating the float property, but that didn't work.
Then I saw this question on moving text from left to right and tried the JSFiddle from the top answer. While it looks like the solution, it unfortunately did not work for me since I want my animation to move continuously at ease, and for the last few seconds of that animation, the span stalls.
CSS Solution
you can play around the left position when the animation is at 50% like so :
because when you put it left: 100% it depend on the left corner of the span this is why it will go out the container div
#-webkit-keyframes backandforth {0%{left:0;} 50%{left:58%;} 100%{left:0;}}
Live Demo
I hope this fits your needs
JavaScript solution
var thisis = document.getElementById("wrapper");
var tyty = document.getElementById("move");
var witth = tyty.offsetWidth;
thisis.style.paddingRight = witth +"px";
Live Demo
with this JS whatever you change the text it will still in the container div
There is also a pure-CSS way to do it if you combine absolute positioning left with simultaneous transform: translate.
https://jsfiddle.net/cd7kjwy6/
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.mt-2 {
margin-top: 0.5rem;
}
/* ---------------- relevant CSS ---------------- */
.animated {
position: relative;
background-color: pink;
max-width: 200px;
overflow: hidden;
line-height: 3rem;
height: 3rem;
}
.animated__text {
position: absolute;
animation: 3s bounce ease-in-out infinite paused;
white-space: nowrap;
top: 0;
padding: 0 0.5rem;
}
.animated:not(.animated--on-hover) .animated__text,
.animated.animated--on-hover:hover .animated__text {
animation-play-state: running;
}
#keyframes bounce {
0%, 5%, 95%, 100% {
left: 0%;
transform: translate(0, 0);
}
45%, 55% {
left: 100%;
transform: translate(-100%, 0);
}
}
<div class="animated">
<span class="animated__text">animate me!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">Longcat is looooooooooooooooooong!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">~</span>
</div>
<div class="animated animated--on-hover mt-2">
<span class="animated__text">only on hover</span>
</div>
If you wanted to snap the "hover" variant back to the original position, you could use something like this (or JavaScript for a proper reset):
.animated.animated--on-hover:not(:hover) .animated__text {
left: 0 !important;
transform: translate(0, 0) !important;
}