Skip to content

Commit

Permalink
typeWriterFinished
Browse files Browse the repository at this point in the history
  • Loading branch information
@Firisy
Firisy committed Jul 3, 2024
1 parent 36554c1 commit 44ccea4
Show file tree
Hide file tree
Showing 4 changed files with 236 additions and 106 deletions.
73 changes: 66 additions & 7 deletions docs/stylesheets/singlePageTemplate.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
/* Hero Section */
.hero {
font-family: "Source Sans Pro", sans-serif;
background-color: #CBE3F7;
padding-top: 150px;
padding-bottom: 150px;
text-align: center;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 500px;
width: 100%;
}

.hero_header {
text-align: center;
color: #6A33E6;
letter-spacing: 4px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
font-size: 2rem;
/* Default font size */
}

.pink {
color: #3693CD;
.blue {
color: #0B7AEF;
}

.light {
Expand All @@ -21,17 +36,61 @@
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.3rem;
/* Default font size */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
.hero_header {
font-size: 1.8rem;
}

.tagline {
font-size: 1.25rem;
}
}

@media (max-width: 768px) {
.hero_header {
font-size: 1.55rem;
}

.tagline {
font-size: 1rem;
}
}

@media (max-width: 480px) {
.hero_header {
font-size: 1.3rem;
/* Adjust width for smaller screens */
}

.tagline {
font-size: 0.675rem;
}
}


.typewriter {
display: inline-block;
overflow: hidden;
border-right: solid black; /* Cursor effect */
border-right: solid black;
/* Cursor effect */
animation: blink-caret 0.75s step-end infinite;
word-wrap: break-word; /* Ensure words break and wrap correctly */
word-wrap: break-word;
/* Ensure words break and wrap correctly */
}

@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: black; }

from,
to {
border-color: transparent;
}

50% {
border-color: black;
}
}
98 changes: 52 additions & 46 deletions material/overrides/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,57 +33,63 @@
}
}
</style>
<section class="mdx-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">
<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
<section class="hero" id="hero">
<h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
</h2>
<br>
<p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
class="blue">Us</span></p>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
function typeWriter(element, text, speed, callback) {
let i = 0;
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i); // Replace newline with <br> for line breaks
i++;
setTimeout(type, speed);
} else {

if (callback) callback();
}
}
type();
}
<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
<section class="hero" id="hero">
<h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
</h2>
<br>
<p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span class="blue">Us</span></p>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
function typeWriter(element, text, speed, callback) {
let i = 0;
let isTag = false;
let temp = '';

function type() {
if (i < text.length) {
let char = text.charAt(i);
temp += char;

const headerElement = document.querySelector('.hero_header');
const taglineElement = document.querySelector('.tagline');
if (char === '<') {
isTag = true;
} else if (char === '>') {
isTag = false;
element.innerHTML = temp; // Only update innerHTML when the tag is complete
} else if (!isTag) {
element.innerHTML = temp;
}
i++;
if (!isTag) setTimeout(type, speed);
else type();
} else {
if (callback) callback();
}
}
type();
}

const headerText = 'JY-HF Learning Site___';
const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
const taglineText = 'Share the knowledge to you and Us';
const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
const headerElement = document.querySelector('.hero_header');
const taglineElement = document.querySelector('.tagline');

headerElement.textContent = '';
taglineElement.textContent = '';
const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';

typeWriter(headerElement, headerText, 150, () => {
headerElement.innerHTML = headerHTML;
headerElement.setAttribute("class","hero_header");
console.log('Typing complete, pausing cursor animation for', headerElement); // Debug output
typeWriter(taglineElement, taglineText, 150, () => {
taglineElement.innerHTML = taglineHTML;
headerElement.textContent = '';
taglineElement.textContent = '';

});
});
});
typeWriter(headerElement, headerHTML, 150, () => {
headerElement.classList.remove('typewriter');
console.log('Typing complete, pausing cursor animation for', headerElement);
typeWriter(taglineElement, taglineHTML, 150);
});
});
</script>
<section class="mdx-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">

</script>
<div class="mdx-hero__content">
<h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
coding space of JY-HF!</h1>
Expand All @@ -108,4 +114,4 @@ <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;fo
{% endblock %}
{% block footer %}
{{ super() }}
{% endblock %}
{% endblock %}
96 changes: 51 additions & 45 deletions site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,57 +337,63 @@
}
}
</style>
<section class="mdx-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">
<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
<section class="hero" id="hero">
<h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
</h2>
<br>
<p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
class="blue">Us</span></p>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
function typeWriter(element, text, speed, callback) {
let i = 0;
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i).replace('\n', '<br>'); // Replace newline with <br> for line breaks
i++;
setTimeout(type, speed);
} else {
console.log('Typing complete, pausing cursor animation for', element); // Debug output
if (callback) callback();
}
}
type();
<link href="stylesheets/singlePageTemplate.css" rel="stylesheet" type="text/css">
<section class="hero" id="hero">
<h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="light">Learning Site___</span>
</h2>
<br>
<p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span class="blue">Us</span></p>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
function typeWriter(element, text, speed, callback) {
let i = 0;
let isTag = false;
let temp = '';

function type() {
if (i < text.length) {
let char = text.charAt(i);
temp += char;

if (char === '<') {
isTag = true;
} else if (char === '>') {
isTag = false;
element.innerHTML = temp; // Only update innerHTML when the tag is complete
} else if (!isTag) {
element.innerHTML = temp;
}
i++;
if (!isTag) setTimeout(type, speed);
else type();
} else {
if (callback) callback();
}
}
type();
}

const headerElement = document.querySelector('.hero_header');
const taglineElement = document.querySelector('.tagline');

const headerText = 'JY-HF Learning Site___';
const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
const taglineText = 'Share the knowledge to you and Us';
const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
const headerElement = document.querySelector('.hero_header');
const taglineElement = document.querySelector('.tagline');

headerElement.textContent = '';
taglineElement.textContent = '';
const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';

typeWriter(headerElement, headerText, 300, () => {
headerElement.innerHTML = headerHTML;
headerElement.style.animationPlayState = 'paused'; // Pause the cursor animation
headerElement.style.borderRightColor = 'transparent'; // Make the cursor transparent
typeWriter(taglineElement, taglineText, 300, () => {
taglineElement.innerHTML = taglineHTML;
headerElement.textContent = '';
taglineElement.textContent = '';

});
});
});
typeWriter(headerElement, headerHTML, 150, () => {
headerElement.classList.remove('typewriter');
console.log('Typing complete, pausing cursor animation for', headerElement);
typeWriter(taglineElement, taglineHTML, 150);
});
});
</script>
<section class="mdx-container">
<div class="md-grid md-typeset">
<div class="mdx-hero">

</script>
<div class="mdx-hero__content">
<h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
coding space of JY-HF!</h1>
Expand Down
Loading

0 comments on commit 44ccea4

Please sign in to comment.