How does this site change between pages this smooth?
http://hellomonday.com/
When you go in to a project it's animating in to the new page. If we look at the html, the projects html is not pressent before we animate to it.
I am pretty sure there are using greensock for the animation, but how can you load the new html. Animate to it and then get rid of the main page html that smooth?
Yes, they are using GSAP for animation.
Content loading & page navigation:
They are loading all content (site-content.php) by a XHR request at the beginning & changing the content in time of page navigation. That’s why the page transition is so smooth.
Related
Upon page refresh using animateAnchor: false, for a second I see the first image / slide presented on the site, rather than instantly loading the slide that is anchored. It looks like a small glitch. Is there any way around this problem?
That makes total sense if you are importing the fullpage.js file before the closing body.
That way you'll have to wait for fullPage.js file to load and then to initialise and meanwhile you'll see your site as it is before using fullpage.js.
Try importing fullPage.js on the head of your site, this way initialisation will be faster.
Also, you can use the following CSS in your stylesheet so sections will be 100% height even before loading fullPage.js:
#fullpage,
.section,
body,
.fp-tableCell,
html {
height: 100%
}
Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides. (.slide, .section)
I have a site with about 10 pages. On each page its the same layout and just the image changes. Is it possible (EG with HTML or AJAX) to animate the image change when you navigate to a new page?
I want the appearance to be as close to a normal jQuery slider as possible:
http://jquery.malsup.com/cycle2/demo/prevnext.php
I haven't used the Cycle 2 plugin as I need each page to have a separate URL. The Cycle 2 plug in does have bookmark-able slides but they use fragment identifiers for each 'page' which social media sharing widgets sometimes ignore. So mysite.com/#page3 is shared as mysite.com, meaning the first not third slide is linked to.
The social media sharing widgets also use meta data from the page which doesn't change per slide as its still the same page.
You can use CSS3 page transitions, remain on one page and just manipulate the URL as you need to. See for example: Change the URL in the browser without loading the new page using JavaScript
Here's a good answer to your question using HTML5 Transitions:
HTML 5 page transitions
Hope this helps!
Is there a simple way to add animations to static HTML page navigations?
My client didn't want any animations initially, so I used static HTML pages on the site I'm building, now, the site being almost finished he changed his mind. I only need a simple fade effect to one specific div when using page navigation. (link tags)
If he had told me before that he wants animations on the site, I would have used ajax as always, adding the fade effect like this (using jQuery):
$(target).fadeout();
$(target).load(url, function() {
$(this).fadein();
});
I really don't feel like rewriting the whole site to use ajax, and my client doesn't feel like either to pay a surplus because of this.
i need a jquery plugin where i want to load the module by default as HTML and upon clicking more link it should load the rest of the content via AJAX and then previous button should be enabled.
Currently when i google i can get lot of plugin which just load either via AJAX or Animation [by hidding the rest of the content]. But for performance issue i don't want to load all the content at one shot and then animation. So i want to load the 5 li's and upon clickiing "More" it should start loading the remaining content but it should also animation.
Could someone help me on this?
-- Bala
My advice to you would be to customize the jCarousel according to your needs. Specifically, when you render the page initially you can include the initial 5 elements of your carousel. Then, in the carousel's onchange event, once you reach the last slide you can use AJAX to pull in the additional images.
Depending on your needs, using jCarousel driven by a flat JavaScript array you could save some load time as the image URLs would be rendered in the original markup, but not downloaded by the browser until they are added to the visible portion of the carousel. No AJAX required. Here's a demo.
I want to use the classic anchor link to have a top nav link towards the bottom of the page. Is there an AJAX alternative for this to make it look cleaner and better?
I believe you are confused between the terms Javascript and Ajax... I'm guessing you neeed an anchor link to smoothly animate or slide the scroller to the bottom/top of the page or to the anchor tag... check out this plugin here
Try the jQuery LocalScroll plugin. There's a nice demo to see all the ways to make scrolling nicer.