Remove child element effect in CSS

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><divclass="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>    

You have the tag within each div.slide that is inheriting the animation that your container ( div.slide ) is receiving that is .fade .

I need to remove this effect from only span .

Is there a way?

    
asked by anonymous 09.05.2018 / 17:18

1 answer

3

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

I needed to make some modifications that I quoted below in CSS and jQuery to get it to 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 altered.

    $(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><!DOCTYPEhtml><html><head><metacharset="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"/><spanclass="not-fade">Este é 1</span>
        </div>
        <div class="slide">
            <img src="https://s19.postimg.cc/jggays0f7/img_2.png"/><spanclass="not-fade">Este é 2</span>
        </div>
        <div class="slide">
            <img src="https://s19.postimg.cc/kvhvnhtsj/img_3.png"/><spanclass="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 by explicitly specifying the keyword var , since the variable will be a local , that is, only present within that scope. Otherwise, it will be created in the global scope (more global object than in client side is the window - window ). In smaller programs this may not be a big problem, but when your program starts to grow, this can cause inconsistencies. Additionally, busy memory can grow rapidly making the page slower, especially 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 animation property.

 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%); }
}

Another topic out of the question: If you're looking for compatibility between browsers, it's a good idea to include vendor prefixes in @keyframes and animation for each kit / browser. Maybe you already have but did not include it to simplify the question but below is a list with prefixes vendor removed 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 */
    
09.05.2018 / 20:57