[MOD] Simple Page Fade Effect

Post Reply

6 posts Page 1 of 1

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am

Post by SXGuy » Thu Sep 16, 2010 8:16 pm

This is quite a simple mod and i think actually makes the site look alot better when loading or navigating.

I didnt actually find anyone already mention this here before so i thought i would share it with you.

Modify your Header.tpl and insert between the <head> </head> tags

Code: Select all

<meta http-equiv="Page-Enter" content="BlendTrans(Duration=3.0)">

duration = length of time for the page to fade

content = type of effect

for a list of other effects visit http://www.aim-higher.net/meta-transitions.asp

I think many other browsers allow this to work, although i had heard safari doesnt?

Anyway, i personally like the blendtrans with a 3 second fade as it gives a good feel to the site.

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am

Re: [MOD] Simple Page Fade Effect

Qphoria

Administrator

Posts

20056

Joined

Tue Jul 22, 2008 3:02 am

Post by Qphoria » Thu Sep 16, 2010 9:23 pm

Only works in IE it seems
No go in FF or Chrome

Qphoria

Administrator

Posts

20056

Joined

Tue Jul 22, 2008 3:02 am

Re: [MOD] Simple Page Fade Effect

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am

Post by SXGuy » Fri Sep 17, 2010 5:06 am

hmm, shame, i guess for other browsers you will require some jQuery instead.

example

$('body').hide();
$('body').fadeIn(1000);

define some styles in the stylesheet too.

set it just before the closing body tag, so it works before the whole page is loaded.

Last edited by SXGuy on Fri Sep 17, 2010 5:19 am, edited 1 time in total.

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am

Re: [MOD] Simple Page Fade Effect

Qphoria

Administrator

Posts

20056

Joined

Tue Jul 22, 2008 3:02 am

Post by Qphoria » Fri Sep 17, 2010 5:18 am

Using jquery:

1. EDIT: catalog/view/theme/YOURTHEME/template/common/header.tpl

2. FIND:

Code: Select all

</head>

3. BEFORE, ADD:

Code: Select all

<script type="text/javascript">$(document).ready(function(){ $('#container').hide(); $('#container').fadeIn(1000);});</script>

Qphoria

Administrator

Posts

20056

Joined

Tue Jul 22, 2008 3:02 am

Re: [MOD] Simple Page Fade Effect

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am

Post by SXGuy » Fri Sep 17, 2010 5:20 am

haha thanks! i was close with my edit! lol

Thank you for this, will change it to your code straight away.

EDIT: one slight prob with that tho.

The buttons above the header dont fade with the rest of the page, nor does the country flag image?

SXGuy

Active Member

Posts

1909

Joined

Sun Nov 08, 2009 2:07 am