gsap实现文字键入动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现文字键入动画效果，可以自己输入文字

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@900&amp;display=swap'>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  background: var(--bg);
}

.controls {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
}

.input,
#btn {
  background: none;
  border: none;
  background-color: rgba(255, 255, 255, 0.25);
  padding: 6px;
  color: #fff;
  border-radius: 6px;
  transition: background 100ms;
}
.input:focus,
#btn:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.35);
}

.input {
  font-size: 20px;
  text-align: center;
  border-bottom: 2px solid #ddd;
  width: 180px;
}
.input::placeholder {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
}

#btn {
  margin-left: 10px;
  fill: #fff;
  width: 35px;
  height: 35px;
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#btn svg {
  width: 70%;
  height: 70%;
}

#svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}

.text,
.offscreen-text {
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  position: absolute;
  margin: 0;
  z-index: 1;
  letter-spacing: 2px;
}

.text::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50vh;
  top: 100%;
  left: 0;
  background: var(--bg);
  z-index: 10;
}

.offscreen-text {
  text-align: center;
  top: -9999px;
}

.text span {
  position: absolute;
  font-weight: 900;
}

.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #333333;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale(1.1);
}
</style>

</head>
<body translate="no">
<p id="offscreen-text" class="offscreen-text"></p>
<p id="text" class="text"></p>
<svg id="svg">
</svg>
<div class="controls">
<input type="text" class="input" id="input" placeholder="Type Here" />
<button id="btn">
<svg>
<use xlink:href="#pallete-icon" />
</svg>
</button>
</div>
<svg class="icons" style="display: none;">
<symbol id="pallete-icon" viewBox="0 0 512.007 512.007" xmlns="http://www.w3.org/2000/svg">
<path d="m151 421.004c0-33.091-26.909-60-60-60s-60 26.909-60 60v30c0 16.538-14.462 31-31 31v30h61c49.629 0 90-41.371 90-91z" />
<path d="m251.063 125.603c-8.005 2.153-12.762 10.351-10.605 18.369 2.067 7.714 9.983 12.788 18.369 10.605 8.06-2.168 12.739-10.406 10.605-18.369-2.166-8.047-10.451-12.74-18.369-10.605z" />
<path d="m166.205 239.436c7.96 2.111 16.196-2.521 18.369-10.605 2.166-8.082-2.655-16.236-10.591-18.369h-.015c-4.255-1.148-5.405-.284-8.414.698.17 9.04.289 18.419.352 28.129.11.032.187.118.299.147z" />
<path d="m331.542 368.02c-2.17-8.066-10.448-12.728-18.369-10.591-8.143 2.19-12.722 10.499-10.605 18.369 2.139 7.983 10.283 12.7 18.369 10.605 8.005-2.153 12.762-10.351 10.605-18.369z" />
<path d="m381.464 181.765c5.845-5.859 5.845-15.381 0-21.226-5.848-5.848-15.353-5.872-21.226 0-5.845 5.845-5.845 15.381.015 21.226 5.83 5.83 15.351 5.83 21.211 0z" />
<path d="m286.879 30.213c-49.276 1.776-94.508 21.255-130.562 45.985 4.041 27.508 6.896 61.747 8.416 104.092 5.616-.67 11.36-.315 16.985 1.198 24.038 6.427 38.287 31.069 31.831 55.107-5.442 20.332-23.809 33.369-43.389 33.369-1.441 0-2.877-.432-4.318-.571-.181 23.992-.725 47.73-1.76 70.399 15.364 6.383 27.372 14.886 35.213 25.9 15.879 22.31 11.646 48.472 9.976 55.972-5.563 24.913 9.126 50.275 34.292 55.122 14.224 2.725 28.521 4.072 42.715 4.072 123.369 0 226.727-100.21 225.722-226.655-1.051-128.243-112.028-228.251-225.121-223.99zm52.134 109.116c17.578-17.549 46.113-17.549 63.662 0s17.549 46.099 0 63.647v.015c-17.547 17.518-46.099 17.52-63.647 0-17.535-17.564-17.535-46.113-.015-63.662zm-127.53 12.392c-6.385-23.714 7.54-48.604 31.816-55.093 23.862-6.401 48.662 7.837 55.107 31.816 6.443 23.989-7.773 48.671-31.816 55.107-23.981 6.427-48.663-7.729-55.107-31.83zm117.217 263.658c-23.976 6.423-48.677-7.857-55.107-31.816-6.443-23.989 7.773-48.671 31.816-55.107 24.144-6.423 48.693 7.841 55.107 31.831 6.462 24.026-7.825 48.677-31.816 55.092zm116.674-116.675c-6.426 24.038-31.126 38.265-55.107 31.816-23.974-6.418-38.286-31.024-31.816-55.107 6.493-24.258 31.34-38.185 55.107-31.816 23.98 6.43 38.248 31.157 31.816 55.107z" />
<path d="m405.795 272.571c-7.857-2.119-16.177 2.459-18.369 10.605-2.166 8.082 2.655 16.236 10.591 18.369 8.214 2.122 16.256-2.692 18.384-10.605 2.138-7.983-2.623-16.23-10.606-18.369z" />
<path d="m135.819 271.004c.042-5.019.181-9.959.181-15 0-116.323-7.808-256-45-256s-45 139.677-45 256c0 5.041.139 9.981.181 15z" />
<path d="m91 331.004c15.63 0 30.121 4.362 42.942 11.398.648-13.462 1.143-27.328 1.489-41.398h-88.862c.346 14.07.84 27.936 1.489 41.398 12.821-7.037 27.312-11.398 42.942-11.398z" />
</symbol>
</svg>


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script>
console.clear();

const { gsap } = window;

class SVGElement {
	constructor(element) {
		this.element = element;
	}
	set(attributeName, value) {
		this.element.setAttribute(attributeName, value);
	}

	style(property, value) {
		this.element.style[property] = value;
	}
}

class App {
	constructor(word) {
		this.svg = this.selectSVG("svg");
		this.text = document.getElementById("text");
		this.offscreenText = document.getElementById("offscreen-text");
		this.input = document.getElementById("input");
		this.input.value = "";
		this.button = document.getElementById("btn");
		this.width = window.innerWidth;
		this.height = window.innerHeight;
		this.textSize = 0;
		this.textCenter = 0;
		this.letters = [];
		this.prompt = word.split("");
		this.runPrompt = true;
		this.colorPalletes = [
			{
				background: "#00121a",
				palletes: ["#00F3FE", "#006FFE", "#693DFE", "#FFFDFF"]
			},
			{
				background: "#264653",
				palletes: ["#2a9d8f", "#f4a261", "#e76f51", "#FFFDFF"]
			},
			{
				background: "#1d3557",
				palletes: ["#e63946", "#457b9d", "#a8dadc", "#FFFDFF"]
			},
			{
				background: "#000000",
				palletes: ["#14213d", "#fca311", "#e5e5e5", "#ffffff"]
			},
			{
				background: "#3d405b",
				palletes: ["#e07a5f", "#81b29a", "#f2cc8f", "#FFFDFF"]
			},
			{
				background: "#9b5de5",
				palletes: ["#00bbf9", "#00f5d4", "#fee440", "#FFFDFF"]
			},
			{
				background: "#22223b",
				palletes: ["#4a4e69", "#9a8c98", "#c9ada7", "#f2e9e4"]
			},
			{
				background: "#114b5f",
				palletes: ["#1a936f", "#88d498", "#c6dabf", "#f3e9d2"]
			}
		];
		this.letterStaggerCount = 4;
	}

	init() {
		this.selectRandomPallete();
		this.resizePage();
		window.addEventListener("resize", this.resizePage.bind(this));
		this.input.addEventListener("keyup", this.keyup.bind(this));
		this.button.addEventListener("click", this.selectRandomPallete.bind(this));
		this.input.focus();
		this.addPrompt(0);
	}

	selectSVG(id) {
		const el = document.getElementById(id);
		return new .........完整代码请登录后点击上方下载按钮下载查看