<div id="shuffleblock" class="shuffleb">Lorem ipsum dolor</div>
<style>
.shuffleb{
font-size: 62px;
font-weight: 600;
font-family: 'Roboto',Arial,sans-serif;
color: #fff;
margin-left: 150px;
background-color: rgb(252, 180, 47);
padding: 0 20px;
border-radius: 30px;
position: fixed;
bottom: 15px;
z-index: 999;
}
@media screen and (max-width: 800px){
.shuffleb{
font-size: 40px;
bottom: 30px;
}
}
@media screen and (max-width: 500px){
.shuffleb{
font-size: 20px;
bottom: 42px;
margin-left: 100px;
padding: 0 10px;
}
}
</style>
<script>
function randomChar(type){
var pool = "";
if (type == "lowerLetter"){
pool = "abcdefghijklmnopqrstuvwxyz0123456789";
}
else if (type == "upperLetter"){
pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
}
else if (type == "symbol"){
pool = ",.?/\\(^)![]{}*&^%$#'\"";
}
var arr = pool.split('');
return arr[Math.floor(Math.random()*arr.length)];
}
$.fn.shuffleLetters = function(prop){
var options = $.extend({
"step" : 8, // How many times should the letters be changed
"fps" : 25, // Frames Per Second
"text" : "" // Use this text instead of the contents
},prop)
return this.each(function(){
var el = $(this),
str = "";
if(options.text) {
str = options.text.split(''); }
else {
str = el.text().split(''); }
var types = [],
letters = [];
for(var i=0;i<str.length;i++){
var ch = str[i];
if(ch == " "){
types[i] = "space";
continue; }
else if(/[a-z]/.test(ch)){
types[i] = "lowerLetter"; }
else if(/[A-Z]/.test(ch)){
types[i] = "upperLetter"; }
else {
types[i] = "symbol"; }
letters.push(i); }
el.html("");
(function shuffle(start){
var i,
len = letters.length,
strCopy = str.slice(0);
if(start>len){ return; }
for(i=Math.max(start,0); i < len; i++){
if( i < start+options.step){
strCopy[letters[i]] = randomChar(types[letters[i]]);
} else { strCopy[letters[i]] = ""; }
}
el.text(strCopy.join(""));
setTimeout(function(){ shuffle(start+1);},1000/options.fps);
})(-options.step);
});
};
</script>
<script>
$(document).ready(function(){
var shuffleblock = $("#shuffleblock");
var $element1 = $('a[name="anchor1"]');
var $element2 = $('a[name="anchor2"]');
var $element3 = $('a[name="anchor3"]');
var line1=true;
var line2=false;
var line3=false;
var line4=false;
function checkscR(){
var scroll = $(window).scrollTop() + $(window).height();
if (scroll < $element1.offset().top) {
if (!line1) {shuffleblock.shuffleLetters({"text": "Lorem ipsum dolor"});line1=true;};
}else{line1=false};
if ( scroll > $element1.offset().top && scroll < $element2.offset().top) {
if (!line2) {shuffleblock.shuffleLetters({"text": "Cum sociis natoque"});line2=true;};
}else{line2=false};
if ( scroll > $element2.offset().top && scroll < $element3.offset().top) {
if (!line3) {shuffleblock.shuffleLetters({"text": "Donec pede justo"});line3=true;};
}else{line3=false};
if ( scroll > $element3.offset().top) {
if (!line4) {shuffleblock.shuffleLetters({"text": "Aliquam lorem ante"});line4=true;};
}else{line4=false};
};
checkscR();
$(window).scroll(function() {checkscR()});
});
</script>