Skip to content

Commit

Permalink
added changing 1's and 0's screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@B-Eddie
B-Eddie committed Jul 27, 2024
1 parent 28f8e8f commit 50e0bdb
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 23 deletions.
Binary file added src/.DS_Store
View file
Binary file not shown.
Binary file added src/assets/.DS_Store
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ <h3>A&nbsp;</h3>
</div>
</div>
</div>
<p class="absolute text-greene text-onesixrem mt-24" id="onezero">10101011101010010011101000101010110010101011<br>10101001001110100010101011001010101110101001<br>10101011101010010011101000101010110010101011<br>10101001001110100010101011001010101110101001<br>10101011101010010011101000101010110010101011<br>10101001001110100010101011001010101110101001<br>10101011101010010011101000101010110010101011<br>10101001001110100010101011001010101110101001<br>10101011101010010011101000101010110010101011<br>10101001001110100010101011001010101110101001<br>10101001001110100010101011001010101110101001<br></p>
<p class="flex flex-col absolute text-dark-greene font-bold text-onesixrem mt-10" id="onezero"></p>
</section>

</body>
Expand Down
35 changes: 18 additions & 17 deletions src/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,10 @@ video {
position: absolute;
}

.relative {
position: relative;
}

.mx-96 {
margin-left: 24rem;
margin-right: 24rem;
Expand All @@ -580,6 +584,10 @@ video {
margin-right: auto;
}

.mt-10 {
margin-top: 2.5rem;
}

.mt-12 {
margin-top: 3rem;
}
Expand All @@ -604,14 +612,6 @@ video {
margin-top: 1.5rem;
}

.mt-28 {
margin-top: 7rem;
}

.mt-24 {
margin-top: 6rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -656,10 +656,6 @@ video {
width: 20rem;
}

.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes move {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
Expand Down Expand Up @@ -741,11 +737,6 @@ video {
font-family: courier new, monospace;
}

.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
Expand All @@ -768,6 +759,11 @@ video {
font-weight: 600;
}

.text-dark-greene {
--tw-text-opacity: 1;
color: rgb(35 81 35 / var(--tw-text-opacity));
}

.text-greene {
--tw-text-opacity: 1;
color: rgb(0 255 0 / var(--tw-text-opacity));
Expand All @@ -778,6 +774,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
.md\:gap-24 {
gap: 6rem;
Expand Down
91 changes: 86 additions & 5 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ timeline.add({
}).add({
// ones and zeros fade in
targets: '#onezero',
// offset: -500,
opacity: 1,
duration: 300,
});
Expand Down Expand Up @@ -109,9 +108,88 @@ function stopTypingEffect() {
document.getElementById('word').innerHTML = '';
}

// Call stopTypingEffect() to stop the typing animation
// stopTypingEffect();
const screenWidthDivide = 30;
const screenHeightDivide = 52;

function changeText() {
const parent = document.getElementById('onezero');

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
console.log(screenWidth, screenHeight);
console.log("HI");
const textArray = [];
// Remove all existing children
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}

for (let i = 1; i <= Math.ceil(screenHeight / screenHeightDivide); i++) {
const span = document.createElement('span');
span.id = `span${i}`;
parent.appendChild(span);
textArray.push(span);
}

for (let i = 0; i < textArray.length; i++) {
while (textArray[i].firstChild) {
textArray[i].removeChild(textArray[i].firstChild);
}
for (let j=0; j <= Math.ceil(screenWidth / screenWidthDivide); j++) {
textArray[i].appendChild(document.createElement('span')).innerHTML = Math.random() > 0.5 ? 1 : 0;
}
}
}

let textChange = 0
function changeShowText() {
const parent = document.getElementById('onezero');

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
console.log(screenWidth, screenHeight);
const textArray = [];
// Remove all existing children
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}

for (let i = 1; i <= Math.ceil(screenHeight / screenHeightDivide); i++) {
const span = document.createElement('span');
span.id = `span${i}`;
parent.appendChild(span);
textArray.push(span);
}

for (let i = 0; i < textArray.length; i++) {
while (textArray[i].firstChild) {
textArray[i].removeChild(textArray[i].firstChild);
}
for (let j=0; j <= Math.ceil(screenWidth / screenWidthDivide); j++) {
const newSpan = document.createElement('span');
newSpan.innerHTML = Math.random() > 0.5 ? 1 : 0;
if (i === 1 && j === Math.floor(screenWidth / (3 * screenWidthDivide))) {
const specificSpan = document.createElement('span');
specificSpan.classList.add('text-greene');
specificSpan.innerHTML = 'About Me';
textArray[i].appendChild(specificSpan);
}
if (i === 2 && j === Math.floor(screenWidth / (3 * screenWidthDivide))) {
const specificSpan = document.createElement('span');
specificSpan.classList.add('text-greene');
specificSpan.innerHTML = 'This is a paragraph.';
textArray[i].appendChild(specificSpan);
}
if (i === 3 && j === Math.floor(screenWidth / (3 * screenWidthDivide))) {
const specificSpan = document.createElement('span');
specificSpan.classList.add('text-greene');
specificSpan.innerHTML = 'Another string.';
textArray[i].appendChild(specificSpan);
}
textArray[i].appendChild(newSpan);
}
}
}

// Function to handle mouse wheel events
const handleWheel = (event) => {
Expand All @@ -130,7 +208,7 @@ const handleWheel = (event) => {
document.documentElement.dataset.scrollValue = currentScrollValue;

// Calculate the scroll percentage
const total = 200;
const total = 300;
const scrollPercentage = total * (((currentScrollValue / maxScrollValue)));

const loading = document.getElementById('loading');
Expand Down Expand Up @@ -158,10 +236,13 @@ const handleWheel = (event) => {
// onezero.classList.add('hidden');
// onezero.classList.remove('block');
typingEffect();
} else if (scrollPercentage >= 120 && scrollPercentage < 200) {
} else if (scrollPercentage >= 120 && scrollPercentage < 160) {
// onezero.classList.remove('hidden');
// onezero.classList.add('block');
changeText();
stopTypingEffect();
} else if (scrollPercentage >= 160 && scrollPercentage < 250) {
changeShowText();
}

timeline.seek((scrollPercentage / 100) * timeline.duration);
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
'dark-gray': '#494949',
'light-graye': '#D9D9D9',
'greene': '#00FF00',
'dark-greene': "#235123",
},
fontFamily: {
'courier': 'courier new, monospace',
Expand Down

0 comments on commit 50e0bdb

Please sign in to comment.