CODEWITHSUNDEEP
ajaxwordpressslider
Codeeater
Codeeater

Reputation: 51

Load pages in wordpress using ajax with sliding effect

I have a client who wants his wix.com site converted to wordpress. But he wants to keep page sliding effect.. Can anyone tell me how to load pages in wp using ajax with sliding effect(right to left) ?

Upvotes: 0

Views: 4136

Answers (1)

Erik Svedin
Erik Svedin

Reputation: 1286

I've also had this request which i solved with some hacking in the ajax-page-loader code.

In the ajax-page-loader.js file you find the AAPL_loadPageInit() function. Here you might want to check what menu item is clicked, and then push the #content item right or left like so.

$('#content').css('margin-left', '-1500px');

This function triggers the AAPL_loadPage() function. Which around line 160 fades the #content container out with fadeOut(), and then fades in with fadeIn() + loads content.

Before the fadeIn you just add:

$('#content').css('margin-left', '0');

To reset the margin and put the #content container in place.

To make this all appear shiny and cool you'll use CSS transition something like this:

#content { transition: margin 1s; }

And of course dont forget to vendor prefix it. Hopefully this was helpful, please ask if anything is unclear or if you have any questions.

Upvotes: 1

Related Questions