How to Apply a Fade Away Effect (Not Animation) Across All the Content of a Div

  • Home
  • Languages
  • HTML
  • How to Apply a Fade Away Effect (Not Animation) Across All the Content of a Div

How to apply a fade away effect (not animation) across all the content of a div?

You can do this with CSS (without an image or extra markup) using a ::before pseudo-element for the overlay, and linear-gradient for the fade with rgba() opacity from 0 to 1. This assumes you don't need to click on the elements in the <div> individually, since the overlay prevents that.

Demo: http://jsfiddle.net/ThinkingStiff/xBB7B/

Output:

Sample Image

CSS:

#overlay {
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

HTML:

<div id="overlay">
    <span>some text</span><br />
    <img src="http://thinkingstiff.com/images/matt.jpg" width="100" /><br />
    <p>some more text</p>
</div>

How to make a fade-in effect in a div behind another div, without the former overlapping the latter?

Add z-index: 1 to your .a class and for cleanliness add z-index: 0 to your .b class. The position attribute affects the positioning of the element but not the order in which they are stacked.

        .a {
          background-color: red;
          width: 15em;
          height: 15em;
          position: absolute;
          margin-top: -5rem;
          z-index: 1;
        }

        .b {
          background-color: blue;
          width: 15em;
          height: 15em;
          margin-top: 5rem;
          animation: show-img 1s;
                    z-index: 0;
        }

        @keyframes show-img {
          from {
            opacity: 0;
          }

          to {
            opacity: 1;
          }
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

How to remove a div with fade out effect in JavaScript?

There are two ways you can achieve this: CSS3 animation or jQuery animation.

CSS3 Animation

  1. In your CSS document, add:

    .list {
        opacity: 1;
        -webkit-transition: opacity 1000ms linear;
        transition: opacity 1000ms linear;
    }
    • This will make any change of opacity to your item fade by 1000ms.

  2. Change line 4 of your JavaScript to:

    removeTarget.style.opacity = '0';
    setTimeout(() => removeTarget.remove(), 1000);
    • This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.

Note: Make sure the time of the CSS3 transition and the setTimeout are the same.

jQuery Animation

  1. Get jQuery

    • Go to the jQuery Website and download it, or
    • Add ` in your HTML document before any jQuery code.

  2. Change line 4 of your Javascript to:

    removeTarget.fadeOut(1000)
    • This will Fade Out your item by 1000ms, you can change this time to whatever you want.

I can make an div fade in onclick, but how do i make it fade out?

Easier approach using jQuery animation, no CSS animation

function scrollToAccept() {
  const terms = document.querySelector('.terms-and-conditions');
  const button = document.querySelector('.accept');
  // const watch = document.querySelector('.watch');

  if (!terms) {
    return; // quit function because there is no terms
  }

  // fires on page load because can't find element
  function obCallback(payload) {
    // console.log(payload[0].isIntersecting); // whether element is in view or not
    // console.log(payload[0].intersectionRatio); // how much of the element is showing
    if (payload[0].intersectionRatio === 1) {
      button.disabled = false;
      // stop observing the last element
      ob.unobserve(terms.lastElementChild);
    }
  }

  // takes in callback parameter
  // will be called every time it needs to check if something is currently on the page
  // watcher (needs to be told what to watch
  const ob = new IntersectionObserver(obCallback, {
    root: terms,
    threshold: 1,
  });

  // call observe method on what we want to watch
  // ob.observe(watch);
  ob.observe(terms.lastElementChild);

}
scrollToAccept();

$('.yes').on('click', function(e) {
  e.preventDefault();
  $('.TOSHIDE').fadeToggle(3000).toggleClass('active');
  //$(this).parents('ul').next().toggleClass('active');
});
body {
  background: #ffffff;
}

.wrapper-all {
  min-height: 94vh;
  display: grid;
  justify-content: center;
  align-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 2;
}

.wrapper {
  width: 400px;
  height: 80vh;
  padding: 20px;
  border: 1px solid black;
  background: white;
  display: grid;
  grid-template-rows: 1fr auto;
}

button {
  background: #133C55;
  color: white;
  font-size: 1rem;
  padding: 20px;
  transition: opacity 0.2s;
}

button[disabled] {
  opacity: 0.1;
  /* transform: translateX(-300%) scale(0.5); */
}

.terms-and-conditions {
  overflow: scroll;
}

footer {
  background-color: #192718;
  width: 100%;
  padding: 8px 0;
  margin-top: 8px;
}

footer .container {
  width: 800px;
  margin: 0 auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

footer .container a {
  color: #fff;
}

footer a:hover {
  color: #fce26a;
}

.tacbox {
  display: block;
  padding: 1em;
  margin: 2em;
  border: 3px solid #ddd;
  background-color: #eee;
  max-width: 800px;
}

input {
  height: 2em;
  width: 2em;
  vertical-align: middle;
}

.TOSHIDE {
  display: none;
}

.TOSHIDE.active {
  display: block;
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Terms of Service</title>
  <link rel="stylesheet" href="./scroll-to-accept.css" />
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>

  <script>
    function unhideTOS() {
      document.getElementById("text").style.display = "";
    }
  </script>

  <script>
    function unlockBTN() {
      document.getElementById("text").style.display = "";
    }
  </script>

  <div class="tacbox">
    <!-- The code for the checkbox + download if checked. -->
    I agree to these ‌<a href="#tos" class="yes">Terms and Conditions.</a>
    <br>
    <a id="text" style="display:none" href="file.doc" Download>Download!</a>
  </div>

  <div class="TOSHIDE">
    <div class="wrapper-all">
      <div class="wrapper">
        <div class="terms-and-conditions">
          <h1>Terms and Conditions</h1>
          <p>Disclaimer THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. You are the Current Maintainer of the Software, and to permit recipients of the Licensed Product for any such warranty, support,
            indemnity or liability obligations to one or more recipients of Covered Code. However, You may do so in a commercial product offering.</p>
          <hr>
        </div>
        <button class="accept" disabled autocomplete="off" id="myCheck" onclick="unlockBTN()">Accept</button>
      </div>
    </div>
  </div>
  <script src="./scroll-to-accept.js"></script>
</body>

</html>

Rotation and fade-out with interval

Here is a potential solution using jQuery.

$(function() {
  setTimeout(function() {
    $('.logo').animate({
      deg: 360
    }, {
      duration: 1200,
      step: function(now) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        });
      },
      done: function() {
        $(this).fadeOut("slow");
      }
    });
  }, 1000);
});
@import url(https://fonts.googleapis.com/css?family=Lobster);
body {
  font-family: 'Lobster', cursive;
}

.circle {
  margin: auto;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background: #c4af7f;
  margin-top: 20px;
}

h1 {
  color: #D5E2D6;
  text-align: center;
  line-height: 40px;
  margin-top: -170px;
  -moz-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -o-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  -ms-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(1deg) skewY(1deg);
  /*-----------------------*/
  text-shadow: 1px 1px #93612E, 2px 2px #93612E, 3px 3px #93612E, 4px 4px #93612E, 5px 5px #93612E, 6px 6px #93612E, 7px 7px #93612E, 8px 8px #93612E, 9px 9px #93612E, 10px 10px #93612E, 11px 11px #93612E, 12px 12px #93612E, 13px 13px #93612E, 14px 14px #93612E, 15px 15px #93612E, 16px 16px #93612E, 8px 8px #93612E, 9px 9px #93612E, 9px 9px #93612E, 10px 10px #93612E, 10px 10px #93612E, 11px 11px #93612E, 11px 11px #93612E, 12px 12px #93612E, 12px 12px #93612E, 16px 16px 3px #06520C;
}

span:nth-child(1),
span:nth-child(7) {
  font-size: 30px;
}

span:nth-child(2),
span:nth-child(3),
span:nth-child(5) {
  font-size: 55px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo">
  <div class="circle"></div>
  <h1><span>La</span><br/><span>Matinale</span><br/><span>Simulation</span></h1>
</div>

Is there a way to fade just the text of a div when the div has a partially transparent background

Can you use HTML5?

Get rid of the overlay div and just CSS style the .container div.

You could use a clipping-path or mask.

Mask

.container {
etc...
mask: url(mask.svg) top left / cover;
}

Clipping Path

.container {
etc...  
  clip-path: url(#clippingPathImage);
}

The clip-path property can be applied to all HTML elements... a clipPath element or one of the basic shapes introduced with CSS Exclusions.

More info:
http://www.html5rocks.com/en/tutorials/masking/adobe/

How to make a created div in Javascript fade in and fade out?

I'm not sure if you forgot to copy a portion of your CSS but you don't seem to have any actual animations. If you want those effects you can use the CSS that https://animate.style/ provides either by importing it or extracting it from their GitHub files if you just want the two animations. But if you're going to use the animation attribute, you need some kind of keyframe animation built out otherwise nothing is going to happen. The forwards value lets the animations play and then doesn't repeat them so it's not flashing after the user clicks the button.

Also, you had some broken JS but that was a simple mistake.

Worth reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations so you can see how all of the attributes can be animated and controlled

function myFunction() {
  var test = document.querySelector('#color');
  var x = document.createElement('div');
  if(test.style.color == ""){
    test.style.color = "red";
    x.innerHTML ='Liked this tournament!';
    x.id = "snackbar";
    x.className = "show";
    
  } else{
    test.style.color = "";
    x.innerHTML='Removed like from this tournament!'
    x.id = "snackbar";
    x.className = "show";
    
  }
  document.body.appendChild(x);
  
}
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 10%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

.fadeIn {
  animation-name: fadeIn;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
  <li onclick="myFunction();"><a href="#/">click me<i id="color" class="fas fa-heart"></i></a></li> 
  <li><a href="#">not me<i class="fas fa-plus"></i></a></li>
  <li><a href="#">or me<i class="fas fa-expand"></i></a></li>
</ul>

Creating a Fade Effect On A Div Tag Using A Separate JavaScript File

This is a non so elegant way to achieve something like this, it's all about what are you going for and then you build up the logic behind that. Let me know if you have any questions.

You will notice that I am calling the checkStatus function in every action, in this function I'm saving initially the status of the action in a variable (status) and then I check this variable on every click. So, if you press widen the status "widen" is saved in this variable and then if you press widen again you have this information so you can reset the values or do whatever you want.

var status = "";

function growFunction(id){
    let height; 
    if(checkStatus("grow")){
      height="250px"
    }else{
      height="350px"
    }
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.opacity = 1;
  }

  function shrinkFunction(id){
    let height; 
    if(checkStatus("shrink")){
      height="250px"
    }else{
      height="50px"
    }
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.opacity = 1;
  }
  
  function widenFunction(id){
    let width; 
    if(checkStatus("widen")){
      width="250px"
    }else{
      width="450px"
    }
    document.getElementById("box").style.width = width;
    document.getElementById("box").style.opacity = 1;
    
  }

  function tinyFunction(id){
    let width; let height; let margin;
    if(checkStatus("tiny")){
      width="250px"
      margin="25px";
      height="250px"
    }else{
      height="100px"
      width="100px"
      margin="10px"
    }
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = height;
    document.getElementById("box").style.width = width; 
    document.getElementById("box").style.margin = margin;
  }

  function fadeFunction(id){
    let opacity; 
    if(checkStatus("fade")){
      opacity=1
    }else{
      opacity=0
    }
    document.getElementById("box").style.opacity = opacity;
  }

  function blueFunction(id){
    let color; 
    if(checkStatus("blue")){
      color="orange"
    }else{
      color="blue"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function pinkFunction(id){
    let color; 
    if(checkStatus("pink")){
      color="orange"
    }else{
      color="pink"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function purpleFunction(id){
    let color; 
    if(checkStatus("purple")){
      color="orange"
    }else{
      color="purple"
    }
    document.getElementById("box").style.backgroundColor =color;
    document.getElementById("box").style.opacity = 1;
  }
  
  function greenFunction(id){
    let color; 
    if(checkStatus("green")){
      color="orange"
    }else{
      color="green"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function yellowFunction(id){
    let color; 
    if(checkStatus("yellow")){
      color="orange"
    }else{
      color="yellow"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function cyanFunction(id){
    let color; 
    if(checkStatus("cyan")){
      color="orange"
    }else{
      color="cyan"
    }
    document.getElementById("box").style.backgroundColor = color;
    document.getElementById("box").style.opacity = 1;
  }

  function resetFunction(id){
    document.getElementById("box").style.opacity = 1;
    document.getElementById("box").style.height = "250px";
    document.getElementById("box").style.width = "250px" ; 
    document.getElementById("box").style.backgroundColor = "orange";
    document.getElementById("box").style.margin = "25px";
  }

function checkStatus(x){
  if(status != "" && status != x){
    status = x;
    return false;
  }else{
    if(status==x){
      status = ""
      return true;
    }else{
      status = x;
      return false;
    }
  }
}
<!DOCTYPE html>

<head>
    <style>
        #large22px {
    font-size: 22px;
    }
    </style>
    <title>Jiggle Into JavaScript</title>
</head>
<body>

    <p id="large22px">Press the buttons to change the box:</p>

    <div id="box" style="height:250px;transition:.3s;width:250px; background-color:orange; margin:25px"></div>

    <button id="growFunction" onclick="growFunction()">Grow</button>
    <button id="shrinkFunction" onclick="shrinkFunction()">Shrink</button>
    <button id="widenFunction" onclick="widenFunction()">Widen</button>
    <button id="tinyFunction" onclick="tinyFunction()">Tiny</button>
    <button id="fadeFunction" onclick="fadeFunction()">Fade</button> 
    <button id="resetFunction" onclick="resetFunction()">Reset</button>
    <br>
    <br>
    <button id="blueFunction" onclick="blueFunction()">Blue</button>
    <button id="pinkFunction" onclick="pinkFunction()">Pink</button>
    <button id="purpleFunction" onclick="purpleFunction()">Purple</button>
    <button id="greenFunction" onclick="greenFunction()">Green</button>
    <button id="yellowFunction" onclick="yellowFunction()">Yellow</button>
    <button id="cyanFunction" onclick="cyanFunction()">Cyan</button>

    <script type="text/javascript" src="Javascript.js"></script>

CSS animations default to slow fade in-out, is there a way to change that?

In order to illustrate your issue on the site, I created a snippet using background colors instead of images:

.homeslider {
  width: 950px;
  height: 400px;
  padding-left: 25px;
  animation-name: homepics;
  animation-duration: 100s;
}

@keyframes homepics {
  0% { background-color: red; }
  10% { background-color: orange; }
  20% { background-color: yellow; }
  30% { background-color: green; }
  40% { background-color: blue; }
  50% { background-color: indigo; }
  80% { background-color: violet; }
  90% { background-color: purple; }
}
<div class="homeslider"></div>

How to get Fade-in-out modal effect?

Leaving the element on the page with display: none; opacity: 0; will maintain the layout of that element on the page, covering your button. You can use the animationend event to apply display: none once the element has faded out.

var id01 = document.getElementById('id01');

document.querySelector('.close').addEventListener('click', function() {

  id01.classList.add('w3-animate-show');

})

id01.addEventListener('animationend', function() {

  if (this.classList.contains('w3-animate-show')) {

    this.style.display = 'none';

    this.classList.remove('w3-animate-show')

  }

});
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<style>

 .w3-animate-opacity {

   animation: opac 0.8s

 }

 

 @keyframes opac {

   from {

     opacity: 0

   }

   to {

     opacity: 1

   }

 }

 

 .w3-animate-show {

   animation: show 0.8s;

   animation-fill-mode: forwards;

 }

 

 @keyframes show {

   0% {

     opacity: 1

   }

   100% {

     opacity: 0

   }

 }

</style>

<div class="w3-container">

  <h2>Animated Modal</h2>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Fade In Modal</button>

  <div id="id01" class="w3-modal w3-animate-opacity">

    <div class="w3-modal-content w3-card-4">

      <header class="w3-container w3-teal">

        <span class="w3-button w3-large w3-display-topright close">×</span>

        <h2>Modal Header</h2>

      </header>

      <div class="w3-container">

        <p>Some text..</p>

        <p>Some text..</p>

      </div>

      <footer class="w3-container w3-teal">

        <p>Modal Footer</p>

      </footer>

    </div>

  </div>

</div>

Related Topics

Best JSON-Ld Practices: Using Multiple <Script> Elements

HTML Textarea Horizontal Scroll

Why Is "​" Being Injected into My HTML

Html5 Video Not Working in Ie 11

Height of Flex Container Not Working Properly in Safari

Label Text Is Wrapped But Not Indent Second Line

Responsive Image Align Center Bootstrap 3

Ribbon with a "3D" Effect

CSS Show Div Background Image on Top of Other Contained Elements

CSS Font Size Using Em Different on Different Pages

External Style Sheets, Specifying Absolute or Relative Paths

How to Get a Div Centered with Another Div on the Right of It

Animate Spinning Circle(Percentage) with CSS

How to Keep a Nav Bar at the Top of the Page

Coloring the Text Depending on Numeric Value Using CSS

Is There a Style Type Besides Text/Css

Floating Divs Left, Make All Divs Height Equal the Tallest Div in It's Row

HTML Generated Microsoft Word Document with Header, Footer and Watermark


Leave a reply



Submit