An example of what I want (the main text eg. subscribe): https://sounddrout.com/
My code basically has a repeating typewriter effect on it and it just goes from right to left. Although I want it to do so but in a centered fashion (Check the website linked as an example). I want it to come out from the middle so its equal on both sides and expands out. Think like the center thing in google docs.
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Text*/
.font {
font-family: 'Source Sans Pro', monospace;
}
.mid {
text-align: center;
}
.txtsize {
font-size: 40px;
}
h1 {
width: max-content;
position: relative;
font-size: 40px;
display: grid;
}
.textbody {
margin: 120px;
font-family: "Source Sans Pro", sans-serif;
display: grid;
place-content: center;
text-align: center;
background: var(--bg-color);
font: 200;
}
/*typwriter*/
:root {
--bg-color: hsl;
--typewriterSpeed: 5s;
--blinkLength: 650ms;
--typewriterCharacters: 20;
}
/* Type Writer Effect */
h1::before,
h1::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
h1::before {
background: white;
animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}
h1::after {
width: 0.1em;
background: black;
animation: typewriter var(--typewriterSpeed) steps(20) infinite;
}
#keyframes typewriter {
from {
left: 0%;
}
45% {
left: 100%;
}
65% {
left: 100%;
}
85% {
left: 0%;
}
to {
left: 0%;
}
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<body>
<div class="textbody">
<h1>
Subscribe To FuryRex09
</h1>
</div>
</body>
Any ideas?
Sorry if I wasn't very clear I had a lot of trouble explaining my issue.
P.S here's a Codepen - https://codepen.io/furyrex09/pen/bGaybOe (;
if you can use JavaScript . this we be lot easier to do .
$("#typed").typed({
strings: ["This is first.", "This is second.", "Add any text you like here."],
typeSpeed: 100,
startDelay: 0,
backSpeed: 60,
backDelay: 2000,
loop: true,
cursorChar: "|",
contentType: 'html'
});
#import url('https://fonts.googleapis.com/css?family=Work+Sans');
html, body {
height: 100vh;
font-family: 'Work Sans', sans-serif;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
margin: 0;
}
.type-wrap {
font-size: 50px;
padding: 20px;
}
/* the above is for styling puposes only */
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<div class="type-wrap">
<span id="typed" style="white-space:pre;" class="typed">
</span>
</div>
Here's my solution to this:
// TYPEWRITER //
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["YouTuber", "Writer", "Designer", "Creator", "Programmer", "Gamer"]
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if(charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if(charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay)
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 800);
}
}
document.addEventListener("DOMContentLoaded", function() {
if(textArray.length) setTimeout(type, newTextDelay + 250);
});
/* Text */
h1 {
position: relative;
font-size: 40px;
}
.textbody {
margin-top: 100px;
font-family: "Source Sans Pro", sans-serif;
font-weight: bold;
background: var(--bg-color);
font: 200;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.typed-text {
font-weight: normal;
color: #dd7732;
}
/* Root */
:root {
--bg-color: hsl;
--typewriterSpeed: 5s;
--blinkLength: 825ms;
--typewriterCharacters: 20;
}
/* Type Writer Effect */
.cursor {
display: inline-block;
width: 3px;
background-color: #ccc;
margin-left: 0.1rem;
animation: blink 1s infinite;
}
.cursor.typing {
animation: none;
}
#keyframes blink {
0% {background-color: #ccc;}
49% {background-color: #ccc; }
50% {background-color: transparent; }
99% {background-color: transparent; }
100% {background-color: #ccc; }
}
<body>
<div class="textbody">
<h1>
I am a <span class="typed-text"></span><span class="cursor typing"> </span>
</h1>
</div>
<script src="main.js"></script>
</body>
Related
After each typing text animation, the next text is slightly moved to the right. How do I make sure that the text keeps aligned left? "text-align: left" and "margin-left:0" do not work. When I include "margin-right: 100%" it keeps aligned left, but each text comes on a new line, which is not what I want.
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>
You could apply a flex-box style to the parent container ( the h2#subtitle ) and align the contents to the start of the flex-box
.text_1 {
animation: text1;
max-width: 12.5em;
padding-bottom: 0.1em;
}
.text_2 {
animation: text2;
max-width: 9.1em;
padding-bottom: 0.1em;
}
.text_3 {
animation: text3;
max-width: 5.3;
padding-bottom: 0.1em;
}
.text_4 {
animation: text4;
max-width: 15;
padding-bottom: 0.1em;
}
.text_5 {
animation: text5;
max-width: 15.2;
padding-bottom: 0.1em;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(25, end);
animation-iteration-count: infinite;
}
.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
/* flexbox on parent */
h2#subtitle{
display:flex;
flex-direction:row;
align-items:flex-start;
}
#keyframes text5 {
0%,
80%,
100% {
width: 0;
}
85%,
95% {
width: 15.2em;
}
}
#keyframes text4 {
0%,
60%,
80%,
100% {
width: 0;
}
65%,
75% {
width: 15em;
}
}
#keyframes text3 {
0%,
40%,
60%,
100% {
width: 0;
}
45%,
55% {
width: 5.3em;
}
}
#keyframes text2 {
0%,
20%,
40%,
100% {
width: 0;
}
25%,
35% {
width: 9.1em;
}
}
#keyframes text1 {
0%,
20%,
100% {
width: 0;
}
5%,
15% {
width: 12.5em;
}
}
#keyframes caret {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
h1 {
font-family: Segoe UI Black;
}
h2 {
font-family: Segoe UI Black;
}
h3 {
font-family: Segoe UI Black;
}
h4 {
font-family: Segoe UI Black;
}
h5 {
font-family: Segoe UI Black;
}
h6 {
font-family: Segoe UI Black;
}
.container-text {
padding-top: 5em;
padding-left: 5em;
padding-bottom: 30em;
margin-top: 3;
}
.container-fluid {
margin-top: 5em;
}
#title {
font-size: 3em;
}
#subtitle {
font-size: 2.5em;
font-family: Segoe UI Light;
margin-bottom: 1em;
background: red;
}
#subsubtitle {
font-size: 1.5em;
font-family: Segoe UI Light;
color: #BFBFBF;
margin-bottom: 1em;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 container-text">
<h1 id="title">Title</h1>
<h2 id="subtitle">
<span class="text_1">Tailor your marketing strategy</span>
<span class="text_2">Gauge public opinion</span>
<span class="text_3">Study trends</span>
<span class="text_4">Explore variables like demographics</span>
<span class="text_5">Monitor sentiment related to a topic</span>
</h2>
</div>
</div>
</div>
I have a typing effect that I like, I want to use it for all my page titles, but the problem is it works by specifying a width. This would be fine for a homepage with a slogan, but if I ever decide to change it all of my width values would need to change too. Is there any way this can still function the same without being based on a width?
The example is what I'm using on my homepage, it's a slogan. But my title's would be single line text like: About, Contact, Support, News, etc.
My code looks like:
<div id="head">
<div class="wrap">
<div>
<p>We Create</p>
<p>Software for</p>
<p>People!!</p>
</div>
</div>
</div>
My CSS looks like:
#head {
background: #000;
height: 700px;
overflow: hidden;
position: relative;
}
#head .wrap {
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
width: 100%;
}
#head .wrap div {
align-items: center;
display: flex;
flex-direction: column;
letter-spacing: 2px;
height: 100%;
position: relative;
width: 100%;
}
#head .wrap div p {
border-right: 5px solid #b5cfd7;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
margin-left: 10px;
overflow: hidden;
text-transform: uppercase;
white-space: nowrap;
}
#head .wrap div p:nth-child(1) {
animation: type 2s steps(20, end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
width: 575px;
}
#head .wrap div p:nth-child(2) {
animation: type2 2s steps(20, end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 775px;
}
#head .wrap div p:nth-child(3) {
animation: type3 2s steps(20, end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 475px;
}
/* Animation */
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
}
}
/* Animation */
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
opacity: 1;
}
}
/* Animation */
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/* Animation */
#keyframes blink {
50% {
border-color: transparent;
}
}
Live Example: https://codepen.io/joshrodgers/pen/BaxxQzo
Any help is appreciated!
Thanks,
Josh
Ok...
So, I found a solution...it uses some JS, but that's the only way I could get it to work!
Here's how my code looks now:
<div id="head">
<div class="wrap">
<div class="row">
<div class="text">
<p>We create</p>
<p>Software for</p>
<p>People!!</p>
</div>
<div class="title"></div>
</div>
</div>
The CSS:
#head {
background: #000;
overflow: hidden;
position: relative;
}
#head .wrap {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
text-align: center;
width: 100%;
}
#head .row {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
#head .text {
display: none;
}
#head .title {
position: relative;
z-index: 1;
}
#head .title span {
color: #fff;
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
letter-spacing: 2px;
height: 90px;
min-width: 5px;
text-transform: uppercase;
}
#head .cursor:after {
animation: blink 1s linear infinite alternate;
background: #b5cfd7;
content: "";
display: inline-block;
height: 75%;
margin-left: 30px;
opacity: 0;
width: 5px;
}
/* Animation */
#keyframes blink {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
The JS:
var sentences = [];
var currentText;
$(document).ready(function(){
$('.text p').each(function(){
var text = $(this).text();
text += " ";
sentences.push(text);
});
currentText = sentences.shift();
typeWord(currentText);
});
jQuery.fn.extend({
appendChars: function(char){
$(this).text(char);
}
});
function spliter(string){
return string.trim().split("");
}
function appendTextLine(){
return $('<span class=""></span>').appendTo('.title');
}
function typeWord(text){
if (!text){
return;
}
var charArray = [];
for (i = 0; i < text.length; i++){
var char = text.slice(0,i);
charArray.push(char);
}
var textLine = appendTextLine();
$('.cursor').removeClass('cursor');
textLine.addClass('cursor');
var interval = setInterval(function(){
firstChar = charArray.shift();
$(textLine).appendChars(firstChar);
if (charArray.length === 0){
currentText = sentences.shift();
typeWord(currentText);
clearInterval(interval);
}
},100);
}
I have a pen here: https://codepen.io/joshrodgers/pen/yLjjzYb
Single line text version here: https://codepen.io/joshrodgers/pen/RwyJroQ
There were two problems with my initial code, it wouldn't work with dynamic text, which this solves because it's not based on a width and two the text was not centered in the window, which I didn't realize when I create this post, but the solution also solves that issue as well.
Hope this helps someone!
Thanks,
Josh
I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}
You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
I need do the next animation of text:
People dissapears like a flip effect David Walsh Flip Card Effect, and the effect faces every 2 seconds and it will be repeating, contents the text: "Robots", "Animals", "Things" for example, with the flip animation.
Any idea?
One example of flip cards is the next: Stackoverflow How to flip multiple divs using CSS?
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
.divi {
line-height: normal;
color: black;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
.div1 { /* For increasing performance ID/Class should've been used. For a small demo it's okaish for now */
animation: showup 7s forwards;
font-family:'Roboto';
font-weight:300;
font-size:28px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
}
.div2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
width: 0px;
animation: reveal 7s forwards;
animation-iteration-count: 1;
display: inline-block;
white-space: nowrap;
}
.div2 span {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
overflow: hidden;
margin-left: -355px;
animation: slidein 7s forwards;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: auto;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
width: auto;
}
}
<div class="divi" align="center">
<div class="div1">Hello</div>
<div class="div2">
<span>People</span>
</div>
<div class="div3">
<span>Robots</span>
</div>
<div class="div4">
<span>Animals</span>
</div>
<div class="div5">
<span>Things</span>
</div>
</div>
There is h1 tag in the body which has Some Text Hello Some Text.
But while executing the word Hello is missed. Why?.
On view-source: it shows that there is a word written.
How to solve that?
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 30s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
position: absolute;
-webkit-animation:colorchange 20s infinite alternate;
}
#-webkit-keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>
There is h1 tag in the body which has Some Text Hello Some Text.
But while executing the word Hello is missed. Why?.
On view-source: it shows that there is a word written.
How to solve that?
The Tidy Js fiddle
First you have to correct your markup as you have obsolete tags and don't use absolute position. Then simply put back the text-fill to initial.
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
text-align:center;
font-weight:bold;
color: #f35626;
background-image:linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: hue 30s infinite linear;
}
#keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color: #313131;
font-size: 45px;
font-weight: bold;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
animation: colorchange 20s infinite alternate;
}
#keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<div class="container">
<h2 class="clr">नमस्ते</h2>
<h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1>
</div>
Simply remove position absolute of .awesome
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: red*/
}
.clr {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 30s infinite linear;
}
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
-webkit-animation:colorchange 20s infinite alternate;
}
#-webkit-keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
<!DOCTYPE html>
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class=""><div class="container"><br /><br /><center><b><h2 class="clr">नमस्ते</h2><br /><h1 class="clr">Some Text <span class="awesome">HELLO</span> Some Text</h1></b></center></div></body></html>
You have position:absolute; on your .awesome. If this is removed, you will see the text.
.awesome {
font-family: futura;
font-style: italic;
color:#313131;
font-size:45px;
font-weight: bold;
-webkit-animation:colorchange 20s infinite alternate;
}
Replace this In this I removed Position:absolute;