We design and develop some non-refresh websites (such as the use of ajax, pjax and other technologies). They may include some page transition and effects and animations which improve the site’s user experience and ploy of interface heavily, allowing users to stay longer. This is also a great way to increase content marketing. I might have found the start of a new trend in 2018 involving an interesting and unusual kind of page transition and effects that are very interesting, especially when we’re using the effects to tell stories or sell your products.
When you click on the navigation menu, the whole page of the SVG is not a normal shape. Switching smoothly between the two ways of exploring the story and page content you have at your disposal. The result of this is to bring an unprecedented freshness.
Example：Labor Fit Company
The elements of the page or the primary character, and even the background image to the depth of field animation to switch in order to make a parallax effect.
The point transitions are very nice and took advantage of that. Accurate positioning of the product or the site’s target audience, help to make users find the focus of the page.
Example：Les Animals Studio
Very rhythmic and step-by-step transition effect, so that the user’s focus is changing. At the same time make the site more interesting.
Using non-refresh mask layer queue to hidden or display the content. If you use this way to navigate, you can know more clearly where you are on the page.
Example：Ueno. Digital agency
Similar to the previous effect with excellent user experience.
Very creative expression and giving the immediate feeling. The experience really shocking when I saw this site. The most prominent is animation of the page rotation and background color change.
Allowing users a glance and harmonious product guide. From the whole experience, the page highlight the clear steps and text introduction.
A little blind feeling. Common in the slider, but here used in the page transition animation, I think it is an application of cross-thinking skills. Good work!
The page has comfortable easing and parallax effects. The combination of multiple transitions also makes the page look real and highly creative.
Example：The Great Agency
I hope this article will give you more inspiration and improve design and development capabilities. Like it? You can follow me if you want, thanks. 🙂