2 Correct answers
the mainNavLinks slide up and fade in - but they just slide out and dont fade out if im not mistaken -
I tried to create a seperate animation (fadeDownOut) but its not working
By @REELHERO
Create a new '.mainNavLinks li.fadeOutDown' css class:
.mainNavLinks li.fadeOutDown {
transform: translateY(210px);
animation: fadeInDown ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Under the function 'removeFadeInUp()' add the line in bold below:
else {
mainNavLinks[i].classList.remov
Alright, maybe if I post the complete code example (see below) it might help you to trace where it is you are going wrong. All I've changed is setting the opacity to 0 at 25% in the 'fadeInDown' keyframe animation so you can see more readily the fading out of the links and I've added a setTimeout function to delay the copyRight information sliding up.
I think the one bit of important info I left out in my previous post was to inform you to assign the copyRight <div> to a variable, which is inclu
...
33
Replies
is there a simple css to make that happen?
ie on each page
body {animation: fadeInAnimation ease 3s;animation-iteration-count: 1;animation-fill-mode: forwards;}@keyframesfadeInAnimation {0% {opacity: 0;}100% {opacity: 1;}}
By @REELHERO
You could try that solution and see what sort of affect it provides.
did you do a delay on the fadein of the new page? looking for it-- want to tweak it just slightly..
https://toddheymandirector.com/index_menu_test2.html#
By @REELHERO
No, the user just gets whisked away to the correct linked page after the navigation has been reversed back into its default starting point. Any fading in of the page would have to be applied to that page itself as it can't be controlled from the external page.
That test page you put up looks pretty good l think.
the mainNavLinks slide up and fade in - but they just slide out and dont fade out if im not mistaken -
I tried to create a seperate animation (fadeDownOut) but its not working
By @REELHERO
Create a new '.mainNavLinks li.fadeOutDown' css class:
.mainNavLinks li.fadeOutDown {
transform: translateY(210px);
animation: fadeInDown ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Under the function 'removeFadeInUp()' add the line in bold below:
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
i--;
}
Under the 'toggle.onclick = function() {' add the line in bold below:
mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
mainNavLink.classList.remove('fadeOutDown');
});
You can then also remove 'overflow: hidden' shown in bold below from the 'mainNavLinks' css:
/* MAIN NAV LINKS */
.mainNavLinks {
margin: 0;
padding: 0;
overflow: hidden;
}
Plus, you can add 'opacity: 0' shown in bold below to the 'mainNavLinks li' css:
.mainNavLinks li {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
transform: translateY(210px);
transition: all 700ms ease;
opacity: 0;
}
also i cant get the copyright footer to appear as it does on https://toddheymandirector.com/ when you click the menu-
Add the copyRight <div> to the overlayWrapper <div> directly before its closing tag </div>
<div class="copyRight">Copyright Information</div>
Create 2 new css selectors:
.copyRight {
color: #fff;
position: fixed;
bottom: 30px;
transform: translateY(100px);
transition: all 1s ease;
}
.copyRight.copyRightSlideUp {
transform: translateY(0);
}
Under the function 'removeFadeInUp()' add the line in bold below:
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.classList.remove('copyRightSlideUp');
i--;
}
Under the toggle.onclick = function() { add the lines in bold below:
if (overlayWrapper.classList.contains('fadeInOverlay')) {
overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
copyRight.classList.remove('copyRightSlideUp');
....and after the 'animateNavUp()' function:
animateNavUp();
copyRight.classList.add('copyRightSlideUp');
That's it.
it looks fabulous - a simple adjustment but its more fluid and elegant!
By @REELHERO
It's the 'small things' that make the big difference...........that's why I prefer to code it myself and not get blinded by dependency on using a framework, which of course, can never entertain the 'small things' out of the box.
AdChoices