Menu
I have two images on my landing page which go back and forth with the default fade animation. My first problem is I want to use a sliding animation but I didn't find any option to change it. My second problem is the fade animation only works for chrome. Is there any way to solve this in other browsers?
My code:
/* basicStyle.css */
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.lead {
font-size: 1.5rem;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.7);
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 1rem;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
}
.navbar ul li a:hover {
color: skyblue;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
section h1 {
font-size: 4rem;
}
/* Section Images */
section#home {
background: black;
min-height: 100vh;
}
section#gallery {
background: red;
min-height: 100vh;
}
section#about {
background: green;
min-height: 100vh;
}
section#contact {
background: blue;
min-height: 100vh;
}
/* LandingPage.css */
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat';
font-size: 17px;
color: #fff;
line-height: 1.6;
}
#showcase {
background: url('https://images.unsplash.com/photo-1597368208802-2bec16fba411?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80')
100vw 0 no-repeat,
url('https://images.unsplash.com/photo-1597390520089-9f46046ea040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1041&q=80')
0 0 no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
animation: slide-right 15s forwards 2s infinite;
}
@keyframes slide-right {
0% {
background-position: 100vw 0, 0 0;
}
50% {
background-position: 0vw 0, 0 0;
}
100% {
background-position: 100vw 0, 0 0;
}
}
#showcase h1 {
font-size: 50px;
line-height: 1.2;
}
#showcase p {
font-size: 20px;
color: #fff;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: #fff;
border: #fff 1px solid;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
.main-section div.iScrollIndicator {
background: white !important;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 70px;
background: rgba(57, 77, 95, 0.7);
z-index: 2;
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 10px;
padding: 5px;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
font-size: 30px;
}
.buttons {
display: flex;
justify-content: center;
}
.buttons .button {
margin: 10px;
display: grid;
place-items: center;
}<div class="container">
<!-- <nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav> -->
<header id="showcase">
<h1>Welcome!</h1>
<div class="buttons">
<a href="#about" class="button"><span>About</span></a>
<a href="#gallery" class="button"><span>Gallery</span></a>
</div>
</header>
<section id="about">
<h1>About</h1>
</section>
<section id="gallery">
<h1>Gallery</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
</div>
942
After creating the image, add it to the sliding-background CSS as follows. Next step includes adding the sliding effect. The background image is expected to move from left to right in a loop that repeats over and creates a seamless effect that the image moves in infinity.
First thing you should do is to create the structure of the image slider using HTML and place images. After you have created your image slider HTML structure, the next step is to use CSS styles for having your slider's interface. Also, add styles to the images, backgrounds, etc.
CSS Automatic Full Screen Image Slideshow Live Preview As the name refers the user doesn’t have to do anything to see the other slides as they change naturally or automatically. Also each slideshow image is introduced on a level plane, with a sliding way which makes the development feel extremely natural and regular.
Let’s see how to create a cool and easy fullscreen slider with a bunch of CSS properties. Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) Use an <input> element with the type attribute to create a radio button. Also, add the id and name attributes. Use a <label> element with a for attribute.
All the animation effects take place within the image space so you needn’t adjust other elements on the web page. Shadow effect is used to neatly highlight the image slider from the rest of the elements. The slicing effect is smooth and looks natural, thanks to the latest CSS3 and a few lines of Javascript frameworks used in this design.
Check out these Awesome image slide effect like: #1Responsive CSS Image Slider, #2Pure CSS Image Slider, #3Animated CSS Fading Image Slider, and many more. Responsive CSS Image Slider, which was developed by Dudley Storey. Moreover, you can customize it according to your wish and need.
I was inspired by this answer and created the following snippet:
It uses multiple backgrounds, puts the top-layer one a screen-size to the right and then moves it in.
Very simple and you can add more images easily. The code comments show you how :)
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.lead {
font-size: 1.5rem;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 60px;
background: rgba(0, 0, 0, 0.7);
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 1rem;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
}
.navbar ul li a:hover {
color: skyblue;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
section h1 {
font-size: 4rem;
}
/* Section Images */
section#home {
background: black;
min-height: 100vh;
}
section#gallery {
background: red;
min-height: 100vh;
}
section#about {
background: green;
min-height: 100vh;
}
section#contact {
background: blue;
min-height: 100vh;
}
/* LandingPage.css */
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat";
font-size: 17px;
color: #fff;
line-height: 1.6;
}
#showcase {
/*/ Last image first, add 100vw for each additional image. For infinite, make first picture the last /*/
background: url("https://images.unsplash.com/photo-1597390520089-9f46046ea040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1041&q=80")
300vw 0 no-repeat,
url("https://images.unsplash.com/photo-1521020781921-ce0d582b7665?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
200vw 0 no-repeat,
url("https://images.unsplash.com/photo-1597368208802-2bec16fba411?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80")
100vw 0 no-repeat,
url("https://images.unsplash.com/photo-1597390520089-9f46046ea040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1041&q=80")
0 0 no-repeat;
/*/ For every image, one cover /*/
background-size: cover, cover, cover, cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
animation: slide-right 8s forwards 1s infinite;
}
/*/ For four pictures, make keyframes at 0%, 25%, 75%, 100%, for 6 pictures make 0%, 20%, 40%, 60%, 80%, 100% etc./*/
@keyframes slide-right {
0% {
/*/ Add one 100vw 0 for each picture at every stage. It's always like a reverse stairway downwards /*/
/* 3 100vw's*/
background-position: 100vw 0, 100vw 0, 100vw 0, 0 0;
}
33% {
/*2 100vw's*/
background-position: 100vw 0, 100vw 0, 0 0, 0 0;
}
66% {
/* 1 100vw'*/
background-position: 100vw 0, 0 0, 0 0, 0 0;
}
100% {
/* The end - none left :)*/
background-position: 0 0, 0 0, 0 0;
}
}
#showcase h1 {
font-size: 50px;
line-height: 1.2;
}
#showcase p {
font-size: 20px;
color: #fff;
}
#showcase .button {
font-size: 18px;
text-decoration: none;
color: #fff;
border: #fff 1px solid;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
.main-section div.iScrollIndicator {
background: white !important;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 70px;
background: rgba(57, 77, 95, 0.7);
z-index: 2;
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 10px;
padding: 5px;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
font-size: 30px;
}
.buttons {
display: flex;
justify-content: center;
}
.buttons .button {
margin: 10px;
display: grid;
place-items: center;
}<div class="container">
<!-- <nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav> -->
<header id="showcase">
<h1>Welcome!</h1>
<div class="buttons">
<a href="#about" class="button"><span>About</span></a>
<a href="#gallery" class="button"><span>Gallery</span></a>
</div>
</header>
<section id="about">
<h1>About</h1>
</section>
<section id="gallery">
<h1>Gallery</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
</div>Try to rearrange background-position in the animation section which has numbers are in unit of Viewport Width(vw) in manner way.
If there are 3 images in the background arrangement will be like the following
100vw 0, 100vw 0, 0 0100vw 0, 0 0, 0 00 0, 0 0, 0 0
and also you can simply add scroll-behavior property in your code on <html> tag in order to make smooth scroll which also makes page look nicer when scroll event takes place.
html{scroll-behavior: smooth;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
}
section,
#showcase {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
section#gallery,
section#home,
section#about,
section#contact,
#showcase{min-height: 100vh;}
section{width: 100%;}
section h1 {font-size: 4rem;}
section#home {background: black;}
section#gallery {background: red;}
section#about {background: green;}
section#contact {background: blue;}
#showcase {
background: url("https://images.unsplash.com/photo-1597390520089-9f46046ea040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1041&q=80")
200vw 0 no-repeat,
url("https://images.unsplash.com/photo-1597368208802-2bec16fba411?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80")
100vw 0 no-repeat,
url("https://images.unsplash.com/photo-1597390520089-9f46046ea040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1041&q=80")
0 0 no-repeat;
background-size: cover;
animation: slide-right 5s ease-in-out infinite;
}
@keyframes slide-right {
0% {background-position: 100vw 0, 100vw 0, 0 0;}
60% {background-position: 100vw 0, 0 0, 0 0;}
100% {background-position: 0 0, 0 0, 0 0;}
}
#showcase h1 {font-size: 50px;}
#showcase .button {
font-size: 18px;
text-decoration: none;
border: #fff 1px solid;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
.buttons {
display: flex;
justify-content: center;
}
.buttons .button {margin: 10px;}<html>
<div class="container">
<header id="showcase">
<h1>Welcome!</h1>
<div class="buttons">
<a href="#about" class="button"><span>About</span></a>
<a href="#gallery" class="button"><span>Gallery</span></a>
</div>
</header>
<section id="about">
<h1>About</h1>
</section>
<section id="gallery">
<h1>Gallery</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
</div>
</html>I also edit too much to avoid unnecessary things which were in the code and DRY(Don't Repeat Yourself) as well but I hope you will find it helpful.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
