问在第一个javascript脚本完成后运行第二个javascript脚本-动画文本效果
EN

Stack Overflow用户

提问于 2018-09-01 19:39:35

回答 1查看 56关注 0票数 0

我正在使用这种未来主义风格的文本效果，并希望创建这样的效果：

首先，它应该是动画短语：

测试短语

在这之后，在这个短语后面添加一个单词，比如：

狗猫

所以最后一句话是：

测试短语狗

或

测试短语cat

第一个短语将只显示一次动画，第二个短语将互换，首先显示狗，然后是猫，然后重复。

我目前找到了一种解决方法，使用CSS使第二个短语在一段时间后出现，但这不是理想的情况。可以在JavaScript中设置吗？

此外，由于某些原因，第二个短语，当它第一次出现时，它前面没有空格，使得它像这样：

测试短语Test

这可能是什么原因呢？

// Futuristic Resolving/Typing Text Effect
// Copyright (c) by Kevin (https://codepen.io/qkevinto/pen/WQVNWO)
// License (MIT): https://choosealicense.com/licenses/mit/

var resolver = {
  resolve: function resolve(options, callback) {
    // The string to resolve
    var resolveString = options.resolveString || options.element.getAttribute('data-target-resolver');
    var combinedOptions = Object.assign({}, options, { resolveString: resolveString });

    function getRandomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    function randomCharacter(characters) {
      return characters[getRandomInteger(0, characters.length - 1)];
    };

    function doRandomiserEffect(options, callback) {
      var characters = options.characters;
      var timeout = options.timeout;
      var element = options.element;
      var partialString = options.partialString;

      var iterations = options.iterations;

      setTimeout(function () {
        if (iterations >= 0) {
          var nextOptions = Object.assign({}, options, { iterations: iterations - 1 });

          // Ensures partialString without the random character as the final state.
          if (iterations === 0) {
            element.textContent = partialString;
          } else {
            // Replaces the last character of partialString with a random character
            element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
          }

          doRandomiserEffect(nextOptions, callback);
        } else if (typeof callback === "function") {
          callback();
        }
      }, options.timeout);
    };

    function doResolverEffect(options, callback) {
      var resolveString = options.resolveString;
      var characters = options.characters;
      var offset = options.offset;
      var partialString = resolveString.substring(0, offset);
      var combinedOptions = Object.assign({}, options, { partialString: partialString });

      doRandomiserEffect(combinedOptions, function () {
        var nextOptions = Object.assign({}, options, { offset: offset + 1 });

        if (offset <= resolveString.length) {
          doResolverEffect(nextOptions, callback);
        } else if (typeof callback === "function") {
          callback();
        }
      });
    };

    doResolverEffect(combinedOptions, callback);
  }


  /* Some GLaDOS quotes from Portal 2 chapter 9: The Part Where He Kills You
     * Source: http://theportalwiki.com/wiki/GLaDOS_voice_lines#Chapter_9:_The_Part_Where_He_Kills_You
     */ };
var strings = [
'Test phrase '];


var counter = 0;

var options = {
  // Initial position
  offset: 0,
  // Timeout between each random character
  timeout: 5,
  // Number of random characters to show
  iterations: 10,
  // Random characters to pick from
  characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\\', '='],
  // String to resolve
  resolveString: strings[counter],
  // The element
  element: document.querySelector('[data-target-resolver]')


  // Callback function when resolve completes
};function callback() {
  setTimeout(function () {
    counter++;

    if (counter >= strings.length) {
      counter = 0;
    }

    var nextOptions = Object.assign({}, options, { resolveString: strings[counter] });
    resolver.resolve(nextOptions, callback);
  }, 100000000);
}

resolver.resolve(options, callback);




// Futuristic Resolving/Typing Text Effect
// Copyright (c) by Kevin (https://codepen.io/qkevinto/pen/WQVNWO)
// License: (MIT) https://choosealicense.com/licenses/mit/


var resolver = {
  resolve: function resolve(options, callback) {
    // The string to resolve
    var resolveString = options.resolveString || options.element.getAttribute('data-target-resolver2');
    var combinedOptions = Object.assign({}, options, { resolveString: resolveString });

    function getRandomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    function randomCharacter(characters) {
      return characters[getRandomInteger(0, characters.length - 1)];
    };

    function doRandomiserEffect(options, callback) {
      var characters = options.characters;
      var timeout = options.timeout;
      var element = options.element;
      var partialString = options.partialString;

      var iterations = options.iterations;

      setTimeout(function () {
        if (iterations >= 0) {
          var nextOptions = Object.assign({}, options, { iterations: iterations - 1 });

          // Ensures partialString without the random character as the final state.
          if (iterations === 0) {
            element.textContent = partialString;
          } else {
            // Replaces the last character of partialString with a random character
            element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
          }

          doRandomiserEffect(nextOptions, callback);
        } else if (typeof callback === "function") {
          callback();
        }
      }, options.timeout);
    };

    function doResolverEffect(options, callback) {
      var resolveString = options.resolveString;
      var characters = options.characters;
      var offset = options.offset;
      var partialString = resolveString.substring(0, offset);
      var combinedOptions = Object.assign({}, options, { partialString: partialString });

      doRandomiserEffect(combinedOptions, function () {
        var nextOptions = Object.assign({}, options, { offset: offset + 1 });

        if (offset <= resolveString.length) {
          doResolverEffect(nextOptions, callback);
        } else if (typeof callback === "function") {
          callback();
        }
      });
    };

    doResolverEffect(combinedOptions, callback);
  }


  /* Some GLaDOS quotes from Portal 2 chapter 9: The Part Where He Kills You
     * Source: http://theportalwiki.com/wiki/GLaDOS_voice_lines#Chapter_9:_The_Part_Where_He_Kills_You
     */ };
var strings = [
'cat',
'dog'];


var counter = 0;

var options = {
  // Initial position
  offset: 0,
  // Timeout between each random character
  timeout: 5,
  // Number of random characters to show
  iterations: 10,
  // Random characters to pick from
  characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\\', '='],
  // String to resolve
  resolveString: strings[counter],
  // The element
  element: document.querySelector('[data-target-resolver2]')


  // Callback function when resolve completes
};function callback() {
  setTimeout(function () {
    counter++;

    if (counter >= strings.length) {
      counter = 0;
    }

    var nextOptions = Object.assign({}, options, { resolveString: strings[counter] });
    resolver.resolve(nextOptions, callback);
  }, 3000);
  // }, 3000);
}

// setTimeout(resolver.resolve(options, callback), 5000);
resolver.resolve(options, callback);

.second-line {
      -webkit-animation: appear 2.5s ease-out;
              animation: appear 2.5s ease-out; }

@keyframes appear {
  0% {
    opacity: 0;
    display: none;
    position: absolute; }
  80% {
    opacity: 0;
    display: none;
    position: absolute; }
  100% {
    opacity: 1; } }

<h1><span data-target-resolver></span><span data-target-resolver2 c class="second-line"></span></h1>

javascript

css

回答 1

Stack Overflow用户

发布于 2018-10-29 02:45:28

对于空间问题，您可以在span之间添加一个不间断的空格( )，并删除/忽略脚本中的空格。

对于函数调用的链接(1=resolve“测试短语”、2=resolve“猫”等)，您可以将解析2的resolve调用放入1 (resolver.resolve(options, callback))的回调函数中。(并完全删除CSS动画。)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52127740

复制

相似问题

问在第一个javascript脚本完成后运行第二个javascript脚本-动画文本效果
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在第一个javascript脚本完成后运行第二个javascript脚本-动画文本效果EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在第一个javascript脚本完成后运行第二个javascript脚本-动画文本效果
EN