moving-letters
moving-letters copied to clipboard
Published
20 hours ago •
tobiasahlin
tobiasahlin
unable to change text size
Thanks for this great feature. i m unable to change the font size of the text. Even though i have added all the css and header tag but still size remains the same. Following is the way how i m doing it:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>var ml = { timelines: {}};</script>
<style>.moving-letters {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 550px;
}</style>
</head>
<body>
<div class="page" id="p1">
<li class="icon fa fa-home "><span class="title">Welcome To</span>
<div class="moving-letters">
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span id = "demo" class="letters">Example</span>
<span class="line line2"></span>
</span>
</h1>
</div></li>
</div>
<script>
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
ml.timelines["ml1"] = anime.timeline({loop: true})
.add({
targets: '.ml1 .letter',
scale: [0.3,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: function(el, i) {
return 70 * (i+1)
}
}).add({
targets: '.ml1 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: function(el, i, l) {
return 80 * (l - i);
}
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<style>
.ml1 {
font-weight: 900!important;
font-size: 3.5em!important;
}
.ml1 .letter {
display: inline-block;
line-height: 1em;
}
.ml1 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml1 .line {
opacity: 0;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: #fff;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
</style>
</body>
And here is the out put:
