{"id":2462,"date":"2013-10-01T03:44:03","date_gmt":"2013-10-01T07:44:03","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2462"},"modified":"2020-10-16T08:57:45","modified_gmt":"2020-10-16T12:57:45","slug":"an-easy-parallax-scrolling-method-2","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/an-easy-parallax-scrolling-method-2\/","title":{"rendered":"An Easy Parallax Scrolling Method"},"content":{"rendered":"

Parallax scrolling is an exciting technique, where, as you scroll, the background image creates the illusion of 3D effect. Here the shortest and simplest b to achieve maximum tremendousness!<\/p>\n

Step 1: Basic Method<\/h2>\n

I used the <section><\/b> tag with the attributes data-type<\/b> & data-speed<\/b>, which were introduced in HTML5 coding and it makes the HTML markup easier to read.<\/p>\n

According to the condition for practice Data Attributes, any attribute that starts with data-<\/b> will be treated as a storage area for private data. Additionally, this won\u2019t affect the layout or presentation.<\/p>\n

\"parallax-scrolling-section\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2463\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

To control the speed of the background images, we\u2019ll use data-type=”background”<\/b>and data-speed=”10″<\/b> as key attributes to specify the necessary parameters.<\/p>\n

Next, let\u2019s add the content within the <article><\/b> tag inside each <section><\/b><\/b><\/p>\n

 <\/p>\n

 <\/p>\n

\"parallax-scrolling-article\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2464\"\r\n <\/div><\/a><\/b><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

let\u2019s add the background images in our CSS for each section.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\"parallax-scrolling-background\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2465\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Upon adding backgrounds for both sections, it should look like:<\/p>\n

\"home\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2466\"\r\n <\/div><\/a><\/b><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\"about\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2467\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

Let us add few more CSS to style to the page.<\/b><\/b><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\"parallax-scrolling-jquery\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2468\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Step 2:\u00a0<\/span>jQuery code<\/span><\/p>\n

Yes, Using the jQuery code, we\u2019ll begin with the standarddocument.ready()<\/b> method to ensure that the page has loaded and is ready to be manipulated.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Now, the first thing happening below is that we\u2019re iterating over each <section><\/b>in the page, which has the attribute data-type=”background”<\/b><\/b><\/p>\n

 <\/p>\n

 <\/p>\n

\"parallax-scrolling-ready\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2469\"\r\n <\/div><\/a><\/p>\n

\"parallax-scrolling-ready-func\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2470\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Add another function, .scroll()<\/b>, inside .each()<\/b>, which is invoked as the user begins scrolling.<\/p>\n

\"parallax-scrolling-scroll\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2471\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

We need to determine how much the user scrolled up, and then divide the value by the data-speed<\/b> value, mentioned in the step1.<\/p>\n

\"parallax-scrolling-ypos\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2472\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

$window.scrollTop()<\/b>: we are getting the current scroll value from the top. This initially determines how much the user has scrolled up. $bgobj.data(‘speed’)<\/b> refers to the data-speed<\/b> assigned in the beginning, and yPos<\/b> is the final value that we need to apply for scrolling. However, it will be a negative value, because we have to move the background in the opposite direction of the user\u2019s scroll.<\/p>\n

\"parallax-scrolling-pos\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2473\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

The final thing that we need to do is put together our final background position into a variable. In order to keep the horizontal position of the background as static, we have assigned 50%<\/b> as its xPosition<\/b>. Then, we added yPos<\/b> as the yPosition<\/b>, and, finally, assigned the background coordinates to our <section><\/b>background: $bgobj.css({ backgroundPosition: coords });<\/b>.<\/p>\n

 <\/p>\n

Your final b might look like:<\/p>\n

\"parallax-scrolling-final\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2474\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Yes, we have done it! Try it out by yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"

Parallax scrolling is an exciting technique, where, as you scroll, the background image creates the illusion of 3D effect. Here the shortest and simplest b to achieve maximum tremendousness! Step 1: Basic Method I used the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5 coding and it makes the HTML […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[135,146],"class_list":["post-2462","post","type-post","status-publish","format-standard","hentry","category-whats-trending-web-design","tag-css-background-positioning","tag-html5-with-css"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2462"}],"version-history":[{"count":74,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2462\/revisions"}],"predecessor-version":[{"id":3908,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2462\/revisions\/3908"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}