Как я могу отобразить случайный тег класса html в виде анимации?

Question

Как я могу отобразить случайный html тег класса в виде анимации?

У меня есть h1 теги:
<h1>ProxyConnect BackPhaze</h1>

, обработанные css ниже:

h1 {
  font-family   : "RobotoCondensed", sans-serif;
  font-size     : 2.5em;
  letter-spacing: -0.07ex;
  animation     : anim 1.5s infinite alternate ease-in-out;
  color         : #FBBC05;
  position      : absolute;
  max-width     : 100%;
  top           : 55%;
}

@keyframes anim {
  from {
    text-shadow: 0 0 10px transparent;
  }
  to {
    text-shadow: 0 5px 5px #FBBC05;
  }
}

Мне нужен css или js отображать теги h1 один за другим, а также повторять процесс.

Пожалуйста, как мне это заархивировать? Хорошее решение будет оценено. С наилучшими пожеланиями.

Answer 1

код для случайного текста h1 и цвета случайного класса

const randomNumber=m=>Math.floor(Math.random() *m); // random value maker

const h1Elm = document.getElementById('h1-Elm')
  ,   cMax  = colors.length
  ,   h1Max = h1_Texts.length
  ;
setInterval( () => {
  h1Elm.style.setProperty('--txt-color', colors[randomNumber(cMax)] )
  h1Elm.textContent = h1_Texts[ randomNumber(h1Max) ]
}, 7000);

он использует css переменные: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

#h1-Elm {
  --txt-color   : #35668E;

  color         : var(--txt-color);

образец рабочий код:

const h1_Texts=
        [ "Love Me Do", "P.S. I Love You"
        , "Please Please Me", "Ask Me Why"
        , "From Me to You", "Thank You Girl"
        , "She Loves You", "I'll Get You"
        , "I Want to Hold Your Hand", "This Boy"
        , "Can't Buy Me Love ", "You Can't Do That"
        , "A Hard Day's Night ", "Things We Said Today"
        , "I Feel Fine", "She's a Woman"
        , "Ticket to Ride", "Yes It Is"
        , "Help!", "I'm Down"
        , "We Can Work It Out", "Day Tripper"
        , "Paperback Writer", "Rain"
        , "Yellow Submarine", "Eleanor Rigby"
        , "Strawberry Fields Forever", "Penny Lane"
        , "All You Need Is Love", "Baby, You're a Rich Man "
        , "Hello, Goodbye", "I Am the Walrus"
        , "Lady Madonna", "The Inner Light"
        , "Hey Jude", "Revolution"
        , "Get Back", "Don't Let Me Down"
        , "The Ballad of John and Yoko", "Old Brown Shoe"
        , "Something", "Come Together"
        , "Let It Be", "You Know My Name (Look Up the Number)"
        ]

const colors=
  [ '#713255', '#193133', '#1C1E2A', '#2A3135', '#27342A', '#472339', '#4B1F3B', '#6B133B'
  , '#2D5B38', '#0D4336', '#266230', '#266234', '#26703D', '#4A573D', '#41423C', '#163A6A'
  , '#18344D', '#2D374E', '#282955', '#292A7B', '#2C5C4E', '#174750', '#0D4043', '#0B4050'
  , '#19476E', '#12427A', '#335175', '#204562', '#067079', '#2F7568', '#307562', '#62646B'
  , '#C14A36', '#B51827', '#B02F39', '#AB313B', '#C30F21', '#C80D1B', '#C0121C', '#98473E'
  , '#AB4330', '#AC4033', '#B02D54', '#AE1E42', '#B31F41', '#923A4C', '#913C51', '#982570'
  , '#D42B4D', '#D43D50', '#D13F52', '#C53678', '#9D4E5F', '#88557D', '#CF5C65', '#CD4856'
  , '#D2545F', '#D46B55', '#68887C', '#C3847B', '#91847D', '#2A2D85', '#35668E', '#164F87'
  , '#0D4F8C', '#2E79B3', '#2773AE', '#4978A5', '#51698A', '#47668B', '#6D7996', '#A33B84'
  , '#996497', '#8A5782', '#8F4582', '#847B91', '#83619D', '#C7728B', '#CE5B8F', '#D2598F'
  , '#5B96C7', '#1C898C', '#258590', '#20878E', '#3380B8', '#759096', '#6B91B1', '#CEBAC2'
  , '#9B9CAA', '#8F8E8F', '#A58695', '#AEAFB0', '#D99BA1', '#A8B5CB'
  ]

const randomNumber=m=>Math.floor(Math.random() *m); 

const h1Elm = document.getElementById('h1-Elm')
  ,   cMax  = colors.length
  ,   h1Max = h1_Texts.length
  ;
setInterval( () => {
  h1Elm.style.setProperty('--txt-color', colors[randomNumber(cMax)] )
  h1Elm.textContent = h1_Texts[ randomNumber(h1Max) ]
}, 7000);

#h1-Elm {
  --txt-color   : #35668E;
  font-family   : "RobotoCondensed", sans-serif;
  font-size     : 2.5em;
  letter-spacing: -0.07ex;
  animation     : anim 1.5s infinite alternate ease-in-out;
  color         : var(--txt-color);
  position      : absolute;
  max-width     : 100%;
}
@keyframes anim {
  from { text-shadow: 0 0 10px transparent; }
  to   { text-shadow: 0 5px 5px var(--txt-color); }
}

<h1 id="h1-Elm">A Hard Day's Night</h1>