Remove child element effect in CSS

Asked

Viewed 848 times

1

I have the following code

	  
      $(document).ready(function(e) {

         const blocos = $("div.slider div.slide div");
      
         function startslider() {  
         
            ativa = $(".ativa")
         
            if (!$(ativa).next("div.slide").length) {
               // remove a classe do último
               $(ativa)
               .removeClass("ativa")
         
               // adiciona a classe no primeiro
               $("div.slider div.slide")
               .first()
               .addClass("ativa")
            }else{
               $(ativa)
               .removeClass("ativa")
               .next()
               .addClass("ativa")
            }
         
            setTimeout(startslider, 5000)
         }
         
         setTimeout(startslider, 5000)
         
          $("div.slider nav button.anterior").click(function(){
          
            prev = $(".ativa").prev();  
            prev = prev.length ? prev : blocos[ blocos.length - 1 ];  
            mostraBloco(prev);
            
          })
          
          $("div.slider nav button.proximo").click(function(){
              
            next = $(".ativa").next();   
            next = next.length ? next : blocos.first();    
            mostraBloco(next);
            
          })
          
          /* Função para exibir as imagens */
          function mostraBloco(next) {
              
            ativa = $(".ativa")
            
            $(ativa).removeClass("ativa")
            $(next).addClass("ativa")
            
          }
      
      })
      * {
          margin: 0;
          padding: 0;
          border: none;
          outline: 0;
      }
      body {
          width: 100vw;
      }
      ul {
          list-style: none;
      }
      .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
      }
       @-webkit-keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
       @keyframes fade {
       from {
       opacity: .4
      }
       to {
       opacity: 1
      }
      }
      @keyframes slider {
       0% {
       transform: scale(1);
      }
       100% {
       transform: scale(1.1);
      }
      }
      div.slider {
          position: relative;
          width: 100%;
          overflow: hidden;
      }
      div.slider div.slide {
          display: none;
      }
      .ativa {
          display: block !important;
          animation: fade 1s linear;
      }
      div.slider div.slide img {
          position: relative;
          width: 100%;
          animation: slider 1s linear;
          animation-fill-mode: forwards;
      }
      div.slider div.slide span {
          position: absolute;
          width: 100px;
          left: calc(50% - 50px);
          line-height: 40px;
          bottom: 0;
          text-align: center;
          color: rgb(255,255,255);
          z-index: 2;
      }
      div.slider nav {
          position: absolute;
          width: 100%;
          height: 40px;
          bottom: 0;
          background-color: rgba(0,0,0,.5);
          z-index: 1;
      }
      div.slider nav button {
          position: absolute;
          width: 150px;
          height: 100%;
          cursor: pointer;
      }
      div.slider nav button.anterior {
          left: 10%;
      }
      div.slider nav button.proximo {
          right: 10%;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="slider">
    
     <div class="slide ativa">
       <img src="_img/_banner/_site/bg_1.jpg" />
       <span>Este é 1</span>
     </div>
     
     <div class="slide">
       <img src="_img/_banner/_site/bg_2.jpg" />
       <span>Este é 2</span>
     </div>
    
     
     <div class="slide">
       <img src="_img/_banner/_site/bg_3.jpg" />
       <span>Este é 3</span>
     </div>
    
     <nav>
      <button class="anterior">Anterior</button>
      <button class="proximo">Próximo</button>
     </nav>
    
    </div>

Has the tag span within each div.slide who is inheriting the animation that his container (div.slide) is getting that is a .fade.

I need to remove this effect only of span.

Is there any way?

css css3
  • 1

    Carlos only with this snippet of code becomes complicated to give an exact answer. Put the complete code with CSS and JS slider as well

  • OK, changed there. I put the whole code!

1 answer

3


You can remove the effect of divand put it in the image because so the effect does not include the span.

I needed to make some modifications I mentioned below in CSS and jQuery to make it work.

A slight effect that is still visible in the letter is due to the opacity of the image, which appears behind the letter, being changed.

    $(document).ready(function (e) {
    const blocos = $("div.slider div.slide"); /* REMOVIDO ' div'*/

    function startslider() {
        ativa = $(".ativa")

        if (!$(ativa).next("div.slide").length) {
            // remove a classe do último
            $(ativa)
                .removeClass("ativa")

            // adiciona a classe no primeiro
            $("div.slider div.slide")
                .first()
                .addClass("ativa")
        } else {
            $(ativa)
                .removeClass("ativa")
                .next()
                .addClass("ativa")
        }

        setTimeout(startslider, 5000)
    }

    setTimeout(startslider, 5000)

    $("div.slider nav button.anterior").click(function () {

        prev = $(".ativa").prev();
        prev = prev.length ? prev : blocos[blocos.length - 1];
        mostraBloco(prev);

    })

    $("div.slider nav button.proximo").click(function () {

        next = $(".ativa").next(".slide"); /* Add .slide */

        next = next.length ? next : blocos.first();
        mostraBloco(next);

    })

    /* Função para exibir as imagens */
    function mostraBloco(next) {

        ativa = $(".ativa")

        $(ativa).removeClass("ativa")
        $(next).addClass("ativa")

    }

})
/* .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
} */
@-webkit-keyframes fade {
    from {
    opacity: .4
    }
    to {
    opacity: 1
    }
}
@keyframes fade {
    from {
    opacity: .4
    }
    to {
    opacity: 1
    }
}
@keyframes slider {
    0% {
    transform: scale(1);
    }
    100% {
    transform: scale(1.1);
    }
}

div.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div.slider div.slide:not(.ativa) { /* As divs que não contém a classe .ativa*/
    display: none;
}

.ativa {
    display: block !important;
    /* animation: fade 1s linear; */ /* efeito REMOVIDO*/
}
div.slider div.slide img {
    position: relative;
    width: 100%;
    animation: slider 5s linear, fade 2s linear running; /* Adiciona múltiplos efeitos às imagens */
    animation-fill-mode: forwards;
}
div.slider div.slide span {
    position: absolute;
    width: 100px;
    left: calc(50% - 50px);
    line-height: 40px;
    bottom: 0;
    text-align: center;
    color: rgb(255,255,255);
    z-index: 2;
}
div.slider nav {
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}
div.slider nav button {
    position: absolute;
    width: 150px;
    height: 100%;
    cursor: pointer;
}
div.slider nav button.anterior {
    left: 10%;
}
div.slider nav button.proximo {
    right: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="fade.css" />
</head>
<body>
    <div class="slider">
        <div class="slide ativa">
            <img src="https://s19.postimg.cc/4khrr69kz/img_1.png" />
            <span class="not-fade">Este é 1</span>
        </div>
        <div class="slide">
            <img src="https://s19.postimg.cc/jggays0f7/img_2.png" />
            <span class="not-fade">Este é 2</span>
        </div>
        <div class="slide">
            <img src="https://s19.postimg.cc/kvhvnhtsj/img_3.png" />
            <span class="not-fade">Este é 3</span>
        </div>
    
        <nav>
            <button class="anterior">Anterior</button>
            <button class="proximo">Próximo</button>
        </nav>
    
    </div>
    
</body>
</html>

Off-topic: It is good practice to declare Javascript variables explicitly keyword var, because then the variable will be a local, that is, present only within that scope. Otherwise, it will be created in the scope global (object more global than in client side is the window - window). In smaller programs this may not be a big problem, but when your program starts growing, it can cause inconsistencies. Also, busy memory can grow rapidly making the page slower mainly on devices with less RAM.

EDITION

As pointed out by @Carlos Rocha, the image was only getting an effect. To fix this problem, just add them together in the property animation.

 animation: slider 5s linear, fade 2s linear running;

You can even add more than one effect.

animation: slider 5s linear, fade 2s linear, color-animation 3s linear running;

where color-animation could be, for example

@keyframes color-animation {
    from { filter:  grayscale(80%); }
    to   { filter:  grayscale(0%); }
}

One more topic out of the question: if you’re looking for compatibility between browsers, it’s a good idea to include prefixes vendor in @keyframes and animation for each kit/browser. Maybe you already have but not included to simplify the question but below is a list with prefixes vendor taken from W3schools and MDN

@-moz-keyframes identificador    /* Mozilla Firefox */
@-webkit-keyframes identificador /* Safari, Chrome, Opera e algumas versões do Firefox */
@-o-keyframes identificador      /* Algumas versões do Opera */
@keyframes identificador         /* sem vendor */

   -webkit-animation: fade 2s;  /* Safari, Chrome, Opera e algumas versões do Firefox */
      -moz-animation: fade 2s;  /* Mozilla Firefox */

        -o-animation: fade 2s;  /* Algumas versões do Opera */
           animation: fade 2s;  /* sem vendor */

  • So I was having this problem before posting the question. Because the div is not accepting two effects: that of increasing the image and of the Fader at the same time. I was only able to put the two effects together after I played one of them to the div. Note that your code does not give the image crecsimento effect

  • It’s true. I hadn’t noticed. I just upgraded it with both effects working. There is one subject that does not include in the answer that is if two different effects use the same CSS property - filter for example. Then the most practical solution will be to add only the image within a div and add an effect to the div and other effect to img.

  • 1

    Do you know what tiredness is able to do to us? kkk. You are absolutely correct in your perfect explanation. I made the same slide 3 different ways. 2 with Javascript and 1 with pure JS. Here are the links: http://funerariasaopedro.net.br/novo/index2.php, http://funerariasaopedro.net.br/novo/index3.php, http://funerariasaopedro.net.br/novo/index4.php, Thank you very, very much for your support. Now is to stylize the arrows, the texts and make the media queries. What I do not want is to use pligins. It takes work... but it is only once

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.