Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Type text effect in slider.html

Last active March 15, 2019 13:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DevShahidul/c0727cd388acc546c70e3e3e2cdddc91 to your computer and use it in GitHub Desktop.
Save DevShahidul/c0727cd388acc546c70e3e3e2cdddc91 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Type text effect in slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.slick-rick .phrase {
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
color: black;
background: lightgray;
}
.dash-cursor{height: 3px; width: 20px; background-color: #000000; animation: flash 0.5s none infinite alternate !important; display: inline-block; margin-left: 5px;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slick-rick">
<div><dfn class="phrase" data-phrase="INFORMATION SECURITY">INFORMATION SECURITY</dfn><dfn class="dash-cursor"></dfn></div>
<div><dfn class="phrase" data-phrase="Rikitikitavi, bitch!">Rikitikitavi, bitch!</dfn><dfn class="dash-cursor"></dfn></div>
<div><dfn class="phrase" data-phrase="And that's the wayyyyyy the news goes!">And that's the wayyyyyy the news goes!</dfn><dfn class="dash-cursor"></dfn></div>
<div><dfn class="phrase" data-phrase="Uh ohhhh! Somersoult jump!">Uh ohhhh! Somersoult jump!</dfn><dfn class="dash-cursor"></dfn></div>
<div><dfn class="phrase" data-phrase="INFORMATION SECURITY">INFORMATION SECURITY</dfn><dfn class="dash-cursor"></dfn></div>
</div>
<script>
$('.slick-rick').slick({
arrows: false
}).on('afterChange', function(event, slick, currentSlide, nextSlide) {
// empty's html from all slides
$('.slick-slide .phrase', this).empty();
// counter
var i = 0;
// the text pulled from slide data attribute
var txt = $('.slick-current .phrase', this).data('phrase');
// typing speed
var speed = 50;
console.log(txt);
// the function to type the data phase out
function typeWriter() {
if (i < txt.length) {
$('.slick-current .phrase').html(function(idx, html) {
return html + txt.charAt(i)
});
i++;
setTimeout(typeWriter, speed);
}
}
// run the function
typeWriter();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment