When a key is pressed, apply a background color and fade out effect using JavaScript

Question

When a key is pressed, apply a background color and fade out effect using JavaScript

Whenever the enter key is pressed, I want to make a red color appear briefly and then fade out quickly to create a blinking effect.

I attempted adding a new class on Keypress that would transition the opacity to 0:

function enterpressalert(e, text) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    document.getElementById('body').className = "show";
  }
}

    #body {
      background-color: rgb(175, 30, 30);
      opacity: .25;
      transition: opacity 0.4s ease-in;
      -ms-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -webkit-transition: opacity 0.4s ease-in;
    }

    #body.show {
      opacity: 0;
      transition: opacity 0.4s ease-out;
      -ms-transition: opacity 0.4s ease-out;
      -moz-transition: opacity 0.4s ease-out;
      -webkit-transition: opacity 0.4s ease-out;
    }

<body id="body" onKeyPress="enterpressalert(event, this)></body>

javascript html css

Answer 1

Answer №1

Welcome here:

function keyPressedFunction(evt, text) {
  var key = evt.keyCode || evt.which;
  if (key == 13) {
    document.getElementById('body').style.animationName = "alert";
    setTimeout(function() {
      document.getElementById('body').id = "newBodyID";
      setTimeout(function() {
         document.getElementById('newBodyID').id = "body";
         document.getElementById('body').style.animationName = "noAnimation";      
      }, 4000);
    }, 100);
  }
}

    #body {
      background-color: rgb(175, 30, 30);
      opacity: .25;
      animation-name: noAnimation;
      animation-duration: 0.1s;
    }

    #newBodyID {
      background-color: yellow;
      opacity: .25;
      animation-name: phaseTwo;
      animation-duration: 4s;      
    }

    @keyframes alert {
       from {background-color: yellow}
       to {background-color: rgb(175, 30, 30);;}
    }

    @keyframes phaseTwo {
       from {background-color: yellow;}
       to {background-color: rgb(175, 30, 30);}
    }

<body id="body" onkeypress="keyPressedFunction(event, 'TEXT?')">
  
  </body>

Answer 2

Welcome here:

function keyPressedFunction(evt, text) {
  var key = evt.keyCode || evt.which;
  if (key == 13) {
    document.getElementById('body').style.animationName = "alert";
    setTimeout(function() {
      document.getElementById('body').id = "newBodyID";
      setTimeout(function() {
         document.getElementById('newBodyID').id = "body";
         document.getElementById('body').style.animationName = "noAnimation";      
      }, 4000);
    }, 100);
  }
}

    #body {
      background-color: rgb(175, 30, 30);
      opacity: .25;
      animation-name: noAnimation;
      animation-duration: 0.1s;
    }

    #newBodyID {
      background-color: yellow;
      opacity: .25;
      animation-name: phaseTwo;
      animation-duration: 4s;      
    }

    @keyframes alert {
       from {background-color: yellow}
       to {background-color: rgb(175, 30, 30);;}
    }

    @keyframes phaseTwo {
       from {background-color: yellow;}
       to {background-color: rgb(175, 30, 30);}
    }

<body id="body" onkeypress="keyPressedFunction(event, 'TEXT?')">
  
  </body>

Answer 3

Answer №2

You have the ability to change colors in a unique way. Instead of relying on opacity, try using background-color: rgba(

body.onkeydown = checkKey;

function checkKey(e) {
e = e || window.event;
    
if (e.keyCode == 13) {
   document.getElementById('body').className = "show";
   var myVar =  setInterval(function(){  document.getElementById('body').className = ""; clearInterval(myVar);}, 500);
    
  }
}

#body {
      background-color: rgba(175, 30, 30,1);
      opacity: 1;
      transition: all 0.4s ease-in;
      -ms-transition: all 0.4s ease-in;
      -moz-transition: all 0.4s ease-in;
      -webkit-transition: all 0.4s ease-in;
      
    }

    #body.show {
     background-color: rgba(175, 30, 30,0);
      transition: all 0.4s ease-out;
      -ms-transition: all 0.4s ease-out;
      -moz-transition: all 0.4s ease-out;
      -webkit-transition: all 0.4s ease-out;
    }

<body id="body" >
</body>

Answer 4

You have the ability to change colors in a unique way. Instead of relying on opacity, try using background-color: rgba(

body.onkeydown = checkKey;

function checkKey(e) {
e = e || window.event;
    
if (e.keyCode == 13) {
   document.getElementById('body').className = "show";
   var myVar =  setInterval(function(){  document.getElementById('body').className = ""; clearInterval(myVar);}, 500);
    
  }
}

#body {
      background-color: rgba(175, 30, 30,1);
      opacity: 1;
      transition: all 0.4s ease-in;
      -ms-transition: all 0.4s ease-in;
      -moz-transition: all 0.4s ease-in;
      -webkit-transition: all 0.4s ease-in;
      
    }

    #body.show {
     background-color: rgba(175, 30, 30,0);
      transition: all 0.4s ease-out;
      -ms-transition: all 0.4s ease-out;
      -moz-transition: all 0.4s ease-out;
      -webkit-transition: all 0.4s ease-out;
    }

<body id="body" >
</body>

When a key is pressed, apply a background color and fade out effect using JavaScript

Answer №1

Answer №2

Similar questions

React with Three.js - Geometry is present but not displaying on screen

What is the best way to show a dropdown menu on the right side of the

Utilize OpenLayer3 to showcase Markers and Popups on your map

An issue has occurred while trying to execute the npm start command within PhpStorm

Sending AJAX request within a Twitter Bootstrap modal in Symfony2

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Library of CSS styling information

AngularJS directive ngShow not working properly

JavaScript: abbreviated way to selectively append an element to an array

How can I align an input to the right using Bootstrap?

Rearranging components in React does not automatically prompt a re-render of the page

Twig: A guide to showcasing HTML content within block titles

Discover the best correlation among multiple arrays

Discovering duplicate values in a JSON object using JavaScript (JQuery)

Tips for transforming code with the use of the then block in javascript, react, and cypress

Clicking on a JQuery dropdown menu will always result in it staying open

The error message for ExpressJS states: "Headers cannot be set after they have already been sent."

The sequence of Angular directives being executed

React - The ._id received by the Modal inside the map function is incorrect

Stylesheets may not display correctly in Firefox and IE