<!DOCTYPE html>
<html>
<style >
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@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; }
}
</style>
<head>
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="typed.js"></script>
</head>
<body>
<div class = element>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0,
loop: true,
cursorChar: "$",
});
});
</script>
</div>
</body>
</html>
When I run the page, the cursor skips to the next line and the words come up infinitly. I would like the cursor to stick with the words, going back and forth. A demo on the creators home page shows how I would like the cursor to be (http://www.mattboldt.com/demos/typed-js/). I'm not sure what I'm missing, I'm guessing its small though
You are missing quotes around the element class. Try this instead:
change
to
EDIT
Actually, you should be using a
<span>element, not a<div>.