Building a scrollytelling site with scrollama.js (no d3, no magic)

all right let's uh let's learn some scrolly telling so what we're going to be doing in this video is we're going to be using the delightful scroll lama uh js library in order to create a scrolly telling experience so what is scrolling telling if you're watching this video and you probably know it's just one of these nice little experiences where you know there's something that sticks on the page and there's something that scrolls by and maybe this changes maybe this changes used a lot in newsroom stuff like that there are a few different ways that it works these are all the simple examples from scroll lama but they cover pretty much all of your use cases from just having things that scroll by and highlight to having things that overlap and things like that so the scroll llama examples are available in the scroll on the repository but they're a little more complicated than i'd like them to be they make use of d3 just because d3 is around just because d3 is common but you don't need d3 you don't need other tools so what i've done is i've made my own repository that has almost all of the examples that are in the official repository they're just simplified a little bit so i'll put a link to that in the description and if you want to code along which you probably should it'd be great if you know you download this click your good friend code click download zip and go from there and you can see if you click through here it's all pretty much the same as what's on the actual repository just a little bit different a little bit different so what we are going to do is we are going to be working with the overlay example here so i already downloaded it i unzipped it it's all there and we're starting from scratch the only thing different between my repository or the code that i'm using here in the code that is online is that i added an image in an images folder it's just a jpeg of some mountains we'll use it later on so what we want to do is see how this page works first off actually let's not do let's do sticky overlay there are a few additional problems that we'll tackle on this which will help you learn a little bit so what we're going to do is we're going to take this sticky overlay example and we're going to turn it into something that is a little bit nicer than just this kind of template we're going to see how to customize it and we're going to see what you can do with scrolly telling we're going to see how to you know customize this background here how to make different things happen when you hit different steps things like that so in watching this video you should be somewhat comfortable with html css you should know that programming exists maybe you've coded a little bit but you know if you're not the best at javascript totally fine because we're just going to be working from this template so as long as you're fine with that as long as you can feel comfortable working with something that you don't necessarily understand i think that you'll be okay so let's start by looking at the html here and what's going on so first off these templates have two different sets of css so css is the stuff that kind of makes the page looks like look like the page sets the font sets the color things like that number one we have a style.css style.css here is just the kind of basic thing of how this header up here looks how this navigation looks things like that it doesn't really have anything to do with the scrolly telling it's just the general styles of the page so the idea is if you want to take this template and use it in something that is your own where you're not going to have you know this header here where you're not going to have this title here you can just delete the style.css line and that css will be gone you won't need that file you won't need any of that then we have the styles that are actually in the page themselves so these are things that actually make the scrolly telling work this scroll they telling here is a combination of html css and javascript and you need all of those pieces to make it work so html being the structure of all this stuff here just like hey we have some words here hey we have you know a number here things like that css being here's what everything looks like here are background colors here's our padding stuff like that and javascript which is what controls the actual interaction here so what we're going to do um is take this apart piece by piece um we're just going to say there is some styles here there are some custom styles just trust that they work just trust they work now maybe in a later video we'll go over what things necessarily mean maybe when we tweak it later we'll go over what things mean but for now the css just exists and it makes things work so scrolling down here uh we have a nav which is this navigation area up here do we necessarily care about that no um there's a section right here that says hey this is the example here's some text a little bit of a sub head there do we necessarily necessarily care about that no this is the part that really matters to us this section here id scrolly all the way down here to the closing of that section this here is our scrolly telling if we look at id equals scrolly here and we scroll up we see there is specifically a css rule for uh something with the idea of scrolling that's what this hashtag or what this pound symbol means it means if you find something on the page with the id of scrolly all of these rules apply to it what do these rules mean who knows who knows but that is hey here this is the scrolly probably something important if you wanted to make multiple pieces of scrolly telling on here all stacked on top of each other what you would probably do is copy and paste this whole section and then put a new one right below it you might give it a name like scrolly dash 2 if you were being uncreative hopefully you would name it something a little bit more interesting than that and then you would go up here and you'd say okay along with scrolly who knows what this means but now i'm going to have another one scrolly dash 2. but we don't need to have multiple scroll italia experiences right now if you want to get fancy you might do that for now we just want to focus on that one so i did undo a few times got rid of that extra css got rid of that extra html just know everything from here is what's important now in our scrolling telling there are two different main pieces number one is the thing that sticks to the background this thing that stays the same as you are scrolling down the page i uncreatively renamed this to be sticky thing because it is a thing that sticks on the page as you scroll that's part one part two are the steps the steps are the different segments that scroll either over in this example um or beside your sticky thing when you are doing your scrolling telling sometimes for example for basic there is no sticky thing it's all just different steps first step second step third step but generally speaking if you're doing something a little bit fancier it is based on having both steps one step two step three step four steps uh and some sort of sticky thing in the background there's probably a real name for this but i don't know what it is so this is how our html is formatted we have our sticky thing right here that starts off with a paragraph tag in it has a zero in it so see it right there and then we have all of our steps our steps are inside of an article tag and that's in order to keep them together this could honestly be any kind of tag it could be a div tag that has a certain class on it anything like that but it's important that if you are using this code you keep it as an article because if you go up here you see there is some sort of css that is based on that article so you just you want to keep that the same class sticky thing keep that the same the p tag inside of the sticky thing it has a size it has a thickness it has a color step you cannot change any of these class names because of the fact that they are all steps this says do something to the class step do something to the class sticky thing so if we change this i said oh i want to make this a picture of a mountain i'm going to change it to class equals mountain when i refresh suddenly this doesn't stick to the top of the page the number isn't big in the middle the background color changes so just know you got to keep these classes the same if you end up changing them you got to change them up there you can change all this data step stuff that's fine it's not really going to affect anything right now in terms of styles just know the classes have to stay the same okay now we have two javascript libraries that are being included here um okay we also have id outro it's just a bunch of empty space at the end of the page the reason being if you don't have a bunch of empty space at the bottom of the page this line right here might never trigger that last step and so it might never get highlighted might never update the background you'll be stuck at the second to last step forever so you just add a little bit of extra space to help people scroll on down below so now we have two different javascript libraries being included here one of them is a tool that allows you to know when things interact with other things in our case we want to know when this line right here crosses over this box right here so when this line crosses our first step our second step our third step just a little helper that makes that happen easily next up we have scroll lama scroll on me scroll lama is the library that we are using here um it's it's a delight uh it kind of stays in the background so you don't really necessarily have to do that much um it's pretty clean it's pretty nice um you can do all kinds of more complicated stuff with it but we're sticking with a pretty simple example here we are not using d3 for convenience that line was there that line is not is not there anymore because i got rid of it so um this is where all of our javascript lives this is all of the stuff that we are doing to actually make this page interactive if i got rid of everything inside of the script tag and then i refresh this page it still looks like this it looks pleasant it looks like a scrolling telling experience but the background's never changing the number in the background's never changing there's none of this highlighting none of that stuff so that is right here us using scroll lama the very first thing that's happening here at the top of where scroll-on is existing is just grabbing things off of the page and saving them for later so a big part of javascript is called the dom the document object model and it's just the idea that there is stuff on the page so if we look up here on this page we have a sticky thing which is a div we have all these steps which are divs we have the article that's a div we have the section with the id scrolly stuff like that and what happens is we want to say hey web page let's do something with this scrolling area as we scroll let's change the value of this p tag that's inside of sticky thing in order to be able to say we want this number to change we have to be able to say let's grab this number off the page let's let javascript do something with that number and so the way that happens is code like this this is the thing that was changed from d3 the way it worked with d3 was d3 dot select but these days this stuff is kind of built in the javascript so you don't need to do that so what i'm going to do is i'm going to copy this code and then i'm going to go back into my browser and i'm going to go view developer javascript console the javascript console could show up on different places for you depending upon how your computer is set up it might show up on the right hand side probably not on the left hand side i'm going to put mine on let's do the right hand side probably pretty normal place for it to be um i'm just going to copy this code and we're going to see what it does it's saying hey document query selector whatever that means main i'm going to run it hit enter and it looks like a little bit of html here main nav section section section what we're doing is we're saying hey web page go grab pretty much the entire page if we look at the html here we see that everything is inside of this main tag so all we're doing here is we're saying hey grab that main tag there this next line here main dot query selector pound symbol scrolly if we run that we can see okay it's not selecting this part up here it's not selecting this part down here it's just selecting the part where the scrolly telling happens selecting our sticky thing it's selecting our steps all of that the reason why it does pound symbol scrolly is because that's how you talk about things that have ids it's the exact same thing as the css selector up here we're just saying grab the thing with the id of scrolly but instead of document which is the entire page we're saying main now this we said the original code in the page was main equals this and then you can say now that we've gotten this main let's go grab the thing inside of it let's go grab the scroll inside of it so let's say there were multiple things with the idea of scrolling on the page we only want the one that's inside of main and then after that we save that as the variable scrolly so we can talk about it later and then we say hey find the sticky thing that is inside of scrolly and save that as sticky so same thing it just grabs that sticky thing that's hiding in the background there and then we do the same thing for the article same thing for the steps we say hey grab that article i don't think we really need to get that specific and then we say hey article there's a little bit of a change here we do query selector all dot step if you look at this code here article queryselectorall.step instead of query selector query selector all will get all of the things with the class of step that are inside of that article if we just did query selector it would just run it and it would only grab one of them whereas query selector all is going to say hey we care about all of these different steps now this magic thing over here is the javascript console it allows me to run javascript one line at a time and not have any lasting effect on the page so when i refresh this all of the code that i typed in here goes away um it's very very useful to find bugs in your code if there are errors in it they'll show up over here it's very useful to kind of try out code and just see if it works or not before you actually type it in the code area over here so for example let's say i wanted to grab this one right here i could say document query selector and instead of saying hey grab main then grab the thing inside of main then grab the thing inside of scrolling then grab the thing inside of the article like that i could just say find me a paragraph tag but there are probably multiple paragraph tags in here right so instead i can say find me the paragraph tag well sticky thing find me the paragraph tag that is inside of sticky thing and there we go it's there and i can use this to make changes to the page instead of you know writing styles up here if i wanted to somehow for some reason do it with javascript i could say change the style of the color to be read and that would say hey go into the thing with the class of sticky thing find the paragraph tag in there and then change it to be the color red and then when i refresh the page it goes away but again if i type this code again it's going to run it now one thing to pay attention to is you might think you're good at css right you think you know what position is left width background color all of these things once you've changed the color if you try to change the background color let's say you say i know background colors background dash color so i'm going to go in here and i'm going to say dot style dot background dash color equals red i'm going to move this down to the bottom so we can see the whole line at once if you run this it's going to give you an error why is that well this right here is javascript and when you write javascript you cannot put hyphens or dashes in really anything if you were converting something from css to javascript we're going to change it to background capital c color and we can't really see that let's turn it to green instead it's ugly but it's fine you could also know that by if you type background it's going to suggest a lot of things to you so just let the browser kind of steer you and it says hey do you want you know background color and you say yes sure background color blue we are good to go and then because this javascript console we're just using it to test out code when we refresh it all goes away and we're back to our standard here all right so we set color we set background color let's get back to looking at what happens in here so right here this is us using the scroll lama library why is this code like this well because when you go to the scroll on the web page it tells you this is what you do when you use scroll llama you just say hey let's start using scroll lama so this isn't something that you can change don't think too hard about it just it's fine it's fine right here this is a function it's a chunk of code that is read by itself you know this is the beginning and this is the end because of these curly braces they're kind of hugging the function in here they're hugging this chunk of code this chunk of code is called handle step enter we can assume it's what happens when a step is entered but for now we're just going to ignore it just know that this is one big chunk of code we have another function here called init it is one big chunk of code we can also ignore that because we're not using it yet we know this is the beginning we know this is the end because those curly braces are surrounding it we know init is the name because it's the thing that comes after function and then down here at the very very end of the script tag we have init and then empty parentheses after it and what this means is hey javascript let's go run init let's go do it's going to be great and so even though we just ignored this chunk of code this function init now we're going to go back and take a look at it so we hop into init and we start running this code here um scroller this if this seems familiar it's because up here this is us saying hey this is scroll lama this is our scroller this is the thing that's going to be in charge of making our scrolling happen now if you come to javascript from the world of let's say python where indentation is very important new lines are very important things like that javascript is a little looser a little bit freer this is all one line of code another way for this line of code to look could be this but because you know javascript is nice and fun and things are maybe sometimes a little bit easier to read based on how you format them javascript will let us format however we want indentation lack of indentation doesn't really matter i could you know indent that all the way over here i could put these two things on the same line it wouldn't be a big deal so what's happening here with this scroller is it's just saying hey we want to set the scroller up here are all of our options what what is going on here what do these different options do offset 0.33 if we look at this page we have this little trigger right here this little annotation that says hey when you cross one of these steps with this line you are going to trigger you're going to say i'm going from step one to step two to step three right if we change this number that trigger is gonna move further down the page this is just a stylistic thing based on the way that you want your scrolling telling to work you could put this anywhere i'm going to leave it at 0.33 debug can be true or i'm going to assume it can be false if we set it to false that trigger disappears but it still works so that's just our ability to debug our page to see what's going on and now this step here what it does is say the steps on the page are the class of step inside of the article tag inside of the thing with the scrolly id if you put spaces between these that means this inside of this inside of this so this is our class of step it's inside of our article tag it is inside of id equals scrolly if you wanted to have multiple different scrolly telling experiences on the page this might be something that you need to change and next up we have on step enter handle step enter well we know handle step enter because we saw it before it's the name of a function it's the name of a chunk of code but what is on step enter something to know about javascript is javascript has a few very important concepts to know about one of them we talked about already the dom the document object model it's the idea that there's stuff on the page a step an article a main a document and you can grab them you can say give me that main thing give me all those steps give me those we're gonna do something with them we'll change the color we'll do whatever we want to them another very important thing to think about in javascript are events events and event listeners events are things that happen on the page if i click that's an event if i hover it's an event if i scroll that's an event if i type in a form field that is an event there are a ton of different javascript events let's find a nice long list of them so changes clicks mouse overs mouse outs key down on load things like that there are a million and based on the code you are writing the libraries you're working with you're going to be doing different things with these events so if we skip down a little bit down here we're going to listen for an event named resize and when the page is resized we're going to say hey scroller the page got resized we're going to run this chunk of code which we can't see this is just the scrollama's ability to understand that the page got resized so this is one way of listening for an event and making something happen when the event happens this is the normal javascript way we say hey window it's kind of like document it's just like the page itself we say hey window please listen for the resize event and then run this code our scroller on the other hand we're saying hey when the step enter event fires or is triggered or happens when that overlap happens here this is us entering the step we enter the first step we enter the second step we enter the third step when that happens run this code here so it's the same thing with add event listener the name of the event here is resize name of the event here is probably step enter this is us adding a listener this is us adding a listener what do we run when resize happens scroller.resize what do we run when step enter happens handle step enter these are just different because one is a library one is javascript or raw javascript and they just decided to write it differently so what's important to us when we are going through here is we are scrolling strolling scrolling things are happening when we are scrolling wires are things happening because every time we trigger step enter right here step enter step enter step enter step enter handle step enter is happening let's look at this code here so when handle step enter happens there's this thing called response who knows what that is we got this element here whatever that is then in theory we go through all of the steps and remove is active so i guess there's some class that's called is active if we go up here we can see it is active sets the background to goldenrod so when we scroll over we say hey remove is active from all of these steps but then i guess add is active to the step that we're on perhaps so as we see if we do a little bit of inspecting here this is our step right here it's not highlighted it's not rod we can see it highlighted down here as we scroll over it bam is active is added to it and as a result of it having that class the background color changes what is l really though well let's look at it how are we going to look at this l we're going to use console.log you cannot use print here if you come from the python world um print is going to actually try to print the web page for you console.log is going to send something to the javascript console so what i'm going to do is i'm going to open the javascript console i'm going to refresh the page and as i scroll down when i do this first step and handle step enter fires bam this is what our step is bam this is what our step is so if we highlight here we see oh this is the step we just went to if we highlight here oh that's the step we just came out of so l is our element it is our step that we are currently on this is going to be our l this is going to be our l this is going to be our l this is going to be our l now our final line here sticky query selector p inner text equals l dataset dot step let's take this one at a time sticky query selector p says find me the query find me the the paragraph tag that's inside of the sticky element what's the sticky element oh it's when we found the sticky thing that's inside of our scrolly so what is that it is this background area here this background here that we can't see very well but it is there so this whole thing is sticky thing and then this right here is the text of our um p tag now when you want to update the text of something you do dot inner text dot intertext equals and then you set it to l.dataset dot step if we scroll back up we see that every step has something called data dash step data step data dash step let's change it let's change it and refresh the page so it starts at zero but once we hit this first step it now says one one one so somehow the code from here this data.step is being moved into here and that's the code right here we're saying hey go to the l grab the data out of it data dash step data step is nothing fancy we could say um data dash color equals red data dash color equals green data dash color equals blue data dash color equals red and we could change it to be l dot data set dot color and then zero hey it's red hey it's green hey it's blue so anytime you want to you know make something change here make something change on the background you can add it as a data attribute inside of your step and use l.dataset in order to grab it now what i want to do here is i want to use both data step and data color in kind of a fun way right now our background area says red or it says blue or it says whatever i want to make it something a little bit more exciting we have these numbers here let's say we want to actually make them a sentence let's say we want to say l.dataset.what was it step so step number i'm just going to add that on the end of there so now it's going to take the data dash step and it's going to put it in this sentence here refresh step number one one one step number two two two step number three three three step number four four four now if you know me you know that i hate something that looks like this i love filling the blanks i love us saying step number bam let's just put something right there the way you do that in javascript it's similar to python if you come from the python world um instead of quotation marks we're going to use back ticks these are not single quote marks these are back ticks they point the backwards way on my standard american keyboard they're next to where the tilde is what i do is these are called template literals i say step number l dataset step and then i put a dollar sign there so this is how you do fill in the blanks with javascript it's going to take this sentence and say step number l data set dot step i'm actually going to change this back to smaller numbers for our next step and so now when i refresh it's going to do a fill in the blanks with that step number step number one step number two step number three step number four now why wouldn't we just write step number one step number two step number three in there give me a second and and i'll get to that the next thing we want to do is what we want to do is we want to change this background color based on data color so where is where is this background color is the background color um actually on the p or is it on sticky thing so okay it is it is on sticky thing it says we have sticky thing here background color is that if i change it to red it would turn red okay so what we're gonna do when we come through i'm gonna say hey when i hit this step i could say sticky change your background color to be for example red let's say we always wanted it to be red we could have this line here remember you do dot style dot the name of the style um and because this is javascript not css we do background not dash color but background capital c color so we're going to refresh this we're going to scroll down and when it fires that event runs that code bam turns red still red still red still red finally enough we saved data color data color data color so we can say hey take the element that you're currently on grab the data from it why is it not l.data i don't know it's l.dataset and then grab the color attribute from the data so we're saying data color data color and now as we scroll it's going to be automatically updating both the text of the background and the background color of the background now we're going to do one more thing to it one more thing to it we're going to change the size of this text so let's see the size of this text is under sticky thing p so we're going to be changing the font size what we could do sticky query selector p means hey go find the paragraph tag inside of it we want to change the font size so it's font size and let's say we just wanted to make it three rems and you're like what's an rem and i'm like uh a jangle pop band from georgia but additionally it's just some sort of measurement who knows what it means it's fine just stick with it so i always think it's best to set things to just like a static number first or a static color first test to make sure that code works and then adjust this here so what we're going to do refresh as we fire that event bam the text has now gotten small what i want to do is use l.dataset.step as a fill in the blanks here so instead of you know three pixels or three rems or nine rems i'm going to say let's do a fill in the blank with l.dataset.step so it'll be one rem two rems three rems getting bigger every time why does this not change color like this changes color oh it's because we need to do back ticks here back ticks not single quotes not double quotes but back ticks will let us do fill in the blanks in javascript so now i'm going to go back i'm going to refresh and now we'll start with some small numbers a little bit bigger a little bit bigger biggest now the most annoying thing that's happened so far in this um is the fact that as i am scrolling i can't actually see what's happening here i can't see what's going on behind these steps and that's because there's not enough spacing in between these steps here how is it that we can add spacing to these steps well i'm going to open up the inspector and i'm going to look at them i'm going to say okay we have a step here and i want to add some sort of spacing below it right here it says margin 0 auto 2 ram auto and you're like what you can look at lay not layout computed it'll give you a little bit of a hint it's saying here's what the margin border padding is here's the content size what margin is if you give it four different numbers it goes around to the four different sides um and does you know like top right bottom left something like that i find that very confusing i'm going to click here and say margin bottom let's say 10 rems and you're like what's an ram and i say it doesn't matter 10 just means a lot of it and so now if i have margin bottom 10 rem i get a little bit more space there a little bit more space there maybe 15 or so looks great i refresh the page though goes away so i'm going to go back to my css up at the top i'm going to say hey step margin bottom 15 rem they set the margin here we could change it here um but i just want you to know that if you do a setting below another setting the one on the bottom is more powerful it overwhelms the one on top so we're going to have margin bottom 15 ram and there we go looking pretty good another thing we might want to do is we have these backgrounds here these backgrounds don't look great um this color is a little bit like we can't see through it right it's uh we want to be able to see maybe a little bit of the red a little bit of a blur there the way you change this is if you go over here you can see this changes the opacity of the background now the thing you're going to want to do is you're going to click this little box here you're going to adjust your colors adjust your opacity slider and when you get to something that you like oh that's actually not going to be good for you yeah this is what you're going to do here the issue is if you are using just html colors here you can't do opacity um in order to do oh wait can you with the one two three four five six oh wow that's fascinating so these last two numbers here are actually the opacity which go from zero zero um to ff i guess huh fascinating didn't know that i was going to tell you to do rgba where you say here's you know an rgb number an rgb number an rgb number and then an alpha number but no it's fine we'll just stick with this so slide this around pick the color that you like and then just copy this here go back and say my step p i want the color to be this color actually is that yeah that's just the step now we might have to change this one right here well we'll see yeah we're going to change this one right here step p that's the color you're going to move to there and now ta-da you can see things through things a little bit here you would also have to change it for the goldenrod one in which case we can just change this to some other number such as fff880 just one of my favorite colors and there we go oh maybe the first number is alpha who knows whatever however it works just know you can highlight it and you can change it and grab grab the number there i would probably change the color format to something like this in which case you can grab something that's a little bit more readable and then you'll be able to say okay 77 let's change this to like four percent or something like that and you know if you wanted to change four percent that's going to be your opacity there it's a little bit easier to understand as you're changing those numbers anyway do that however you want just know that that is a way to change the background color for your steps so there's a little bit of opacity there so we got a little bit of opacity uh you could fool around with a margin here padding here in order to make these different sizes um finally we're going to change one final thing and that is we're going to put a background image on this background here so instead of using a background color we are going to set a background image it is going to be mountains.jpg we're going to say i forgot to put a symbol back there the the semicolon i'm going to say hey go into the images folder grab mountains.jpg and then set it as the background image i refresh oh sorry did that for the wrong one i made the step have the background image it's not the step that should have the background image it is the sticky thing obviously so i'm going to refresh and now we're going to see we have this image back here how delightful um we could also do background and then url this here doesn't matter you can do either one it's going to work when we look at this background image there's a lot more image here that we would like to see so the other attribute we want to change is background size sorry not position background size we're going to change it to cover background size cover is going to do the best possible fit to fit this inside of our uh our little sticky thing back here um we can also do background size contain which is going to make sure that the whole image fits there but if you put the whole image there it's going to repeat so we're going to stick with color we can also do background position 50 50 and that's going to center can i also do center center yeah background position center center which is going to center the image it's going to crop it on the top crop it on the bottom instead of if we don't have background position there it's going to be starting it from the top left-hand corner so depending upon what your image looks like one of those is probably going to work for you generally speaking nine times out of ten we're scrolling telling maybe 95 times out of 100 or what 19 out of 20 you're going to use background size cover background position center center now when you're doing scrolling telling um one thing you might want to do is change the background image as you are scrolling through here that would be a nice thing to do so maybe you have this have a certain image this had a certain image and then the image changes suddenly once you get to this one here and the way you do that is the same way we change the color same way we change the text on the step with this kind of code here but instead of changing the background color you might be changing let's say let's say the background image for example um so any anything else you want to do here no i think that that pretty much has you most of the way there in terms of your scrolling telling abilities i will upload this code probably to a gist maybe to to google drive something like that and then you can just fool around with it so hop on to the documentation um especially if you want to have multiple different instances of scrolly telling going on here just to play back to something i said very very originally all of this is happening because of this scrolly id here we're saying we have something with the id of scrolly it looks like this here is our scrolly it has a sticky thing in it it has a bunch of steps and then down here we say hey when we scroll through this let's set this up to be all of the steps inside of this scrolly here i'm going to say if you want to make a second scrolling telling piece in here that is underneath of this first scrolly telling thing here i'm going to suggest that you copy and paste this whole section here and then you just start making another one you know scrolling 2 or something like that you'll have to update your css up here you'll have to you know maybe add another one of these here to set up a second scrolly thing do you need another scroll llama scroller can you just use it with this scroll on the scroller who knows you'll have to experiment um find out things like that if you have comments you can bring them up in the comments if you have issues with the code i wrote here inside of the overlays inside of the you know side scrolling things you can bring those up in github issues on the the github repository but generally speaking scroll lama pretty solid simple library i have faith that using you know data attributes here and then bringing them up again down here in the handle step enter you should be able to get a decent amount of scrolling telling in there play around with the styles make it your own make it look nice and then when you finally end up figuring it out when you finally end up posting it uh either use bottle jack or github pages to post it on the internet um and then throw a link in the chat i will make a couple posts that kind of walk you through how to move all this stuff to the internet if you're not sure how to do that so good luck let me know how it goes

Channel: Jonathan Soma

Views: 1,037

Keywords:

Id: d7wTA9F-l8c

Length: 51min 1sec (3061 seconds)

Published: Wed Jun 02 2021