host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit home navigation

Browse source
This commit is contained in:
Paul Nicoué 2022-05-12 11:22:16 +02:00
parent 586763f249
commit d149a90c80
7 changed files with 96 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

67
assets/js/app.js
View file

@ -55,26 +55,14 @@ function calculateNavGridInnerDiagonal() {
// Create new instance of CircleType for each navigation link, set radius and direction
function curveNavLinks() {
if (navLinks.length !== 0 && circleTypes) {
if (navLinks.length < 7) {
for (let i = 0; i < (navLinks.length - 1); i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].dir(-1);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
} else {
for (let i = 0; i < (navLinks.length - 3); i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].dir(-1);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = 0; i < (navLinks.length - 2); i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].dir(-1);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
}
@ -96,14 +84,6 @@ function setNavGridDisplay() {
navEl.classList.add('home__nav--3-items');
} else if (navLinks.length === 4) {
navEl.classList.add('home__nav--4-items');
} else if (navLinks.length === 5) {
navEl.classList.add('home__nav--5-items');
} else if (navLinks.length === 6) {
navEl.classList.add('home__nav--6-items');
} else if (navLinks.length === 7) {
navEl.classList.add('home__nav--7-items');
} else if (navLinks.length === 8) {
navEl.classList.add('home__nav--8-items');
}
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('home__nav-link--visible');
@ -162,28 +142,15 @@ function waveNavLinkDown(navLink) {
// Add wave (up or down) animation to every letters of each link on mouseover event
function waveNavLinksOnHover() {
if (navLinks.length !== 0) {
if (navLinks.length < 7) {
for (let i = 0; i < (navLinks.length - 1); i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkUp(navLinks[i]);
});
}
for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkDown(navLinks[i]);
});
}
} else {
for (let i = 0; i < (navLinks.length - 3); i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkUp(navLinks[i]);
});
}
for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkDown(navLinks[i]);
});
}
for (let i = 0; i < (navLinks.length - 2); i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkUp(navLinks[i]);
});
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkDown(navLinks[i]);
});
}
}
}