![]() We are going to slightly tweak our css for the. data-center is actually not doing anything as it’s value is exactly half way between top and bottom, but experiment with different values and see how the data-center affects the whole animation. That’s why we are defining both data-top-bottom and data-bottom-top. The difference between #slide-1 and #slide-2 is that the second slide is scrolling through the whole viewport, but the first one loads already visible. Here we are animating the background image at the same speed to keep things consistent. Section 2Ĭopy and paste the following lines of code to enable animations on the second slide. Using this attribute correctly enables you to have a precise control over the timing of your scrolling animations. The data-anchor-target is a very powerful attribute, which enables you to define exactly when should your animation start and finish in relation the defined target element. ![]() ![]() The text is scrolling with the page until the #slide-1 h2 hits the centre of our browser and then animates quickly of the screen and fades out, which we have defined in data-top="bottom: 1200px opacity: 0". If that’s the case, download my Skrollr Cheatsheet or: If this is your first project using Skrollr, you might find the data attributes a bit confusing. What we are telling the browser is to change the background image position from 50% 0 to 50% -100px, which means that the image is moved up by 100px from the start of the scrolling until the bottom of the #slide-1 hits the top of the browser viewport. Copy and paste the following lines into your index.html. Now we have to add some data attributes to our sections to see Skrollr in action and to see our background image and content to move at a different speed. Refresh Skrollr after resizing our sections Step 2 – Skrollr.jsĪdd the following lines to your main.js to enable Skrollr.js and to refresh it after our sections are resized to 100% of the height of the viewport. Next we’ll initiate the Skrollr.js and start creating our parallax scrolling effect. If you view the index file in a browser now, you will see 4 sections scrolling as they would normally and the background image fixed as defined in our stylesheet. In the _main.js we have a simple script which preloads our background images (thanks to ImagesLoaded) and resizes each of the sections to be 100% of the browser viewport. The style of the text is also slightly different on each of the sections, that’s purely to make it nicely readable. hsContainer (home slide container) which is by default horizontally and vertically centered.Įach section has a custom background and the content is repositioned to the desired position. The code in index.html is pretty simple, we have 4 sections with a background image. Before we dive in, lets quickly explain what we have for start. That’s where we will be doing all our updates. Open the index.html, /css/main.css and /js/_main.js files in your favorite code editor. how to precisely control the timing and duration of your animations.how to animate background image at a different speed then page scrolling.how to setup your html for a parallax website.View Demo → Download Starting Files ↓ Quick overview I will try to explain everything in more detail and you can also download the starting files to follow the tutorial step by step.įirst have a look at what we will be creating and download the starting files. Based on your feedback I have decided to create another tutorial, this time aimed more towards a junior and mid developers. I have received many messages and a positive feedback regarding my recent parallax website tutorial.
0 Comments
Leave a Reply. |