Posts tagged with Scrolling

12 mesmerising parallax scrolling templates for WordPress

If you think that awe-inspiring parallax scrolling websites are the sole preserve of the coding genius, think again.

Highly interactive and narratively driven web pages are a fantastic way to engage visitors on your website and hold their attention. The pages themselves are static and rely on the user to scroll with a mouse, finger swipe or an arrow key to generate movement, this achieves a unique storytelling experience.

For some inspiring examples, check out Chris Lake’s 14 scrolling websites that tell a story and parallax scrolling websites are also one of our crucial web design trends of 2015.

Creating this type of page has become a lot easier thanks to HTML5, CSS3 and JQuery, and there are loads of templates now available for your own WordPress site. 

The examples below are recommended based on the demo versions and the quality of the customer reviews. I haven’t installed or used them myself, I’m merely highlighting them as an example of what you can achieve with your own WordPress site.

5 comments
the hobbit

14 blockbusting examples of movie website design

As the cinema experience continues to improve with technological advancements in Imax, 3D and fully immersive sound, so too does the aesthetic experience of the web with its glorious HTML5, parallax scrolling and super-slick CSS3 coding.

It's as if they're competing directly for our attention!

Thankfully the home experience will never match the cinema experience no matter how cutting edge your home cinema set-up may be. 

Just think of the sheer visceral horror of watching Sandra Bullock spinning out of control in the depths of space and how muted it will seem while watching it in bed on your tablet.

These films still need to be marketed through these less than cinematic desktops and portable devices in order to drag us out of our homes and into the theatres.

Luckily the fast pace of change in web design trends has meant that the large scale experience of cinema can be substituted online in brilliant alternative and innovative ways.

Here is a list of movie websites that either feature captivating visuals, grand technological achievements, innovative UX or highly interactive fun, whilst also perfectly capturing the essence of the movie online.

0 comments

14 fantastic scrolling websites that tell a story

In the past year or so there has been a trend in web design towards the use of scrolling, which can help to engage visitors and provides a feeling of movement and animation.

These web pages are entirely static, and rely on the visitor to interact in order to generate the ‘movement’. Back in the day if you asked for this a developer would reach for Flash, but nowadays HTML5 (which has a <ParallaxScroll> tag), CSS3 and JQuery are usually employed to achieve scrolling effects.

I’ve collected a bunch of scrolling websites that are built with the arrow keys in mind. Some of these are more 'animated' than others, and some scrolling websites feel a little bit clunky, but all of them are interesting and creative web experiences. 

I’m not yet convinced that scrolling is something that e-commerce companies should be embracing en masse, but it can certainly be used to support brand and product campaigns, given that the best examples are inherently narrative. Portfolio-based websites (such as the two agency sites I've featured) are another area where scrolling could come into play.

Scrolling, scrolling, scrolling, keep those websites scrolling…

48 comments

Web users spend 80% of time above the fold: Nielsen

While web users do scroll below the fold on websites, the portion of space 'above the fold' still remains the most valuable, with 80% of users' time on sites spent in this area. 

This is the verdict of Jakob Nielsen's latest blog post, which recommends that any truly important elements are left above the fold on the page. 

11 comments

What should be above the fold on an e-commerce site?

As a number of usability studies have shown recently, the fold on a webpage doesn't have to be a barrier to users, and people are willing to scroll down to see more.

However, the area above the fold is the first thing visitors to your website will see, so what should be above the fold? Here are a few suggestions, with e-commerce sites in mind...

9 comments