Opening with auto typing responsive sentences with random background color loop
- Opening with auto typing responsive sentences with random background color loop Previews
- Opening with auto typing responsive sentences with random background color loop HTML Codes
- Opening with auto typing responsive sentences with random background color loop CSS Codes
- 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 - 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);
});
Developer | Robert Borghesi |
Username | dghez |
Uploaded | August 27, 2022 |
Rating | 4 |
Size | 5,435 Kb |
Views | 32,384 |
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!
Name | Size |
Anaglyph 3D with CSS-blend on mouseMove | 2,982 Kb |
Pure custom css animation on new google logo | 3,362 Kb |
SlamDunk Parallax on MouseMove | 2,512 Kb |
Simple PureCss dropdown menu with following subnav | 2,966 Kb |
Pure Css Loader - Square | 2,498 Kb |
Opening animation from circular avatar | 5,977 Kb |
Fullscreen slice hero slider | 9,370 Kb |
Best 3 players on fifa 14 - HOVER THEM | 3,546 Kb |
Animated title moving on scroll | 6,002 Kb |
Gradient border on hover - Scorer of fifa world cup | 3,598 Kb |
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!
Name | Username | Size |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Formations | Cantelope | 5,731 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Tab panels | Accessibility | 0 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!