CODEWITHSUNDEEP
javascripthtmlcssanimationflashing
user24875129
user24875129

Reputation: 1

Flashing JS text with hyperlink

I want flashing text to link to two different pages, and for the background colors to take over the entire page. I'm a novice, any help with JS is appreciated! Or maybe I don't even need JS for this.

Hello!

I'm trying to make a page that flashes between a black bg and white text and a white bg with black text. I want each diff page to be a hyperlink to a separate page. I tried adapting the JS script I had but the flashing only worked the way I wanted to this way. the hyperlink only works with the black bg/white text and when it flashes to white it doesn't take over the whole page like i want it to. i would also like it to not be static and move with the window configurations but the display properties im trying don't seem to work with it. i'm really new to this so any help is greatly appreciated!

       
function timer() {
  let blink2 = document.getElementById("blink2");
  blink2.style.opacity = blink2.style.opacity == 0 ? 1 : 0;
  setTimeout(timer, 250);
}

timer();
         
body {
  background-color: black;
}

#blink {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  align-items: normal;
  display: inline-block;
  font-size: 40rem;
  transform: translateX(-50%) translateY(-50%);
  color: black;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  background-size: auto;
  max-width: max-content;
}

#blink2 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  align-items: normal;
  display: inline-block;
  font-size: 40rem;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: black;
  background-size: auto;
  max-width: fit-content;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

h1 {
  font-size: 25rem;
  font-weight: 800;
}
<body>
  <div>
    <h1 id="blink"><a href="page1.html"> hello </a></h1>
  </div>
  <div>
    <h1 id="blink2"><a href="page2.html"> hello </a></h1>
  </div>
</body>

Upvotes: 0

Views: 55

Answers (1)

Alexander Nenashev
Alexander Nenashev

Reputation: 23284

You can can stretch h1 to cover the page and use a css animation:

body {
  background-color: black;
  padding:0;
  margin:0;
}

#blink {

  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10rem;
  
  /* center <a> */
  display:flex;
  justify-content: center;
  align-items: center;
  
  position:absolute;
  inset:0;
  
  animation: blink 250ms infinite;
  
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}


@keyframes blink {
  0%, 49.9% {
    background-color: black;
    color: white;
  }
  50%, 99.9% {
    background-color: white;
    color: black;
  }
}
<body>
  <h1 id="blink"><a href="page1.html"> hello </a></h1>
</body>

Upvotes: 0

Related Questions