Opening with auto typing responsive sentences with random background color loop

Developer
Robert Borghesi
Size
5,435 Kb
Views
32,384
  1. Opening with auto typing responsive sentences with random background color loop Previews
  2. Opening with auto typing responsive sentences with random background color loop HTML Codes
  3. Opening with auto typing responsive sentences with random background color loop CSS Codes
  4. Opening with auto typing responsive sentences with random background color loop JS Codes

How do I make an opening with auto typing responsive sentences with random background color loop?

A Js function that simulate typing sentences, with a continuous random background color loop, and it's responsive!. What is a opening with auto typing responsive sentences with random background color loop? How do you make a opening with auto typing responsive sentences with random background color loop? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Opening with auto typing responsive sentences with random background color loop Previews
IQ Test

Opening with auto typing responsive sentences with random background color loop - Script Codes HTML Codes

<!DOCTYPE html>
<html class="noTransition">
<head> <meta charset="UTF-8"> <title>Opening with auto typing responsive sentences with random background color loop</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--PLEASE WATCH THIS PEN FULLSCREEN for better experience-->
<main>	<div class="container">	<div class="textContainer">	<div class="jstext"></div>	</div>	<div class="original"><a href="http://www.valentinoborghesi.is" target="_BLANK">Watch this entire project here</a></div>	</div> <!--CLOSE CONTAINER -->	</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Opening with auto typing responsive sentences with random background color loop - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:700,400);
body, html { height: 100%; color: white; font-family: 'Raleway', sans-serif; -webkit-transition: background 20s linear; -moz-transition: background 20s linear; -ms-transition: background 20s linear; -o-transition: background 20s linear; transition: background 20s linear;
}
.noTransition body { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
.noTransition .loopCol { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
.noTransition .fixedBg { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
* { box-sizing: border-box;
}
a { text-decoration: none; color: white;
}
.container { max-width: 90%; z-index: 1; margin: 0 auto; padding-bottom: 50px;
}
.textContainer { position: relative; text-align: left; font-size: 8vw; font-family: 'Raleway', sans-serif; font-weight: 700; color: #fff; letter-spacing: -0.15vw; line-height: 1.05; min-height: 88vh;
}
.jstext { width: 100%; padding-top: 12vh; padding-right: 50px;
}
.jstext:after { content: "_"; animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -webkit-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -moz-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -o-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; position: absolute; -webkit-transform: translate(10%, -10%); -moz-transform: translate(10%, -10%); -ms-transform: translate(10%, -10%); transform: translate(10%, -10%); overflow: hidden; width: 0px;
}
.text { color: #46200A;
}
.original { opacity: 0; font-weight: 400; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px);
}
.original:hover { -webkit-filter: blur(0px); -moz-filter: blur(0); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px);
}
.onScreen { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%);
}
#brName { display: none;
}
@keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-webkit-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-moz-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-o-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-o-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
/* ------------------------------- MEDIA QUERIES
----------------------------------*/
@media all and (max-width: 1024px) { .textContainer { min-height: 75vh; }
}
@media all and (max-width: 768px) { #brName { display: block; } .textContainer { min-height: 80vh; font-size: 11.2vw; letter-spacing: -.45vw; } .jstext { padding-right: 0px; }
}
@media all and (max-width: 468px) { .textContainer { min-height: 80vh; font-size: 11.4vw; letter-spacing: -.45vw; } .jstext { padding-right: 0px; }
}

Opening with auto typing responsive sentences with random background color loop - Script Codes JS Codes

/* ----------------------- GLOBALS
-------------------------*/
var sections = [	{	sentence: " is probably writing code right now"	},	{	sentence: " loves pureCss stuff"	},	{	sentence: " is learning vanilla js"	},	{	sentence: " wants hearts on codepen"	},	{	sentence: " is coding listening Acrania, bree bree!"	},	{	sentence: " it's still a n00b"	},	{	sentence: " is changing the color of the background"	},	{	sentence: " who?"	},	{	sentence: " needs new project to working on"	},	{	sentence: " is probably in the gym working hard"	},	{	sentence: " thanks you if u are still here"	},	{	sentence: " is also on Twitter, so follow him!"	},	{	sentence: " hates designers that change letter-spacing"	},	{	sentence: " can't live without SCSS"	},	{	sentence: " will learn the basis of Angular soon"	},	{	sentence: " will go to Helsinki to party hard with his bff soon"	},	{	sentence: " is headbanging"	}	];
var i = 0;
var j = 0;
var k = 0;
var lengthSentence = 0;
var lengthArray = sections.length;
var forward = true;
var beginning = "Robert <br>Borghesi";
var currentPart = "";
var interval = 50; // interval letter
var opening = false;
var pauseEnd = 2500; // pause end sentence
/* ----------------------- TYPING
-------------------------*/
function writing(text){	lengthSentence = sections[i].sentence.length;	var body = $("body");	if(!opening){ // first part	setTimeout(function(){	if(k < beginning.length){	if(beginning[k] === "<"){	currentPart += ' <br id="brName">';	k=k+4;	}	currentPart += beginning[k];	text.html(currentPart);	k++;	writing(text);	}else if(k === (beginning.length)){	currentPart += " <br>";	text.html(currentPart);	opening = true;	writing(text);	}	},interval);	}else if(opening){ // sentences	setTimeout(function(){	interval = 50;	if(j === lengthSentence){	forward = false;	}	if(j === lengthSentence-2){	$(".original").one().addClass("onScreen");	}	if( j === lengthSentence-1 && forward){	interval = pauseEnd;	}	if(j < lengthSentence && forward ){	if(sections[i].sentence[j] === "&"){	currentPart += "<strong>";	}else if(sections[i].sentence[j] === "%"){	currentPart += "</strong>";	}	else{	currentPart += sections[i].sentence[j];	}	text.html(currentPart);	j++;	}else if(j > 0 && !forward){	if(sections[i].sentence[j] === "&"){	currentPart = currentPart.slice(0, - 8);	}else if(sections[i].sentence[j] === "%"){	currentPart = currentPart.slice(0, - 9);	}	else{	currentPart = currentPart.slice(0, - 1);	}	text.html(currentPart);	j--;	}else if(j === 0){	forward = true;	i++;	}	if(i === lengthArray){	i = 0;	}	writing(text);	}, interval);	}
}
/* ----------------------- BACKGROUND LOOP
-------------------------*/
function rand(min, max) { return min + Math.random() * (max - min);
}
function changebackground(){	var body = $("body"); var h = rand(1, 360); var s = rand(80, 90); var l = rand(50, 60); body.css({ // looping background	"background" : "hsl(" + h + "," + s + "%,"+ l + "%)" });
}
/* ----------------------- NOOB SHIT
-------------------------*/
$(document).ready(function(){	/*--------------------	BACKGROUND STUFF	----------------------*/	changebackground();	setTimeout(function(){	$("html").removeClass("noTransition");	$("fixedBg").removeClass("noTransition");	changebackground();	}, 2000)	setInterval(function(){	changebackground();	}, 20000);	/*--------------------	TYPING	----------------------*/	var firstTimer = 8000;	var text = $(".jstext");	setTimeout(function(){	writing(text);	}, firstTimer);
});
Opening with auto typing responsive sentences with random background color loop - Script Codes
Opening with auto typing responsive sentences with random background color loop - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4
Size 5,435 Kb
Views 32,384
Do you need developer help for Opening with auto typing responsive sentences with random background color loop?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Borghesi (dghez) Script Codes
Name
Gradient border on hover - Scorer of fifa world cup
Fullscreen slice hero slider
Css Rotating 3d cubes different speed
Opening animation from circular avatar
Best 3 players on fifa 14 - HOVER THEM
Sorting with morphing content
Enel brand - logo animation with tweenmax
SlamDunk Parallax on MouseMove
Pulse Avatar on click with TweenMax
Continuous scrolling background of sticky header
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!