Module 11: Using Hardware Acceleration

In this module, you add hardware accelerated page transitions when the user navigates between the list and details views.

Steps

Modify index.html as follows:

  1. Add pageslider.css inside the head tag in index.html:

    <link href="assets/css/pageslider.css" rel="stylesheet">
    
  2. Add a script tag to include the pageslider.js library (after jquery.js):

    <script src="lib/pageslider.js"></script>
    

    PageSlider is a micro library I host on GitHub here.

Modify app.js as follows:

  1. In the Local Variables section, declare an instance of the PageSlider object as follows:

    var slider = new PageSlider($('body'));
    
  2. In the routes, replace the calls to $('body').html() with calls to slider.slidePage() passing the same argument to the function.

    slider.slidePage(new HomeView(service).render().$el);
    

    and

    slider.slidePage(new EmployeeView(employee).render().$el);
    

comments powered by Disqus