Typed.js
Decorate your website with Typed.js is a library that types, allowing to showcase more texts in a sentence.
Typed.js #1
HTML:
<!-- Hero Section -->
<div class="position-relative gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../assets/img/1920x800/img7.jpg);">
<div class="d-lg-flex align-items-lg-center height-100vh--lg">
<div class="container text-center space-2 space-0--lg">
<h2 class="display-3 font-size-48--md-down text-white mb-4">
<strong class="u-text-animation-v1 u-text-animation-v1--typing"></strong>
for everyone
</h2>
</div>
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/typedjs/typed.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/typed.js/lib/typed.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of text animation (typing)
var typed = new Typed(".u-text-animation-v1.u-text-animation-v1--typing", {
strings: ["Build", "Design", "Code"],
typeSpeed: 130,
loop: true,
backSpeed: 50,
backDelay: 3000
});
});
</script>
Typed.js #2
Make difference
We are
HTML:
<!-- Hero Section -->
<div class="bg-img-hero-center" style="background-image: url(../assets/img/1920x800/img6.jpg);">
<div class="container space-2 space-4-top--lg space-3-bottom--lg">
<div class="w-md-75">
<!-- Title -->
<div class="mb-7">
<span class="d-block text-white text-uppercase mb-2">Make difference</span>
<h2 class="display-2 font-size-48--md-down text-white">
We are
<strong class="u-text-animation-v2 u-text-animation-v2--typing"></strong>
</h2>
</div>
<!-- End Title -->
</div>
<div class="w-md-75 w-lg-50">
<!-- Input -->
<form class="js-validate js-form-message">
<div class="js-focus-state input-group input-group-lg form form--lg form--white-brd">
<input type="email" class="form-control form__input" name="email" required
placeholder="Enter your email address"
aria-label="Enter your email address">
<span class="input-group-append form__append">
<button type="submit" class="btn btn-primary">Get Started</button>
</span>
</div>
</form>
<!-- End Input -->
</div>
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/typedjs/typed.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/typed.js/lib/typed.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of text animation (typing)
var typed = new Typed(".u-text-animation-v2.u-text-animation-v2--typing", {
strings: ["creative", "funny", "Space"],
typeSpeed: 130,
loop: true,
backSpeed: 50,
backDelay: 3000
});
});
</script>