![]() Everyone needs that awesome friend to send them amazing stuff. Please give this post a share if you enjoyed it. In the part after that we will deploy it to the NPM repositories using all the best practices for open source projects. In the next part of this series we will go back to the library and write some tests for it using jest. The code is now much easier to read and much easier to maintain. There we have it folks, we have fully converted the original spaghetti code into wonderful clean code that uses our library. ![]() Again we also have a trigger to add the progress line in, which is done by calculating the percentage progress through it and translating the bar down accordingly. All we are doing is resetting app translation to 0 if we are before the section and if we are inside the section we are translating the whole app container at the same pace as we are scrolling and then offsetting each image by different amounts to give a parallax effect. This code should be starting to look pretty familiar to you. Then create an instance of the ParallaxProvider class and pass it an array of section objects: 1Įxport default new ParallaxProvider ([ Check out the demo to get a better idea of it. querySelectorAll ( '.img' ) const progressLine = document. Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. querySelector ( '#app' ) const imgs = document. querySelector ( '.turtlemascot' ) const app = document. querySelectorAll ( '.secondpage h1 span' ) const logoimg = document. querySelector ( '.firstpage h1' ) const phaseTwoTitleParts = document. querySelector ( '.background' ) const title = document. querySelector ( '.middleground' ) const bg = document. querySelector ( '.foreground' ) const mg = document. querySelector ( '.thirdpage' ) const fg = document. querySelector ( '.firstpage' ) const thirdpage = document. This is exactly the same as we did it in part 1: 1Ĭonst firstpage = document. Start by grabbing a reference to all the elements we will need. The html and css we had from part 1 are perfect, there is no need to change any of that. ![]() In this part we will rebuild that hacky code from part 1 using the library we built. ![]() In the previous part we wrote a nice reusable library to help us solve the problems we faced in part 1. Converting the old page to use the new library ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |