Good Afternoon
Trying to make responsive background on my landing, and for some reason i couldn't
I was trying to use height: auto, height: 100% and margin: 0 auto; The height 100% worked but it didn't cover to down of my screen, i had it more than i need.
Here is my code:
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
height: 470px;
left: 0px;
opacity: 0;
position: absolute;
top: 189px;
width: 100%;
background-color: rgba(0,0,0,.3);
background-blend-mode: darken;
z-index: 0;
}
The only one thing worked for me, it was:
height: calc(100vh - 189px);
189px it indent from my header menu, but is any how i can make it work without calc?
Hope you undertand what i meant
Thanks
Try this
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.3);
z-index: 0;
}
Try something like:
.crossfade > figure {
animation: imageAnimation 48s linear infinite 0s;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.3);
z-index: 0;
}
#menu-contact-us {
background: #5D5D5D;
height: 124px;
color: #ffffff;
width: 100%;
position: relative;
z-index: 1;
}
I was able to get the images to go full screen on the link that you posted
Related
I have slideshow on my page, but I have small bug in animation and I can't find it.
I use slideshow according to this tutorial: https://www.youtube.com/watch?v=TzAshjkhFQw .
But I want to have only 3 slides not 4.
First 3 slides are ok, but instead of the fourth there is an empty background. I want only 3 slides and after that repeat slideshow.
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%; opacity: 1;}
30.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 0;}
}
<div class="slider">
<div class="slide">
<p>Slide1</p>
</div>
<div class="slide">
<p>Slide2</p>
</div>
<div class="slide">
<p>Slide3</p>
</div>
</div>
Thank you in advance for your advice!
You need to change the percentages in the animations as well as the timings on the individual slides
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 7s;
}
The animation was initially designed for 4 slides in 12 seconds, i.e. one slide every 3 seconds. If you want to change that to one slide every 4 seconds, you need to space the animations further apart (change the animation delay), and also change the animation so that the slide is visible for a longer time (multiply each percentage by 4/3).
This way of animating slides seems really inflexible however, so you might want to look at some other approach, which allows you to add or remove slides more easily.
I have a div with a background image and I'm trying to change its scale infinitely.
I changed the background-size property in the animation but as you can see, there is some noise or vibration when animating. How would I remove it?
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
}
<div class="pre-loader"></div>
Consider a scale transformation to have a better rendring:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform:scale(1.1);
}
}
<div class="pre-loader"></div>
You are centering the background which means applying a background-position equal to 50%. The calculation of this value is related to the background-size so the position is changing slightly when the size is changing creating this bad effect:
If you consider a position using pixel values you will not see this effect:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') 50px 50px/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
background-size:55%;
}
}
<div class="pre-loader"></div>
Use transform instead of background-size
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform: scale(1.2);
}
100% {
transform: initial;
}
}
<div class="pre-loader"></div>
There is nothing wrong with your code, the problems lays in the CSS. I think there is a performance issue in your animation with:
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
The animation will relocate every single pixel from every image. So that will be a bit heavy for the browser to render I think.
Also your animation time with animation: loading 5s ease-in-out infinite; is a factor why its making noises. With the animation time of 5 seconds, it becomes clear that each pixel is reloaded.
If you change this time to 1s, you'll find that it runs smoother as the time between animations goes by faster.
But since the 5 seconds should persist, the simplest solution is to add the code snippets from #Félix or #TemaniAfif answer into your code which are really 2 great answers to your question.
I want to create a rectangle and animate the drawing of lines. The lines should grow vertically up and down from the rectangle. Totally, I want to have 2 lines growing up, and 2 lines growing down.
This is my current script:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.vertline {
width: 2px;
margin-left: 10%;
background-color: #dd8341;
top: 40%;
animation:lineup 3s forwards;
position: relative;
}
#keyframes lineup {
0% {
height: 0px;
}
100% {
height: 200px;
}
}
<div class="content"></div>
<div class="vertline"></div>
I cannot align all elements correctly. What is the correct way to do this simple task?
You can do it without additional elements, using the :before and :after pseudo-elements to grow up and down, and background: linear-gradient() to create two lines:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after {
content: "";
width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
height: 0;
background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
margin-left: 10%;
position: absolute; /* needs to be absolute */
top: 0;
animation: lineup 3s forwards;
}
.content:after {
top: 100%;
animation: linedown 3s forwards;
}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content"></div>
Addition:
/* recommended */
* {box-sizing: border-box}
body {margin: 0}
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after,
.linedown1,
.linedown2 {
content: "";
width: 2px;
height: 0;
background: #dd8341;
left: 20%;
position: absolute;
top: 0;
animation: lineup 3s forwards;
}
.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}
.content:after, .linedown2 {left: 80%; animation-delay: 1s}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content">
<span class="linedown1"></span>
<span class="linedown2"></span>
</div>
Here is an idea with only background and gradient:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 10% center,calc(10% + 4px) center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
UPDATE
To add delay simple add more states to the animation:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 20% center,80% center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
50% {
background-size:100% 40%,2px 100%,2px 0%;
}
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
I need to do a task where I have an image, this image is being covered in some color fade, and when I hover on image - fade dissapears (the example is https://html5up.net/uploads/demos/forty/ ). I did it, but I also have to do a transition so that disappearing of fade will be slower for 2 seconds. I tried to put transition property everywhere and I failed. Any help, please?
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
Instead of this block of code :
.photo-text.one:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
You can simplify by simply hiding the overlay by modifying its opacity to 0 with the transition of opacity and the duration you need:
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 1s ease-in-out;
}
.photo-text.one:hover > .img-overlay{
transition: opacity 1.5s ease-in-out;
opacity: 0;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
You could just hover over the .img-overlay, but since you also want to have the same effect when hovering over the text, leave it as it is and just replace the :after pseudo-element (don't need it) with the > .img-overlay, set its opacity to 0 and apply the transition property as desired:
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
max-width: 100%; /* responsiveness */
}
.img-overlay {
position: absolute; /* needs to be on the child since the relative position is on the parent */
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
transition: opacity 2s linear; /* optional / when "unhovering" */
}
/* added */
.photo-text.one:hover > .img-overlay {
opacity: 0;
transition: opacity 2s linear; /* can also try other values such as "ease", "ease-out" etc. */
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay"></div>
<h2 class="text">fffff</h2>
</div>
So I got this Fullscreen Background Image Slideshow from tympanus :) You can definitely see the codes on the site linked above... now I do not want it to be taking the whole page... I want to add margins all over... I've been trying to do it but no avail. I tried reducing the size of the background image into lesser percent but it's still not proportioned...
How do I add an equal padding to the slideshow? :(
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}
I think the absolute simplest way is to do like this:
.cb-slideshow li span {
left: 5%; // alter as you like
top: 5%; // alter as you like
width: 90%; // alter as you like
height: 90%; // alter as you like
position: absolute;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}