Shopify动态打字效果

• 转到主题 -> 编辑代码

• 添加新部分“typewriter”

• 粘贴以下代码

<style>
  .custom-typewriter-section {
    text-align: center;
    background:{{section.settings.colorBackground}};
  }
  .custom-typewriter-section .title {
    margin: 0;
    font-size: {{ section.settings.textsize }}px;
    padding-top: {{ section.settings.spacing }}px;
    padding-bottom: {{ section.settings.spacing }}px;
  }
  .custom-typewriter-section a {
    color:{{section.settings.colorText}};
    text-decoration: none;
  }
  @media only screen and (max-width: 800px) {
    .custom-typewriter-section .title {
      margin: 0;
      font-size: {{ section.settings.textsize_mobile }}px;
      padding-top: {{ section.settings.spacing_mobile }}px;
      padding-bottom: {{ section.settings.spacing_mobile }}px;
    }
  }

</style>

<div class="custom-typewriter-section">
  <h1 class="title">
    <a
      href=""
      class="typewrite"
      data-period="2000"
      data-type="{{ section.settings.text }}"
    >
      <span class="wrap"></span>
    </a>
  </h1>
  
</div>
 
{% schema %}
{
  "name": "Type Writer",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Hi I'm Lucy.|I am Creative.|I Love Design.|I Love to Develop.",
      "label": "Enter text"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#0070c0"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "range",
      "id": "spacing",
      "label": "Text Spacing",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 100
    },
    {
      "type": "range",
      "id": "textsize",
      "label": "Font Size",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 70
    },
    {
      "type": "range",
      "id": "spacing_mobile",
      "label": "Text Spacing (Mobile)",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 40
    },
    {
      "type": "range",
      "id": "textsize_mobile",
      "label": "Font Size (Mobile)",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 25
    }
  ],
  "presets": [
    {
      "name": "Type Writer"
    }
  ]
}
{% endschema %}

<script>
 
  var TxtType = function (el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = "";
    this.tick();
    this.isDeleting = false;
  };

  TxtType.prototype.tick = function () {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) {
      delta /= 2;
    }

    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }

    setTimeout(function () {
      that.tick();
    }, delta);
  };

  window.onload = function () {
    var elements = document.getElementsByClassName("typewrite");
    for (var i = 0; i < elements.length; i++) {
      var toRotate = elements[i].getAttribute("data-type");
      const arr = toRotate.split('|');
      var myJsonString = JSON.stringify(arr);
      
      console.log(myJsonString)
      var period = elements[i].getAttribute("data-period");
      if (myJsonString) {
        new TxtType(elements[i], JSON.parse(myJsonString), period);
      }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
    document.body.appendChild(css);
  };
</script> 

自定义主题

添加Type Writer部分

修改文字，背景颜色，字体大小颜色，间隔等,然后保存。

最终效果