Found this awesome JavaScrip plug-in made by Matt Boldt and wanted to play around with it. Hope you like it.
Last active
August 21, 2023 10:16
-
-
Save evwltrs/f0e5414ba0f1983110c7c36b42b26bc7 to your computer and use it in GitHub Desktop.
typed.js - example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="page_wrap"> | |
<ul class="btns"> | |
<a href="https://www.mattboldt.com/demos/typed-js/" target="_blank"><li class="btn">visit the creator of Typed.js</li></a> | |
<a href="https://codepen.io/merb/" target="_blank"><li class="btn">see my other pens</li></a> | |
</ul> | |
<div class="banner"> | |
<div class="typed_wrap"> | |
<h1>We Are <span class="typed"></span></h1> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
$(".typed").typed({ | |
strings: ["Developers.", "Designers.", "People."], | |
// Optionally use an HTML element to grab strings from (must wrap each string in a <p>) | |
stringsElement: null, | |
// typing speed | |
typeSpeed: 30, | |
// time before typing starts | |
startDelay: 1200, | |
// backspacing speed | |
backSpeed: 20, | |
// time before backspacing | |
backDelay: 500, | |
// loop | |
loop: true, | |
// false = infinite | |
loopCount: 5, | |
// show cursor | |
showCursor: false, | |
// character for cursor | |
cursorChar: "|", | |
// attribute to type (null == text) | |
attr: null, | |
// either html or text | |
contentType: 'html', | |
// call when done callback function | |
callback: function() {}, | |
// starting callback function before each string | |
preStringTyped: function() {}, | |
//callback for every typed string | |
onStringTyped: function() {}, | |
// callback for reset | |
resetCallback: function() {} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.banner { | |
display: block; | |
min-height: 200px; | |
width: 100%; | |
position: relative; | |
} | |
.typed_wrap { | |
display: block; | |
border: 4px solid #ecf0f1; | |
width: 290px; | |
height: auto; | |
padding: 30px; | |
/*centers it in the .banner*/ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%,-50%); | |
-moz-transform: translate(-50%,-50%); | |
-ms-transform: translate(-50%,-50%); | |
-o-transform: translate(-50%,-50%); | |
transform: translate(-50%,-50%); | |
} | |
.typed_wrap h1 { | |
display: inline; | |
} | |
/*Add custom cursor so it auto inherits font styles*/ | |
.typed::after { | |
content: '|'; | |
display: inline; | |
-webkit-animation: blink 0.7s infinite; | |
-moz-animation: blink 0.7s infinite; | |
animation: blink 0.7s infinite; | |
} | |
/*Removes cursor that comes with typed.js*/ | |
.typed-cursor{ | |
opacity: 0; | |
display: none; | |
} | |
/*Custom cursor animation*/ | |
@keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
@-webkit-keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
@-moz-keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
.btns { | |
display: block; | |
width: 400px; | |
margin: 0; | |
padding: 30px 0 0 30px; | |
} | |
.btns a { | |
display: inline-block; | |
margin-left: 5px; | |
} | |
.btns a:first-child{margin-left:0} | |
.btn { | |
font-family: sans-serif; | |
font-size: 14px; | |
font-weight: 600; | |
color: #ecf0f1; | |
text-decoration: none; | |
} | |
a .btn { | |
cursor: pointer; | |
border: 1.5px solid #ecf0f1; | |
border-radius: 5px; | |
display: inline-block; | |
padding: 10px; | |
list-style-type: none; | |
transition: all .3s; | |
} | |
.btn:hover { | |
background: #ecf0f1; | |
color: #34495e; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment