After recently downloading a text rotator plugin, I've run into a small issue. Whenever the text changes, the entire heading shifts because it's centered.
Here's a simple example: (Don't worry about the js code, it's just a basic representation of the plugin)
HTML
<h1>
Heading <span class="change">Change</span>
</h1>
CSS
h1 {
text-align: center;
}
JS
var itr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var interval = 1000; //one second
itr.forEach((itr, index) => {
setTimeout(() => {
$('.change').text('Car');
setTimeout(() => {
$('.change').text('Boat');
setTimeout(() => {
$('.change').text('Helicopter');
}, index * interval
);
}, index * interval
);
}, index * interval
);
})
Give it a try here: https://jsfiddle.net/teku3a0w/1/
Is there a way to prevent the heading from shifting when the text changes?
A fixed margin could be a solution, but I prefer a responsive approach.