Как сделать так, чтобы в карточках автоматически (спустя какое-то время) рандомно и плавно менялись имя, фотография и градиент?

Question

<div class="card">
  <img src="https://klike.net/uploads/posts/2019-03/1551511801_1.jpg" alt="" class="photo">
  <p class="name">Nikita</p>
</div>

.card {
  width: 100px;
  height: 150px;
  background: linear-gradient(156deg,     #86E9FF 0%, #8692FF 100%);
}

.photo {
  width: 50px;
  height: 50px;
  border-radius: 35px;
  margin-left: 25%;
}

.name {
    text-align: center;
}

Answer 1

Пожалуйста!

let avatars = [
    'https://klike.net/uploads/posts/2019-03/1551511801_1.jpg',
    'https://pngicon.ru/file/uploads/gory.png',
    'https://pngicon.ru/file/uploads/les.png',
    'https://cdn-icons-png.flaticon.com/512/284/284471.png',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcLxF9ngnJJ2MWLSBncIfsq1ihg97XrJSba3k-31oyHfkIvFrBGelQZosGcmKO5gs0owE&usqp=CAU'
]

let gradients = [
    'gradient1',
    'gradient2',
    'gradient3',
    'gradient4'
]

let card = document.querySelector('.card');
let photo = document.querySelector('.photo');

setInterval(function () {
    randomCard();
    console.log(1);
}, 2000/*5000 ms=5 seconds*/);

let oldClass;

function randomCard() {
    let randAvatar = avatars[getRandomInt(5)];
    let randGradient = gradients[getRandomInt(4)];

    card.animate({ opacity: 0 }, 400);

    setTimeout(function(){
        photo.src = randAvatar;
        card.classList.remove(oldClass);
        let gradClass = randGradient;
        oldClass = gradClass;
        card.classList.add(gradClass);
    },400);
}

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

.card-wrapper{
    background-color: white;
}

.gradient1 {
    background: linear-gradient(156deg, #86e9ff 0%, #8692ff 100%);
}

.gradient2 {
    background: linear-gradient(156deg, #60f018 0%, #be12b0 100%);
}

.gradient3 {
    background: linear-gradient(156deg, #c5d626 0%, #6f4dd6 100%);
}

.gradient4 {
    background: linear-gradient(156deg, #ffffff 0%, #aa0404 100%);
}

<body>
    <div class="card-wrapper">
        <div class="card">
            <img src="https://klike.net/uploads/posts/2019-03/1551511801_1.jpg" alt="" class="photo">
            <p class="name">Nikita</p>
        </div>
    </div>
    <script src="/script.js"></script>
</body>

БЛОГ НА HUSL

Как сделать так, чтобы в карточках автоматически (спустя какое-то время) рандомно и плавно менялись имя, фотография и градиент?

Ответы (1 шт):