mercredi 13 juin 2018

Random sentence generator: how to add a fade-in effect on a mouseclick

I created a code that with every click a different sentence is being displayed. I want to add a 'fade in' effect whenever you click on the screen the text fades in like on this website while scrolling: https://amessagefrom.earth/

But whenever I add in an effect the sentence doesn't display.

$(document).click(function() {
  var sentences = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7'
  ];

  var rand = sentences[Math.floor(Math.random() * sentences.length)];
  $('#quotes').text(rand);
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>

  <title>Page Title</title>
</head>

<body>
  <div id="quotes"></div>

</body>

</html>

Thanks in advance




Aucun commentaire:

Enregistrer un commentaire