I have a css background animation that separate the screen into 2 color part, div 1 left is black and div 2 right is white. However I want to make the div 2 right white part to become a image background while black part remain.
How do I insert the image cover into the right white part without affect the left black part
this is the example image cover I would like to cover in div 2
below is my code
body,
html {
margin: 0;
padding: 0;
}
.bg {
min-height: 100vh;
animation: BgAnimation;
-webkit-animation: BgAnimation;
-moz-animation: BgAnimation;
background: linear-gradient(106deg, #313131 50%, white 50.1%);
animation-duration: 1.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
background-size: 200% 200%;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 50% 50%;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s;
}
<body>
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>
</body>
make your gradient black/transparent and put the image below it:
body {
margin: 0;
}
.bg {
min-height: 100vh;
background:
linear-gradient(106deg, #313131 50%, transparent 50.1%),
url(https://i.stack.imgur.com/bPLa1m.jpg) right;
animation: BgAnimation 1.3s forwards;
background-size: 200% 200%,80% auto;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%,right;
}
100% {
background-position: 50% 50%,right;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
}
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>
Related
How do I get the three columns to display next to each other rather than on top of each other? Of course I also want them to be responsive and fade.
My fiddle: https://jsfiddle.net/Spleendrivel/dswufb78/3/
<!DOCTYPE html>
<html>
<head>
<meta name="ac:base" content="/AlmostYou">
<base href="/AlmostYou/">
<style>
/* Slider */
/* Slideshow container */
#slide-container-1 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* Slider */
/* Slideshow container */
#slide-container-2 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* Slider */
/* Slideshow container */
#slide-container-3 {
position: relative;
max-width: 100%;
/* responsiveness */
}
/* First element to be in block mode for responsiveness */
#slide-element-1 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* First element to be in block mode for responsiveness */
#slide-element-4 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* First element to be in block mode for responsiveness */
#slide-element-7 {
display: block;
/* to get the dimensions set */
width: 100%;
height: auto;
}
/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3,
#slide-element-5,
#slide-element-6,
#slide-element-8,
#slide-element-9 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Style images */
.slide-image {
width: 100%;
border-radius: 20px;
}
/* Style text */
.slide-text {
position: absolute;
bottom: 10px;
background-color: #0042b1bb;
color: white;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-element-1 {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
animation: fade-2 10s infinite;
-webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
animation: fade-3 10s infinite;
-webkit-animation: fade-3 10s infinite;
}
#slide-element-4 {
animation: fade-4 10s infinite;
-webkit-animation: fade-4 10s infinite;
}
#slide-element-5 {
animation: fade-5 10s infinite;
-webkit-animation: fade-5 10s infinite;
}
#slide-element-6 {
animation: fade-6 10s infinite;
-webkit-animation: fade-6 10s infinite;
}
#slide-element-7 {
animation: fade-7 10s infinite;
-webkit-animation: fade-7 10s infinite;
}
#slide-element-8 {
animation: fade-8 10s infinite;
-webkit-animation: fade-8 10s infinite;
}
#slide-element-9 {
animation: fade-9 10s infinite;
-webkit-animation: fade-9 10s infinite;
}
/* and more if there are more slides to show */
#keyframes fade-1 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-4 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-5 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-6 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-7 {
0% {
opacity: 1;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-8 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-9 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div id="slide-container-1">
<div id="slide-element-1">
<img class="slide-image" src="barn-3.jpg">
</div>
<div id="slide-element-2">
<img class="slide-image" src="barn-2.jpg">
</div>
<div id="slide-element-3">
<img class="slide-image" src="barn-1.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-2">
<div id="slide-element-4">
<img class="slide-image" src="cat-1.jpg">
</div>
<div id="slide-element-5">
<img class="slide-image" src="cat-2.jpg">
</div>
<div id="slide-element-6">
<img class="slide-image" src="cat-3.jpg">
</div>
</div>
</div>
<div class="column">
<div id="slide-container-3">
<div id="slide-element-7">
<img class="slide-image" src="dog-2.jpg">
</div>
<div id="slide-element-8">
<img class="slide-image" src="dog-1.jpg">
</div>
<div id="slide-element-9">
<img class="slide-image" src="dog-3.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
Make sure the screen width is no more than 350 to see my problem.
I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content. I am adding additional lines of text over and over because I can not submit my question without more text content.
I guess you have to use css grid or flexbox;
but css grid is the best choice here:
.row {
display: grid;
grid-templates-rows: auto; // you can add columns as many as you want..
grid-templates-columns: repeat(3, 1fr); //.. but you will get 3 columns for each row
}
if didn't work then you have to make some changes in your css.
I think you can try using flexbox (flex-direction: row)
Here is the final answer:
my JSFiddle: https://jsfiddle.net/Spleendrivel/mcyvpx3r/2/
<!DOCTYPE html>
<html>
<head>
<meta name="ac:base" content="/AlmostYou">
<base href="/AlmostYou/">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.fadein-1 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.fadein-2 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.fadein-3 img {
position: absolute;
top: 0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
-ms-flex: 33%;
/* IE10 */
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33% {
opacity: 1;
}
53% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#f2 {
-webkit-animation-delay: -4s;
}
#f3 {
-webkit-animation-delay: -2s;
}
#f5 {
-webkit-animation-delay: -4s;
}
#f6 {
-webkit-animation-delay: -2s;
}
#f8 {
-webkit-animation-delay: -4s;
}
#f9 {
-webkit-animation-delay: -2s;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="fadein-1">
<img id="f3" src="http://snaklvr.com/barn-3.jpg">
<img id="f2" src="http://snaklvr.com/barn-2.jpg">
<img src="http://snaklvr.com/barn-1.jpg">
</div>
</div>
<div class="column">
<div class="fadein-2">
<img src="http://snaklvr.com/cat-3.jpg">
<img id="f5" src="http://snaklvr.com/cat-2.jpg">
<img id="f6" src="http://snaklvr.com/cat-1.jpg">
</div>
</div>
<div class="column">
<div class="fadein-3">
<img src="http://snaklvr.com/dog-3.jpg">
<img id="f8" src="http://snaklvr.com/dog-2.jpg">
<img id="f9" src="http://snaklvr.com/dog-1.jpg">
</div>
</div>
</div>
</body>
</html>
I am sure there is some unnecessary CSS or possibly redundancy, but it works as I need!
Flex is your best friend when it comes to arranging elements in a grid and not using a framework such as bootstrap. Here's a great resource for you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Also, if any of the answers fixed your issue, please mark it as accepted.
Anyone know what I'm doing wrong? I can't put the two elements in the same line and they are in two separate levels.
I would like to recreate, using only HTML and Css, an automatic typewriter effect with variable text.
I am a beginner with HTML and Css so I don't understand much but it would be very nice if someone explained my mistake in detail.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>
I solved by adding display:flex; align-items: baseline; to h1.
The flexbox items are aligned at the baseline of the cross axis.
By default, the cross axis is vertical. This means the flexbox items
will align themselves in order to have the baseline of their text
align along a horizontal line.
body {
background-color: black;
color: white;
font-size: 100px;
}
h1 {
font-size: 30px;
display:flex;
align-items: baseline;
}
.text_1 {
animation: text1;
}
.text_2 {
animation: text2;
}
.text_1, .text_2 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text2 {
0%, 50%, 100% {
width: 0;
}
60%, 90% {
width: 6.50em;
}
}
#keyframes text1 {
0%, 50%, 100% {
width: 0;
}
10%, 40% {
width: 8em;
}
}
#keyframes caret {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<h1>Hi, i'm a <span class="text_1">Graphic Designer</span><span class="text_2">Photographer</span></h1>
Can someone please review the following block of code and tell me why the animation on the image div and info div are not working.
this is the html file for the about page. (i had enclosed the block content in a div and given it position relative)
{%extends 'layout.html' %}
{%block content %}
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
Try adding:
#image { position:absolute; }
If you are using Firefox, open the dev tools, locate the div image, and see the styles info.
You will see something like this
Notice that left is grayed. Now, hover on the "i" circle. You will see a message stating "left has no effect because the element is not positioned".
So, this is your problem
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
I have created this progress bar and I just can't make it stop at the end. Currently its stopping at 70% and gets cleared. Any ideas? Is there any kind of animation setting to stop it at 100%?
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.bar {
background: #ffcc00;
height: 10px;
width: 0%;
}
.animating {
-webkit-animation: progress 3s ;
}
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
animation-fill-mode: forwards; or -webkit-animation: progress 3s forwards;
Try to use 100% in:
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%; /* edit to 100% */
}
}
A Fancy version
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.wrap div {
background-color: #ffcc00;
height: 10px;
width: 0%;
border-radius: 5px;
animation: loadbar 3s;
-webkit-animation: loadbar 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
I want the progress bar to go from 0% width to 50% width in 2 seconds. This is my code so far:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
but when I open the page the width is 100% instead of 50%. what have I done wrong?
Your loadbar animation was not closed. The animation should work now. I've also added a forwards keyword to only play the animation once.
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s normal forwards ease-in-out;
-webkit-animation:loadbar 2s normal forwards ease-in-out;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Here's a Fiddle
#progressbar div {
background-color: #0063C6;
width: 50%;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
jsFiddle demo
Set the initial width to 0%
#progressbar div {
background-color: #0063C6;
height: 10px;
width:0%; /* ADD THIS <<< */
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Additionally, I added in the following..
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
If you want the animation to end in a forwards motion you need this... here is a demo demonstrating what would happen without it.. jsFiddle here