That being said, its not easy to match the level of fluidity of Flash because of how differently web browsers handle HTML.
The transition between pages, especially, is what seems to be most challenging in this case, in my opinion. You can save yourself tons of time and effort to let go this specific requirement if its feasible for you.
However, if you’re up to go extra mile to pull off this extra feat of coolness, its not impossible at all.
Thank you for the reply.
I did a quick Google regarding the smooth transition between pages I’m looking for in my website and found this link:http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
Check out the demo. Exactly this is what I’m looking for, so maybe it’s not so difficult after all..
Yes, the link that you provided does indeed present a simple solution.
It overrides the default behavior of the browsers on anchor tags (links) by applying a smooth fade out transition to the root container of all the visual contents on the page (body) before actually redirecting to the page.
The new page (or all pages of the website) has a default hidden property applied to all of the visual contents at start which then fade in after the page has completely loaded (none of the elements is visible while being loaded; since they’re hidden).
So, essentially, pages are still being loaded separately (just how regular websites work) but an illusion of transitional fluidity is added between them.
Now, this approach seems to work smoothly with the demo that is shown on the link that you provided, but will most likely fail when the pages get a little bit more complex with the introduction of images and more text (esp. with custom fonts). The fluidity will be broken when a new page takes 2-5 seconds to load (on relatively slower connections) during which nothing (absolutely nothing) will be displayed on the screen.
My suggestion was to load the new pages’ content via AJAX which will only load the new content where the content needs to be changed (for example, the navigation bar loads only once while navigating through different pages of the website). This will not only remove the overhead loading of data, but will ensure that the fluid experience is consistent throughout the browsers and internet connections.http://hulu.com uses AJAX to navigate between pages. Notice how the browser doesn’t reload everything upon each page navigation and how it behaves more flash-like.
This is way too awesome to refer here but http://fff.cmiscm.com/ also uses AJAX. Its mind-blowingly flash-like and maybe even so much more.
Are you looking to hire someone to make a website for you?
Ok, I see. That’s exactly why I’m not trying to build my own website.. there are simply too many things to take into consideration, including the challenge that it should work perfect in all browsers and also on tablets, phones, etc.
The sites you mention are very nice and smooth, but the page transition must not be extreme, I found another website (html 5) on FWA with smooth navigation, partly achieved just because the images on each page are faded in, or do they also use AJAX? Anyway, every detail on this website seems to have class, but then of course it would probably cost some 10.000 USD to get.. (made by group94).http://www.yangrutherford.com/
Yes, I am looking for someone to make a website for me but I fear the cost would blow my budget even if it’s just a clean, minimalist portfolio. So far I have found interesting templates to use and adapt myself on activeden (flash) but now turning to html I’m actually a bit disappointed with the templates offered for serious photographers on themeforest.
How about you reach me through my profile with whatever budget you have and we see what can be achieved within that? I’m sure we can do something cool even with a limited budget.
I am still browsing around the web getting some inspiration for my new website. Not sure yet on several important key elements (one or two language, blog section or not etc.) but I will for sure consider your offer when I know exactly what I want.
That sounds fair enough. May the force be with you!
- Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
- Open a support ticket if you would like specific help with your account, deposits or purchases.
- Item Support by authors is optional and may vary. Please see the Support tab on each item page.
Most of all, enjoy your time here. Thank you for being a valued Envato community member.