nathanwoodburn/Nathanwoodburn.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Updated navbar title animation

Browse Source
This commit is contained in:
Nathan Woodburn 2023-02-20 11:10:02 +11:00
parent cffb1d0d00
commit 9b39f7478a
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
2 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
assets/js/hacker.js
View File

@ -4,34 +4,37 @@ let interval = null;
let interval2 = null; let interval2 = null;
let interval3 = null; let interval3 = null;
document.querySelector(".hacker").onmouseover = event => {
window.onload = (event) => {
target = document.querySelector(".navbar-brand");
let iteration = 0; let iteration = 0;
let old = event.target.innerText; let final = "NATHAN.WOODBURN/";
console.log(old);
clearInterval(interval); clearInterval(interval);
interval = setInterval(() => { interval = setInterval(() => {
event.target.innerText = event.target.innerText target.innerText = target.innerText
.split("") .split("")
.map((letter, index) => { .map((letter, index) => {
if(index < iteration) { if(index < iteration) {
return old[index]; return final[index];
} }
return letters[Math.floor(Math.random() * 41)] return letters[Math.floor(Math.random() * 41)]
}) })
.join(""); .join("");
if(iteration >= old.length){ if(iteration >= final.length){
clearInterval(interval); clearInterval(interval);
} }
iteration += 1 / 3; iteration += 1 / 3;
}, 30); }, 30);
} };
document.querySelector(".hacker2").onmouseover = event => {
document.querySelector(".copyright").onmouseover = event => {
let iteration2 = 0; let iteration2 = 0;
let old2 = event.target.innerText; let old2 = "Copyright © Nathan Woodburn 2023";
console.log(old2); console.log(old2);
clearInterval(interval2); clearInterval(interval2);
@ -54,28 +57,28 @@ document.querySelector(".hacker2").onmouseover = event => {
iteration2 += 1/3; iteration2 += 1/3;
}, 10); }, 10);
} }
document.querySelector(".hacker3").onmouseover = event => { // document.querySelector(".hacker3").onmouseover = event => {
let iteration3 = 0; // let iteration3 = 0;
let old3 = event.target.innerText; // let old3 = event.target.innerText;
console.log(old3); // console.log(old3);
clearInterval(interval3); // clearInterval(interval3);
interval3 = setInterval(() => { // interval3 = setInterval(() => {
event.target.innerText = event.target.innerText // event.target.innerText = event.target.innerText
.split("") // .split("")
.map((letter, index3) => { // .map((letter, index3) => {
if(index3 < iteration3) { // if(index3 < iteration3) {
return old3[index3]; // return old3[index3];
} // }
return letters[Math.floor(Math.random() * 41)] // return letters[Math.floor(Math.random() * 41)]
}) // })
.join(""); // .join("");
if(iteration3 >= old3.length){ // if(iteration3 >= old3.length){
clearInterval(interval3); // clearInterval(interval3);
} // }
iteration3 += 1 / 3; // iteration3 += 1 / 3;
}, 10); // }, 10);
} // }

4
index.html
View File

@ -45,7 +45,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<!-- End Google Tag Manager (noscript) --><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script> <!-- End Google Tag Manager (noscript) --><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script>
<script src="https://nathan.woodburn/https.js"></script> <script src="https://nathan.woodburn/https.js"></script>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav"> <nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand hacker" href="/#">Nathan.Woodburn/</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button> <div class="container"><a class="navbar-brand" href="/#">Nathan.Woodburn/</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li> <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
@ -151,7 +151,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<p>This site is also available on <a href="https://learn.namebase.io/" target="_blank">Handshake</a>&nbsp;at <a href="https://nathan.woodburn" target="_blank">https://nathan.woodburn/</a></p> <p>This site is also available on <a href="https://learn.namebase.io/" target="_blank">Handshake</a>&nbsp;at <a href="https://nathan.woodburn" target="_blank">https://nathan.woodburn/</a></p>
<p class="hacker2">Copyright ©&nbsp;Nathan Woodburn 2023</p> <p class="copyright">Copyright ©&nbsp;Nathan Woodburn 2023</p>
</div> </div>
</div> </div>
</div> </div>