• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1242
  • Last Modified:

How can I fade in a Joomla site landing page?

Greetings,

I have a Joomla site which the customer would like to have fade-in when the visitor lands on the site. This isn't a matter of fading in an article, but the entire landing page.

Is there a way to have the template fade in?

Thanks in advance for any help!

0
trahan
Asked:
trahan
  • 3
  • 2
1 Solution
 
Jesse MatlockUX EngineerCommented:
Why would they want to make the page heavier with JS to accomplish this, when it adds nothing to the user experience? It will actually delay the load and use of the page,.. since it will first need to load the page fully, THEN fade it in.. very poor usability will result.
0
 
trahanAuthor Commented:
ok, let's try this again :)

HOW can we make it so that a web site fades in? this is what the customer wants. Can this be done??? YES or NO?
0
 
Jesse MatlockUX EngineerCommented:
It can be done, you would use a MooTools code, since Joomla runs mootolls (or code something in jQuery in noconflict() mode) that is called at the start of the page, and turns all elements transparent, then fades them in over a duration.

I would say the 'best' way to do this would be to set the body tag, or a wrapping div (that wraps the entire page content) to display:none using CSS.. then, using JS to fadein that 'hidden' element.. you would also want to add a <noscript> tag to the pages head tag, so in case the user has JS disabled, they will be able to see the contents - something like this:
<style>
div#wrapper {display:block;}
</style>

<script  type=....... >
// java script here for fading in div#wrapper over a given duration
</script>

<noscript>
<style>
div#wrapper {display:block;}
</style>
</noscript>

Hope that helps.
0
 
Jesse MatlockUX EngineerCommented:
There is also another way (actually, many ways :D to do this), which entails leaving the #wrapper div OUT of the markup of the page and adding it with JS after the body tag.. this would eliminate any chance of someone with JS disabled having any issues, etc with viewing content..
0
 
trahanAuthor Commented:
Thank you!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now