How to Build an Interactive Slide Out Presentation

  • 4
  • Article
  • Updated 3 years ago
  • (Edited)


DEMO

We have had a few requests in the community for an example of an interactive slide out presentation. We thought it was an awesome idea, so we put together an example using text and image widgets, some HTML and CSS, and a pinch of Javascript.

If you find that you want to build a more complex layout with more pages, interactions and functionality, we recommend building it as a webpage and adding it to a presentation with the HTML Widget or Webpage Widget.

In addition to our widgets, we have also produced a number of web components which you can use to add awesome features to your presentations. Please check out this article to find out more about what a web component is, what it can do for you, and the different ones that are available.



First things first ...

Please head over here to find all the code needed for this template in the HTML window at the top left of the page. We will be going through the main parts of the code below, and we recommend you cut and paste this code into the HTML view of a new presentation.


You are now all set to follow along. You can also experiment with the presentation by making your own changes to the code.


How the template works

Our template has 3 different ‘views’, one with the rocket, one with the moon, and one with the telescope. Each of these views is made up of two different ‘pages’ - the text page on the left and the image page on the right. To achieve the sliding effect, the 2nd and 3rd text pages are kept off the screen on the right, and the image pages are stacked one on top of the other. When you press button 2 or 3, the corresponding text page slides in and the matching image page moves to the top of the stack.


Setting up the placeholders
The first thing to do is to set up the 6 placeholders that will hold the text widgets and images. We have named our placeholders text-1 and image-1, but you are free to name them whatever you like. We do suggest that you keep the names simple, so that they make sense later on. We also want to assign z-index values based on the order of pages when they are all on the page. In other words, the third page would have the highest z-index. It may sound counter-intuitive, but trust me, it works!




We can then add in more placeholders which contain our text widgets and images to their respective placeholders. Feel free to add some dummy text for now, such as ‘This is page 1’ so that you can easily see which page is in view. Also, make a note of which image has been added to each placeholder so you can check that the right one shows up when you want it.


For the images, we are adding these as a background image to the placeholders themselves, however you can also add an image widget to the placeholder and add your images in that way.

To make sure that the placeholders are within the correct page, we can jump into the HTML view by clicking on the ‘HTML’ button at the top of the editor:



We can then move the divs that contain the text and image placeholders to be inside their respective pages. For example, the code for the the text and image placement in page one would look like this:




Let's add some buttons!
We are going to add the buttons straight to the HTML so that we can easily add a border to them with CSS to tell us which page number is currently visible. There are a couple of other ways this can be done, for example you can also use placeholders with background images.

For our presentation, we will need 3 buttons, each with a unique id so that we can target the with Javascript later on to change the style. We also add in an ‘onclick’ attribute to each button which will match the name of the function that controls the movement of the slides. For example, the code for button 1 would look like this:


We can use CSS to apply all of the button styling. To add in the highlighted button effect we add three further div elements that are slightly larger than the buttons and are absolutely positioned so that they are behind the main buttons, each with a unique id of selected-1, 2, and 3 respectively. The code for styling the selected version of button 1 will look like this:




As we want this selected effect to show up on the first button when our presentation loads up, we don’t need to worry about changing its display value. However, for the selected style of buttons 2 and 3, we need to add in one more style of ‘display:none’ to their code. Below we will see how this style is added and removed from the selected button via a little bit of Javascript.


The animations
The movement of the text pages is controlled by CSS transitions. We only need to define the transitions for the second and third pages as the first page remains in the same place the entire time. We can do this by defining class for the pages when they are shown and when they are in their original positions. Below is an example of the code for the transitions on page 2.




We are using the linear style of transition, but feel free to experiment with different types, such as ease and ease-in-out. You can also get really creative and generate your own bezier curve here and then just cut and paste the code into your transition.


Button controls
To allow us to target the placeholders with Javascript, we will need to specify each unique id that we gave to them earlier. For example we have given the first text placeholder the id of ‘text-1’, so we are now ready to add some Javascript which will add and remove the classes we defined above.




Breaking down the above code, we see that we first set up our variables which contain the pages and buttons. Then we add three functions which will control the movement and visibility of the pages by adding and removing class names and styles. Each of these functions are named according to the ‘onclick’ value that we added to the buttons in the HTML earlier.


Now when you preview the presentation, you should be able to see that clicking on the buttons will change which page is in view, by sliding out the text placeholder and showing the image placeholder. You can add more pages by following the steps above and adding and amending the functions.


Little extras

To add to the effect of pages at different levels, you may have noticed that we have added a little bit of shadow between the text and image pages to give the impression of depth. As the text pages are the ones that are moving, we want to make it seem like they are the ones floating. Unfortunately, we can’t add a shadow to them as everything has to be within the bounds of the placeholder, but what we can do is add a shadow to the image placeholder to give the impression it is being cast by the text placeholder. To do this, we add the ‘inset’ value to the normal box-shadow code like this:



We can then add this to the placeholder style and we get an awesome, and subtle, shadow effect.

Thanks for checking out this post. We hope that you found it useful and we can’t wait to see the presentations that you come up with!
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb

Posted 3 years ago

  • 4
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Great post, love the vector art! Here is a great site for vector art if anyone is looking to use this and change the graphics to fit their needs. http://www.vecteezy.com/