I used <div> to make a color changing background, but the background covers the image I have. How can I make the <div> stay in the background?
(Btw I know in my code there's 2 sections for color but deleting either of them makes the colors not work.) Here's what it looks like when run: https://the-hampsterdog-dance.glitch.me/
thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
#dog {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</head>
</html>
You could either move the dog image inside <div id="dog"></div> or target the body rather than #dog for the background color animation. Both approaches will work.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<title>DANCE THE NIGHT AWAY</title>
<img
src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
width="140"
height="100"
alt="DANCE THE NIGHT AWAY"
/>
<div id="dog"></div>
<style>
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change{
25%{background-color: blue;}
50%{background-color: green;}
75%{background-color: purple;}
}
body {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
-webkit-animation: change 10s infinite;
}
</style>
</body>
</html>
Elements later inside the DOM (Document Object Model, essentially your HTML) usually are positioned on top of elements earlier. So the easiest solution is to switch the order of your img and div.
If this is not possible for whatever reason, you can change the layering in CSS using z-index. The higher it’s value, the more the affected element gets on top. E.g. for #dog:
z-index: 99;
You could do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DANCE THE NIGHT AWAY</title>
<style>
.foreground {
z-index: 790909;
}
body{
-webkit-animation: change 10s infinite;
}
#-webkit-keyframes bg-animation {
15% {
background-color: yellow;
}
30% {
background-color: green;
}
45% {
background-color: blue;
}
60% {
background-color: purple;
}
animation: change 10s infinite;
}
#-webkit-keyframes change {
25% {
background-color: blue;
}
50% {
background-color: green;
}
75% {
background-color: purple;
}
}
#dog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<img class="foreground" src="https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809" width="140" height="100" alt="DANCE THE NIGHT AWAY" />
<div id="dog"></div>
</body>
</html>
Related
I'm trying to animate slowly appearing text in css and I can't make it fluid... It consists of 3 words and will smoothly do the first word, but the next 2 words just pop into existence.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Not really my first website</title>
</head>
<body>
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
</body>
</html>
.header{
width: 100%;
top: 50%;
position: top;
left: 40%;
border-bottom: 5px solid greenyellow;
overflow: hidden;
animation: animate 2s linear forwards;
}
.header h1 {
color: green;
}
#keyframes animate {
0% {
width: 0px;
height: 0px;
}
20% {
width: 50px;
height: 0px;
}
50% {
width: 50px;
height: 80px;
}
}```
No need for height in the keyframe, the problem is that the h1 is a block element and it breaks the words because of width 0px, but if you put in a white-space: nowrap; it should be fine, also position: top; is not valid, not sure what your trying there.
PS i you want he h1 to be green, first the element then the class selector h1.header {color: green;}
.header {
white-space: nowrap;
overflow: hidden;
border-bottom: 5px solid greenyellow;
animation: animate 2s linear forwards;
}
h1.header {
color: green;
}
#keyframes animate {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>
If I get your means correctly It's because you have use 50px width in your key frame and it can only appear first word you can change that
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
I made a sort of header with an animated information banner (on 3 lines)
starting at each end. (ex: for the 1st and 3rd line, from left to right and for the 2nd line from right to left). What I would like is to take a break of a few seconds when the 3 bands are
all aligned (in the center) then continue the animation.
I would prefer a solution without using javascript but unfortunately I think it seems impossible?
Problem: The 1st and 3rd banner always start to appear before the 2nd and therefore when they are aligned, they are never in the center.
<!DOCTYPE html>
<HTML>
<head>
<title> VIDEO LIBRARY </title>
<meta charset="utf-8"/>
<style type="text/css">
.bandeau
{
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26,133,230);
}
#keyframes defilement {
from {
left: 0;
}
to {
left: 1000px;
}
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top:0;
right:0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite ;
}
</style>
</head>
<body>
<div class="bandeau" >
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
</body>
</HTML>
Instead of using from and to in your keyframes, you can set steps using percentages.
In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:
#keyframes defilement {
0% {left: 0;}
45% {left: 500px;}
55% {left: 500px;}
100% {left: 1000px;}
}
Responsive solution: blocks will stop in the centre an any size screen.
If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.
However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!
Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.
#keyframes defilement {
0% { left: -250px;}
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%;}
}
Working example:
.bandeau {
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26, 133, 230);
}
#keyframes defilement {
0% { left: -250px; }
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%; }
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top: 0;
right: 0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite;
}
<div class="bandeau">
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
For more information on keyframes, take a look at Mozilla MDN Docs for CSS3 Keyframes
I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.
anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer.
with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet.
so, how can i make horizontally infinite flowing background with only CSS??? (without JS)
*conditions
the page is responsive, background-image's height should fit to screen
width follow the height's size, as original image's ratio.
and here's my code.
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
border: 1px solid red;
animation: animatedBackground 5s linear infinite;
}
#keyframes animatedBackground {
from {
left: -50%;
}
to {
left: 50%;
}
}
</style>
</head>
<body>
<div id="animatedBackground">animatedBackground</div>
</body>
thx.
This should fit your slowly moving+infinite flowing+responsively fit to height background criteria.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#animatedBackground {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat: repeat;
background-position: 0 0;
background-size: auto 100%;
/*adjust s value for speed*/
animation: animatedBackground 500s linear infinite;
}
#keyframes animatedBackground {
from {
background-position: 0 0;
}
/*use negative width if you want it to flow right to left else and positive for left to right*/
to {
background-position: -10000px 0;
}
}
<div id="animatedBackground">
</div>
You can use background-attachment:scroll and use keyframes to perform the animation. See my approach here:
CSS
html,body
{
background:url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat:repeat;
background-attachment: scroll;
position:absolute;
left:0;
top:0;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow
{
0% {top:0;}
100% {top:-200%;}
}
See here: jsfiddle
Try This.
<html>
<head>
<style type="text/css">
#animatedBackground {
position: absolute;
height: 100%;
width: 100%;
background: url("http://placehold.it/1600x800");
animation:5s scroll infinite linear;
border: 1px solid red;
}
#keyframes scroll{
100%{
background-position:-3000px 0px;
}
}
</style>
</head>
<body>
<div id="animatedBackground" style="text-align:center;">animatedBackground</div>
</body>
</html>
I have 2 divs positioned horizontally next to each other inside a container. I want each div to expand width on hover to the full width of the container.
The problem is that after the transition when the pointer is no longer hovering the left div (which is first in the html flow) is overlapped under the right div.
Here's an example.
To recreate just place the pointer on the left div until the transition is finished, then take the pointer off the div.
The desired effect is that the width will decrease gradually (just like the right div).
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover, #two:hover { width: 500px; z-index: 1; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
animation can do the trick here. Actually z-index cause the issue here. You can solve following way.
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; animation: movedec 1s; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; }
#two:hover { width: 500px; }
#keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
#-webkit-keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
#-webkit-keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
Set the z-index with more difference between the un-hovered and the hovered state (for instance, go from 1 to 10).
Add transition on the z-index also ... But only when going back to the default state.
This way, when you change the hover from one element to the other, the newly hovered element will have immediately the high z-index, while the un-hovered is slowly dreasing it. And the newly hovered element will be in front.
Demo: (with the key styles in first place)
#one:hover,
#two:hover {
width: 500px;
z-index: 10;
transition: width 1s ease-out, z-index 0s linear;
}
#one,
#two {
z-index: 1;
transition: width 1s ease-out, z-index 1s linear;
}
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 500px;
margin: 0 auto;
}
#one,
#two {
height: 100px;
position: absolute;
}
#one {
width: 300px;
background: #49d7b0;
}
#two {
right: 0;
width: 200px;
background: #d8c800;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
This isn't really a problem, just the way overflows have to work. You have 2 options:
1) Use CSS keyframe animations - that way, you can give the hovered div a higher z-index, and have the reverse animation keep the z-index higher (dropping it back to a lower index at the very end of the animation).
2) use javascript/jquery (if you want this to work well on all devices/browsers, I would recommend Jquery anyway, which gives support to older browsers like IE8 that don't support css3)