Make text disappear when slider move

Question

As you can see, I made an image slider with HTML and CSS. The problem is that I can't make text on first slider image disappear.

HTML:

<div class="slider-frame">
    <div class="slider-images">
        <div class="image-container">
            <img src="./Images/Image1.jpg">
            <h2 class="first-img-main-text">Main Text</h2>
            <p class="first-img-text">Caption</p>
            <a class="first-img-btn">Button</a>
        </div>
    </div>
</div>

CSS:

.image-container img {
    width: 1681px;
    height: 750px;
    animation-name: slide_animation;
    animation-duration: 25s;
    animation-iteration-count: infinite;

@keyframes slide_animation {
    0% {transform: translateX(0);}
    11% {transform: translateX(0);}
    22% {transform: translateX(-100%);}
    33% {transform: translateX(-100%);}
    44% {transform: translateX(-200%);}
    55% {transform: translateX(-200%);}
    66% {transform: translateX(-100%);}
    77% {transform: translateX(-100%);}
    88% {transform: translateX(0);}
    100% {transform: translateX(0);}
}

To be honest, I don't know how to use JavaScript so much.

JavaScript:

// Button
const firstImageBtn = document.querySelector('.first-img-btn');

// Text
const mainText = document.querySelector('.first-img-main-text');
const caption = document.querySelector('.first-image-text');

// Animations
const slideAnimation = document.getAnimations('slide_animation');


// Event Listeners

// Button Animations
firstImageBtn.addEventListener('mouseover', function(){
    firstImageBtn.style.background = '#000';
    firstImageBtn.style.transition = '0.6s';
});

firstImageBtn.addEventListener('mouseout', function(){
    firstImageBtn.style.background = 'none';
    firstImageBtn.style.transition = '0.4s';
});

// Text Animations
mainText.addEventListener('change', function(){
    if (slideAnimation.style.transform <= 'translateX(-20%)') {
        mainText.style.filter = 'opacity(0)';
    }
});

if u want to remove the element mainText.remove() if u want to remove only the text mainText.empty() — Jordi Jordi, Oct 13 '21 at 10:15
Is there any way to make it disappear slowly eith that command, like to lower opacity? — Denic, Oct 13 '21 at 17:33
if u know animation ends in 25 seconds, why don't u use setTimeout then remove text with by setting element.innerHtml to empty? — phi lo czar, Oct 13 '21 at 19:20
yes there is mainText.fadeOut('slow'); and to show it mainText.fadeIn("slow") — Jordi Jordi, Oct 14 '21 at 07:17
if u want css jS only check this https://stackoverflow.com/a/18760338/6503034 — Jordi Jordi, Oct 14 '21 at 07:26

Make text disappear when slider move

0 Answers0