We’ll give each one an id that corresponds to one of the links in the navigation. īelow our nav, we have the main content of our page, which includes a number of sections. We also have a with a class of nav_track, which will be our draggable trigger. Inside this, we have a marker, which we’ll style with CSS to indicate the position on the timeline. As this is going to be our main page navigation, we’ll use the element. Feel free to jump straight to the final demo if you want to get stuck into the code, or use this starter Codepen, which includes some simple initial styles so you can concentrate on the JS. We’re going to walk through the steps for creating our timeline. This means we have three different methods for navigating our page - and they all have to sync perfectly with one another. Additionally, clicking any of the links in the timeline will allow the user to jump straight to the relevant section. Dragging the horizontal timeline should scroll the page to the appropriate place in the content, and likewise scrolling the page will cause our timeline to update. We’ll have a timeline along the top of our webpage showing our dates, and a number of full-width sections where our content for each of those dates will live. The subject of our timeline doesn’t really matter - the main thing is a series of events that happen over a number of dates - so feel free to pick your own subject matter to make it more personal to you!
We’re going to build a timeline showing albums released by the rock band Radiohead. In this tutorial we’ll look at how to use them together, to create an interactive timeline that’s both scrollable and draggable. The Greensock animation library’s ScrollTrigger and Draggable plugins can help us create some very cool effects that respond to user interaction.
0 kommentar(er)
