Генератор случайных предложений: как добавить эффект постепенного появления при щелчке мышью - PullRequest
Новая
       18

Генератор случайных предложений: как добавить эффект постепенного появления при щелчке мышью

0 голосов
/ 13 июня 2018

Я создал код, который с каждым кликом отображает другое предложение.Я хочу добавить эффект «исчезновения» всякий раз, когда вы щелкаете по экрану, текст исчезает, как на этом веб-сайте во время прокрутки: https://amessagefrom.earth/

Но всякий раз, когда я добавляю эффект, предложение не отображается.

$(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>

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 13 июня 2018

Если вам нужны простые эффекты затухания, вы можете сослаться на this .Для этого есть много функций jquery.Вот пример кода 

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

Если вы хотите подобный эффект по данной ссылке, вот пример кода из библиотеки textillate . 

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

Вотссылка для справки библиотека .

0 голосов
/ 14 июня 2018 
$(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*/
 });
0 голосов
/ 13 июня 2018

Вы можете использовать JQuery и функции fadeIn() и fadeOut().Это не совсем эффект скольжения.

Для большего эффекта вы можете взглянуть на это: 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...