Skip to content
This repository was archived by the owner on Aug 21, 2024. It is now read-only.

andylizf/Dynamically-Text-Changing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dynamically-Text-Changing

This about using JS(a little CSS) to make change text dynamically, look the main page of https://www.microsoft.com/net to see more, because these pull away and spin off the module of view-source:www.microsoft.com/net. Thanks again for some CSS from normalize.css and some js from Microsoft.

Free. Cross-platform. Open source. A developer platform for building all your apps.

From main page of .NET. 😏

Import to HTML

<!DOCTYPE html>
<html class="js">
<head>
	<title>Free. Cross-platform. Open source. A developer platform for building all your apps.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="bootstrap-custom.min.css"/>
	<script src="jquery-3.3.1.min.js"></script>
	<script src="textchanging.es6"></script>
</head>
<body class="home" style="position: relative; overflow-y: auto;">
	<header>
		<div class="jumbotron x-hidden-focus">
			<div class="container text-center">
				<h1>Free. Cross-platform. Open source. A developer platform for building <span class="tagline typing">all your</span> apps.</h1>
			</div>
		</div>
	</header>
	<script>
		var jumbotron = new Jumbotron();
		jumbotron.start("web", "mobile", "desktop", "gaming", "IoT", "all your");
	</script>
</body>
</html>

Coding like these helping Dynamically-Text-Changing to work. You should add

<!-- in <body> or <header> tag -->
<div class="jumbotron x-hidden-focus">
	<div class="container text-center">
		<h1>$1 <span class="tagline typing">$2</span> $3</h1>
	</div>
</div>

to  <body>($1, $2 and $3 are your own text which is showed first) and add

//in <script> tag
var jumbotron = new Jumbotron();
jumbotron.start("$4.1", "$4.2", "$4.3", $······);

to <script>($4.1, $4.1, $4.2, $4.3" are you own text which changing when it's time to change text dynamically; $······ represent you can write more there (like $4.4 , $4.5) to transfer more arguments to start method) in your HTML file.

JavaScript Class Declare

 The class ask you to use ECMAScript6.

//textchanging.es6
class Jumbotron{
  constructor(container = $(".tagline")) {}
  start(...taglines){}
}

About

see https://www.microsoft.com/net

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published