Smooth page transition

More
4 years 7 months ago - 4 years 7 months ago #6937 by MarysiaPa
MarysiaPa created the topic: Smooth page transition
I have one more question :)

I don't like the page transition, which is pretty harsh, and I would like to add some fadeIn/fadeOut effect to make navigating between pages smoother.
In general I know how to do it. Script like this one: www.onextrapixel.com/2010/02/23/how-to-u...ck-page-transitions/ works just fine, but I have no idea how to add it to the template.

I found "js" folder and I found "script.js" file. There is even some jQuerry script for going back to the top :) But adding my script doesn't do the job :( so - any suggestions?

I was also looking for some joomla extension to make it done, but I did't find any - there are some nice extensions for animating modules and articles, but not page transitions....

EDIT: ok, so script added to "script.js" file IS working now. It just doesn't start working immediately after being added and saved, what makes playing with the script quite annoying ;)
Last Edit: 4 years 7 months ago by MarysiaPa.

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago #6949 by marcin
marcin replied the topic: Smooth page transition
Ok, thanks for the info :)

Regards,
Marcin

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago - 4 years 6 months ago #6972 by MarysiaPa
MarysiaPa replied the topic: Smooth page transition
Houston, we have a problem!

I found nice jQuery script, adapted it to what I like - and it doesn't work :o

What I was looking for was "scrolling script" doing two things:
1. scrolling to anchor point on the same page
(like scrolling down from example.com/index.html to example.com/index.html#foo )

2. going to different page, fade it in and scroll to the anchor point
(like going from example.com/index.html to example.com/some_page.html and scrolling down to example.com/some_page.html#boo )

I built simple page to check if script is working - and it does. Page is here: test page .
And script: script .
So perfect? Not exactly ;)

I've added this script to "scripts.js" file in "js" folder and "jQuery 'Back to Top' script" stopped working. So I hided it, as losing "back to top" is the price I can pay ;)
But the second thing which is not working is more important for me: scrolling to anchor point on the same page. I have no idea why it doesn't work...
You can check it here: click - two left pictures on the gray bar are links to anchor points. Work fine when going to different page, but without scrolling on the same page.

What makes me "nervous" is that I haven't found the place, where template is "calling" for scripts. You know, on "regular" page you put in head section something like:
<s-cript src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<s-cript src="script.js"></script>
to call for jQuery library and for script itself. But I don't know how your template do that and maybe this is the problem? But it definitely does it some way, as scripts are working somehow...

Any idea what is wrong and how to fix it?

EDIT: problem solved :)
still don't know how template is calling for scripts, but at least script works as I need it.
Last Edit: 4 years 6 months ago by MarysiaPa.

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago #6978 by marcin
marcin replied the topic: Smooth page transition
Hello,

All head files are included in the head.php file (templates/jm-lifestyle/tpl/blocks)
The jQuery library is loaded using this code:
JHtml::_('bootstrap.framework');
More details here:
docs.joomla.org/J3.x:Javascript_Frameworks
Under the JavaScript framework we load the scripts.js file:



Hope it is clear :)

Regards,
Marcin
Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.311 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.