CODEWITHSUNDEEP
javascripthtmlrandomfadesentence
Naomi van Maasakkers
Naomi van Maasakkers

Reputation: 11

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

Upvotes: 1

Views: 419

Answers (3)

Sudharshan Nair
Sudharshan Nair

Reputation: 1267

If you want simple fade effects you can refer this. There are many jquery functions for this. Here is the sample code

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

If you want similar effect of your given link here is the sample code of from library textillate.

<h1 class="tlt" data-in-effect="rollIn">Title</h1>
$(function () {
    $('.tlt').textillate();
});

Here is the link for reference library.

Upvotes: 1

Naomi van Maasakkers
Naomi van Maasakkers

Reputation: 11

$(document).click(function () {

var prev = "";
var sentences = [
    'You are somewhere in the ocean.',
    'You are the seer and the snake.',
    'The irony is that you are a Pure Soul, but you also experience your life.',
    'Months earlier, a high school student told me who I am.',
    'This is a new sense of self.',
    'Meditation has made a great impact on your life because no one else is going mad.',
    'YOU\'D HARDLY CHOOSE TO BE. YOU ARE GOD.',
    'IN REALITY, YOU ARE MAKING.',
    'SELF-REFLECTION IS A NEW SENSE OF SELF AND IS TRAGICALLY LIMITED.',
    'MEDITATION CAN HELP BRING YOU BACK IN THE IMAGE OF GOD, GOD IS THE SEER.',
    'All the suffering in life is because of what you\'ve done.',
    'A father, a husband because you have a son.',
    'A passenger because you have a son.',
    'You\'d have to permit that new sense of self waiting to be born.',
    'Daily, we are made in the wind.',
    'Though sinful, we can be reconciled to God in Christ and come to realize it\’s who I am.',
    'For infinite past lives the Soul has been given to you.',
    'It is essential to understand that you are an eternal Soul.',
    'A vapor in the ocean',
    'You are somewhere in the wind.',
    'The irony is that you are likely to crack.',
    'For those, who are you?',
    'There may be an identity crisis.',
    'I am yours',
    'THE TRUTH IS THAT YOU ARE ON A TRAIN.',
    'ALL LIVING BEINGS DESIRE TO BE A CHILD OF GOD.',
    'THIS PERMITS US TO FEEL ANXIOUS.',
    'EVERYTHING YOU NEED IS INSIDE OF YOU, SHE TOLD ME',



];
var rand = sentences[Math.floor(Math.random() * sentences.length)];
if (rand == prev) {
    var rand = sentences[Math.floor(Math.random() * sentences.length)];
}
prev = rand;

// Wrap every letter in a span
$('#quotes').text(rand);
$('#quotes').each(function () {
    $(this).html($(this).text().replace(/([^\x80-\xFF]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({ loop: false })
    .add({
        targets: '#quotes .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: function (el, i) {
            return 150 * (i + 1)
        }
    }).add({
        targets: '#quotes',
        opacity: 100,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
      });
/* $('#quotes').fadeOut("slow", function() {
   $('#quotes').text(rand);
   $('#quotes').fadeIn("slow", function() {
     // Animation complete*/
 });

Upvotes: 0

Ron Nabuurs
Ron Nabuurs

Reputation: 1556

You can use JQuery and the fadeIn() and fadeOut() functions. It's not exactly the sliding effect though.

For more effect you can take a look at this: http://api.jquery.com/category/effects/

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

  var rand = sentences[Math.floor(Math.random() * sentences.length)];
  $('#quotes').fadeOut("slow", function() {
    $('#quotes').text(rand);
    $('#quotes').fadeIn("slow", function() {
      // Animation complete
    });
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 1

Related Questions