Found this awesome JavaScrip plug-in made by Matt Boldt and wanted to play around with it. Hope you like it.
A Pen by Alirezaaraby on CodePen.
Found this awesome JavaScrip plug-in made by Matt Boldt and wanted to play around with it. Hope you like it.
A Pen by Alirezaaraby on CodePen.
<div class="container"> | |
<div style="text-align: center;"> | |
<div class="typed_wrap Font_Size_Section_1" style="text-align: center; margin-top: 134px"> | |
<h1>MATH<span class="typed"></span></h1> | |
</div> | |
</div> | |
</div> | |
$(function(){ | |
$(".typed").typed({ | |
strings: ["EMATICA", "EMATICAL"," SYMBOL","MATYC","MATYCA","MATYCHO"], | |
// 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: 1, | |
// 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() {} | |
}); | |
}); |
<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> |
body { | |
background-size: cover; | |
display: grid; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
} | |
.container { | |
width: 30rem; | |
height: 20rem; | |
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); | |
border-radius: 5px; | |
backdrop-filter: blur(5px); | |
} | |
h1 span{ | |
background: linear-gradient(to right, #ff5e62, #ff9966); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
h1{ | |
-webkit-text-fill-color: #ff5e62; | |
} | |
/*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; } | |
} | |
@media screen and (max-width: 992px) { | |
.Font_Size_Section_1{ | |
font-size: large; | |
} | |
} | |
@media screen and (max-width: 600px) { | |
.Font_Size_Section_1{ | |
font-size: 100%; | |
} | |
} | |
.Font_Size_Section_1{ | |
font-size: 20px; | |
} |