How to Fade in and fade out linear gradient background image and text at the same infinitely
Question
I have a header that has a background of a linear gradient color with a picture at the bottom corner. It also has two text sections (h1 and p).
I would like to switch the following infinitely within an interval of 3 seconds:
(a) The linear background color and image with a subtle gentle fade out animation for the current background and fade in animation for the incoming background at the same time infinitely with 3 seconds interval
(b) The current text sections h1(TExt A) and p(Sub Text A) should also fade out at the same time the new text contents h1(Text B) and p(Sub Text B) fades in. This should also continue infinitely with 3 seconds interval
const header = document.querySelector(".header"); const nav = document.querySelector(".nav"); window.onload = function() { setInterval(function() { header.classList.toggle('changed-header'); nav.classList.toggle('changed-nav'); }, 3000); }
*, *::before, *::after { margin: 0; padding: 0; } html { font-size: 62.5%; box-sizing: border-box; } body { box-sizing: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: sans-serif; font-size: 18px; line-height: 25px; color: #000; } .container { max-width: 1400px; margin: 0 auto; } .header { background: url(https://res.cloudinary.com/iolamide/image/upload/v1599732332/cute-dog_kqcegn.png), linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); height: 766px; background-repeat: no-repeat; background-position: right bottom; border-radius: 0 0 3.2rem 3.2rem; transition: all .3s; } .header.changed-header { background: url(https://res.cloudinary.com/iolamide/image/upload/v1599732328/cute-animal_w3aczq.png), linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(0, 0, 0, 1) 100%); background-repeat: no-repeat; background-position: right bottom; } .logo a { color: #fff; font-size: 30px; text-decoration: none; } .nav { background: linear-gradient(180deg, #12213C -18.75%, rgba(0, 102, 161, 0) 100%); height: 144px; display: flex; justify-content: space-between; padding: 3.8rem 6rem 0 6rem; transition: all .3s; } .nav.changed-nav { background: linear-gradient(180deg, #345456 10.75%, rgba(0, 102, 161, 0) 100%); } .logo { width: 128px; } .menu a { text-decoration: none; cursor: pointer; color: #fff; font-weight: bold; font-size: 16px; line-height: 22px; letter-spacing: 0.03em; } .menu a:not(:first-of-type) { padding-left: 4rem; } .top { position: relative; margin-top: 7.4rem; padding-left: 6rem; width: 335px; } .top h1 { font-size: 40px; line-height: 55px; font-weight: 800; color: #fff; margin-bottom: 24px; } .top p { color: #fff; font-size: 20px; line-height: 27px; margin-bottom: 80px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>FadeIn and FadeOut background and text infinitely at 3 secs interval</title> </head> <body> <header class="header"> <nav class="nav"> <div class="logo"> <a href=""> LOGO </a> </div> <div class="menu"> <a href="">Nav A</a> <a href="">Nav B</a> <a href="">Nav C</a> </div> </nav> <!-- Top Section --> <section class="top"> <h1> Text A <!-- I want this to change to Text B --> </h1> <p> Sub Text A <!-- I want this to change to SubText B --> </p> </section> </header> </body> </html>
All the fadeout and fadein effects of the background and text content should be at the same time.
As seen from my code and result, The changing background doesn't have a fade effect as it changes suddenly. And I also don't know how to go about fading in and fading out the text at the same time.
1 answers
solution1
1 2020-09-10 11:16:13
If you want to fade anything in and out indefinitely, you can use CSS @keyframes .
In this case, the following declaration:
animation: fadeInAndOut 6s linear infinite;
indicates that you will have a CSS animation which:
- has the name
fadeInAndOut - takes
6sto complete - has a
lineartiming-function - has an
animation-iteration-countofinfinite
Then the animation itself:
@keyframes fadeInAndOut { 50% {opacity: 0;} }
- [
0%] Starts atopacity: 1(this is the default value, so there's no need to explicitly state this) - [
50%] By the middle reachesopacity: 0 - [
100%] Finishes atopacity: 1(this is the default value, so there's no need to explicitly state this)
Working Example:
p { color: rgb(255, 0, 0); font-size: 32px; text-align: center; animation: fadeInAndOut 6s linear infinite; } @keyframes fadeInAndOut { 50% {opacity: 0;} }
<p>I will fade in and out indefinitely</p>
That should give you all the tools you need to solve your question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.