• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

reverse nav bar action on click

Contributor ,
Mar 31, 2023 Mar 31, 2023

Copy link to clipboard

Copied

Not a major priority but I think my navigation would be more elegant if the menu bar reversed out as the page shifts onclick in a similar manner to the way it loads.

 

https://toddheymandirector.com/

 

IE.. right now if you click on the menu bar on the upper right the navigation bar slides up slightly and fades into place, each title sequentially--

 

as is, if you click any page it instantly disappears.

 

Id love each page title.. ie HOME, CAMPAIGNS, ABOUT, CONNECT and the social buttons to slide down slightly (same amount as the move up) as they dissolve out and the page you've clicked appears..

 

thoughts?

 

 

Views

5.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Apr 02, 2023 Apr 02, 2023
quote

 

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
...

Votes

Translate

Translate
LEGEND , Apr 02, 2023 Apr 02, 2023

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

...

Votes

Translate

Translate
Community Expert ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

quote

 

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.


By @osgood_

 

A framework is no different to other mass produced items, they all look the same.

 

One could turn a 1966 Ford Edsel into a Batmobile or add bespoke CSS and JavaScript to Bootstrap to make them look different.

 

The other way is to start from scratch. Build a Batmobile using your own manufactured parts, or build a website starting with HTML, CSS and JavaScript from scratch.

 

Either way, the result is a motor vehicle or a website that is visually unique. But at what financial cost?

 

As a side note, when I use the Bootstrap framework, in reality I am using someone else's code. Isn't that what is happening here? Isn't @reelhero using @osgood_'s code?

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

 Ben  its actually the complete reverse of that - Ive designed my site from scratch wrote all the original code and taught myself -this is not my occupation - ive created all the imagery - and I wanted to raise the bar - I am the bootstrap framework in this case and Osgood out of the generosity of his heart has guided me and provided solutions to do that - to raise the bar and be more elegant and user friendly  - Ive honored his generosity by coming up with solutions in between the last time I reached out last summer and now including converting my site to be responsive entirely on my own..  

 

No none of us created the code we learned it- some like Osgood at a very high level - just like great filmmakers and artists - stood on the shoulders of giants to do something more original

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 02, 2023 Apr 02, 2023

Copy link to clipboard

Copied

Apologies for my grumpiness, it comes with age.

 

My intention was to show the difference between a bespoke coded website and one based on a framework. The aside was aimed at historic remarks regarding frameworks.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

quote

Apologies for my grumpiness, it comes with age.

 

My intention was to show the difference between a bespoke coded website and one based on a framework. The aside was aimed at historic remarks regarding frameworks.


By @BenPleysier

 

You're missing the point. A framework will only provide the basics by default. It cannot cover every conceivable requirement, that's where a knowledge of coding is required to make YOUR vision of what YOU require happen, not that of a framework.

 

To use your analogy l could buy an off the shelf suit cheaply that would probably be OK but if l wanted it to fit to my exact requirements l would need to be a tailor or seek the experience of a professional tailor.

 

Frameworks are for the purpose of cheap and cheerful, inexpensive solutions, mainly driven by an employers needs to turn a profit rather than the need to fill a passion to create something original and bespoke. Not coming from a creative background l accept that may be difficult for you to understand. For us it's usually not about the money it's more about the satisfaction to create something as an individual and be better at what we do.

 

In respect of reelhero using my code, partly true. He is one of only a few around here that can actually implement it and re style it if necessary so that tells me he is willing to learn and study something outside of his normal comfort zone to achieve his desired goals, which a framework cannot provide by default, that is truly admirable and just maybe l can convince a few others that if you know coding you can also realise YOUR vision and not be reliant on someone's else's vision.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

I agree with most of what you are saying in the above. I admire the way that you (@osgood_) have been   helping @reelhero and I think that the resultant website is a fantastic creation. This must give both of you a great feeling of accomplisment.

 

But what of the person visiting the site.

  • Is that what they want?
  • When they dial in on the site using their mobile phone, are they told beforehand that 30 MB of data is being downloaded every 1 minute that they are watching the homescreen?
  • What of the contrast ratio for the person with low vision?
  • Why disable zooming for those same users with low vision?
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • Why upset the semantic structure (and that of secreen readers) of the page by not having the heading elements in a sequentially-descending order?

 

I could go on. I just wanted to illustrate here that there is much more to a website than a beautiful creation. It is not only about creativity, it is more about the user of the site.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

quote

I agree with most of what you are saying in the above. I admire the way that you (@osgood_) have been   helping @reelhero and I think that the resultant website is a fantastic creation. This must give both of you a great feeling of accomplisment.

 

But what of the person visiting the site.

  • Is that what they want?
  • When they dial in on the site using their mobile phone, are they told beforehand that 30 MB of data is being downloaded every 1 minute that they are watching the homescreen?
  • What of the contrast ratio for the person with low vision?
  • Why disable zooming for those same users with low vision?
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • Why upset the semantic structure (and that of secreen readers) of the page by not having the heading elements in a sequentially-descending order?

 

I could go on. I just wanted to illustrate here that there is much more to a website than a beautiful creation. It is not only about creativity, it is more about the user of the site.


By @BenPleysier

 

All good points to take into consideration. So where is the balance to be found............provide a boring experience,  mainly for minority groups and risk losing many users or provide a more exciting experience and risk losing a minority of users.

 

Obviously in this case the website is targeting the creative sector probably in ad agencies and they are mainly the younger generation with lots of visionary ideas, so need to be wowed. On the other hand it might not be so great a solution should it be appealing to sight challenged old age pensioners on dial up modems. 

 

Anyway we've gone off subject, with or without a framework, which is what was being discussed, any of the above points you mention could result. I was more discussing the merits, benefits and satisfaction of understanding enough to be able to make the decisions, taking into account points raised and actually being able to create what feels personally right. Someone  has to ultimately make that call and the more you know will obviously help in not only making those decisions but implementing them.

 

Interesting though and you're quite correct, it's about knowing your market. Our local coffee house has just gone all digital, you can only order on screen now and no cash. We'll l won't be going there again as it doesn't appeal to me but they obviously know their market and who spends the most and that certainly is not me. I'm a dinosaur in their eyes.........you can't please everyone.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

Not much I can add that hasn't been said but I will concur, knowing your market and what you want to convey to that market is essential. Osgood is right, my viewers are ad agencies and production companies and I'm competing with some of the finest talent that direct the commercials you see on television and films across multiplexes worldwide. Anything that helps me separate from the pack is a golden chalice.. And as Osgood said the whole world has gone digital, my website could be the one and only way they see my work.  It must be memorable (in many cases a simple Wix site is fine- Im just not one of those cases). The only way that happens is if I respect the craft of website design, absorb what Osgood has taught me and make something special. That said, I'm happy when my retiree father can see the site on his iphone 7..

 

I am a self-taught director as well. I managed to become a member of the DGA (Directors Guild of America-members include Steven Spielberg and the like) through sheer will and drive. And much of it was  through a relentless approach of self-improvent.  The good news is, I am seeing the younger members reflect that same drive and self-reliance and a desire to create original enduring work despite the grinding march of tentpole films (ie the marvel movies). A good sign for the future. 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 03, 2023 Apr 03, 2023

Copy link to clipboard

Copied

Love you both. I enjoyed our chat and see that you have given the site and the audience a good deal of thought. In all honesty, I am a little jealous as I could not have pulled the same creation off. As @osgood_ ponted out, I am not a designer, never will be. I am a mechanical engineer with a go-no-go guage in his hand.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 06, 2023 Dec 06, 2023

Copy link to clipboard

Copied

LATEST

For some reason the return code that we worked on stopped working- 

i did a test in case I somehow corrupted it along the way but the code from above verbatim no longer works

 

https://andylilien.com/narrative/index_test4.html

 

i wonder why? is it a browser issue you think? it was so elegant!! Im bummed

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines