1/12/2023 0 Comments Parallax js![]() ![]() ![]() Name Last modified Size Description Parent Directory,. Just play around with it to find your "settings"!Īnd the best thing about this, it doesn't need any extra thing like jquery, so it's perfect if you don't want to use many different frameworks, just like me. Index of /wp-content/themes/nielsen/theme/templates/sliders/parallax/js. In this constellation, the text moves down when you scroll down and it scrolls up when you scroll up. You don't really need the -50 and -50% I only needed it for my website, so the text gets centered. So you just call this function from the onscroll-Event () and see the magic happen. I also did it like this, because if I use variables for example "document.getElementById('ID')" it doesn't work. This mirror element will sit behind the other elements and match the position and dimensions of its target object. ![]() Let pos = (window.pageYOffset / speed) // Calculate new positionĭocument.getElementById("parallax-effekt").ansform = "translate(-50%, " (-50 pos) "%)" // just set new positionįirst of all: I know that the 6th line I too long, but it doesn't matter for this example. What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body (or another configurable container). Here is my JS code (I will explain it later): function parallax()Ĭonst speed = 6 // Increase this value so the text scrolls slower (I know it's weird, but it doesn't matter) When I scroll down the text also does and the code only is 7 lines long. So I played around and found something that worked fine. On these two websites\posts, I saw some solutions, but no solution worked for what I wanted to do and I thought it must get easier than that. I used code from these two websites (they are also listed in the question itself): ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |