Blog

Infinite Scrolling with Mura 7

December 14, 2017

In the age of asynchronous single-page applications and seemingly endless content bingeing, a seamless experience is increasingly crucial when attempting to keep an audience engaged. Whether perusing headlines, researching rock bands or scrolling social feeds, every click of a link or press of a button is an added point of friction in the user's experience. Omitting these small actions helps eliminate distraction, creating Flow in the experience.

Wrapping up the final day of the MuraCon 2017 conference, Nolan Erck from South of Shasta treated attendees to a power-packed presentation utilizing multiple facets of Mura CMS development to display the output of a custom Mura content collection in an auto-loading, infinitely-scrolling single-page format. By leveraging mura.js JavaScript library to dynamically append display objects to the page body, the content is loaded as the reader nears the end of an article.

This modern method of serving up large lists, feeds and data sets instantly loads the next block of information when scrolling to the bottom of the current view, with no clicking or reloading required, for a fast and user-friendly way to deliver content on demand and enable the opportunity for higher engagement in the form of content-bingeing.

Learn more from Nolan Erck and other members of the Mura community at MuraCon 2018, on April 4th and 5th in Sacramento, California.

Related Resources

See this Video Presentation on YouTube: youtu.be/ud8MZGzhd-E
MuraCon 2017 Video Playlist: youtube.com/playlist?list=PLcKlNuw7UGaodvcjgPujAUdFN4rambGta
Presentation Slides: 2017.muracon.com/schedule/infinite-scrolling-with-mura-7/presentation-slides
Download or Contribute to Mura CMS on Github: github.com/blueriver/muracms
Mura Information, Blog, Support, and Documentation: getmura.com

Related Documentation

Mura.js
docs.getmura.com/v7/mura-developers/mura-rendering/murajs
Display Objects in Mura 7
docs.getmura.com/v7/mura-developers/mura-rendering/mura-display-objects