The next one in front again, so we’ll give a positive value of “3”. The second one is far back so it’s going to have a speed of “-2”. The first rock is a small one that sits in front so we’ll give it a fast speed of “8”. In our index.html file, just before the closing body tag, add a reference to the script. We can use Rellax to have these elements scroll at different speeds. To get started we have a space-themed page taking us on a trip to the moon. Let’s use it to bring our page some parallax movement. It’s worth taking a look through how this was built if you’d like to see how a nice simple JavaScript utility can be written and shared. It sets up a loop variable using “requestAnimationFrame”, and then in each iteration uses CSS to translate each object by a calculated offset. Looking into the code we find that it’s using a very similar approach to our “show-on-scroll” code. It’s lightweight and has no need for jQuery, and we can call it in from either local file or by using a CDN. The JavaScript utility Rellax is a handy, and quite simple plugin created by the design agency Dixon and Moe. In this example I’m using a tool called Rellax. This means that if I was to scroll the page up by 100 pixels, the “faster” box actually scrolls something like 130 pixels, and the “slower” box moves about 70 pixels. To it’s left is a box that scrolls faster, and the box on the right scrolls slower. The box in the middle, marked “No parallax” is scrolling at the same speed as the page. In this example we see how parallax works when scrolling a website.Įach of these boxes scrolls upward as I scroll down the page. The technique is popular in many places including video games, where it’s usually seen in the layered backgrounds. If we’re moving, we see objects close to us move faster than objects further away. It’s a popular effect that can be used to create an illusion of depth. * Turn off parallax scrolling for tablets and phones.Parallax movement is when things move at different speeds relative to each other. * Change the link color to #111 (black) on hover */ My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of "UTF-8" I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: The dimensions of the picture are 1341x2063 I've heard to people setting max-height 2063px min-height 1341px. It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project). I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code. It would seem this question has been asked many times over different websites with no real "ah-ha!" answer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |