Parallax Background Scroll

Developer
Ali Klein
Size
3,150 Kb
Views
54,648
  1. Parallax Background Scroll Previews
  2. Parallax Background Scroll HTML Codes
  3. Parallax Background Scroll CSS Codes
  4. Parallax Background Scroll JS Codes

How do I make an parallax background scroll?

What is a parallax background scroll? How do you make a parallax background scroll? This script and codes were developed by Ali Klein on 11 July 2022, Monday.

Parallax Background Scroll Previews
IQ Test

Parallax Background Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Background Scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="parallax1" data-image="http://www.buy-backdrop.com/images/scenic/scenic_32456226665.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax2" data-image="http://wallpaperscraft.com/image/road_marking_asphalt_evening_4644_640x960.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax3" data-image="http://iphonewalls.net/wp-content/uploads/2013/05/Railroad%20Horizon%20iPhone%205%20Wallpaper.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax4" data-image="https://s-media-cache-ak0.pinimg.com/564x/03/ef/6f/03ef6faab41f1008064d06f4d89296b3.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax5" data-image="http://www.buy-backdrop.com/images/scenic/scenic_32456226665.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax6" data-image="http://wallpaperscraft.com/image/road_marking_asphalt_evening_4644_640x960.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax7" data-image="http://iphonewalls.net/wp-content/uploads/2013/05/Railroad%20Horizon%20iPhone%205%20Wallpaper.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article>
<section class="parallax8" data-image="https://s-media-cache-ak0.pinimg.com/564x/03/ef/6f/03ef6faab41f1008064d06f4d89296b3.jpg">
</section>
<article> <h1>Parllax Scroll</h1> <p>Bacon ipsum dolor amet hamburger filet mignon kevin, burgdoggen bacon venison chuck capicola. Picanha pork chop bacon, meatball prosciutto drumstick pork loin andouille corned beef leberkas. Frankfurter drumstick ball tip hamburger burgdoggen. Pork loin biltong turkey bacon landjaeger capicola leberkas frankfurter shank. Flank cupim tenderloin prosciutto, biltong beef ribs cow capicola hamburger pork loin drumstick pastrami strip steak. Kielbasa pork shoulder short loin capicola boudin shank swine. Meatball shoulder ground round pork corned beef bacon, capicola shank venison leberkas ball tip frankfurter bresaola alcatra.</p> <p>Meatloaf ball tip pig chuck shoulder pork chop cupim pork loin filet mignon capicola ham hock ribeye strip steak. Chicken kielbasa cow tenderloin hamburger pork belly ham spare ribs short ribs turkey. Ham hock prosciutto ground round swine sausage sirloin. Corned beef tongue drumstick, pork belly shoulder bresaola boudin strip steak porchetta. Picanha landjaeger pig ball tip strip steak short ribs alcatra biltong drumstick flank jerky shank.</p>
</article> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Background Scroll - Script Codes CSS Codes

html, body { margin: 0; padding: 0; font-family: sans-serif;
}
section { background-repeat: no-repeat; background-size: cover; height: 600px;
}
article { color: #666; max-width: 1000px; margin: 90px auto; padding: 0 20px;
}
article h1 { background-color: rgba(255, 255, 255, 0.5); text-align: center;
}

Parallax Background Scroll - Script Codes JS Codes

var h = $(window).height(), $section = $('section');
function Createparallaxbg(parallaxImg) { var bgImg = $(parallaxImg).attr('data-image'); $(parallaxImg).attr('style', 'background-image:url(' + bgImg + ');');
}
function parallaxbg(position, parallaxImg) { var positionTop = $(window).scrollTop(); var imgPosition = $(position).position().top; if (positionTop > (imgPosition - h)) { $(parallaxImg).css({ 'background-position': 'center ' + ((positionTop - imgPosition) / 2 - (h/5)) + 'px' }); }
}
function initScroll() { $section.each(function(idx) { if ($(this).hasClass('parallax' + (idx + 1))) { parallaxbg('.parallax' + (idx + 1), '.parallax' + (idx + 1)); } });
}
function init() { $section.each(function(idx) { if ($(this).hasClass('parallax' + (idx + 1))) { Createparallaxbg('.parallax' + (idx + 1)); } }); initScroll();
}
init();
$(window).bind('scroll', function () { initScroll();
});
Parallax Background Scroll - Script Codes
Parallax Background Scroll - Script Codes
Home Page Home
Developer Ali Klein
Username AliKlein
Uploaded July 11, 2022
Rating 3
Size 3,150 Kb
Views 54,648
Do you need developer help for Parallax Background Scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ali Klein (AliKlein) Script Codes
Name
Animated Hillary Clinton Donald Trump Logos SVG
Momentum Scrolling
SVG Morph Bounce
Youtube API Multiple Videos
Buzzy Pen
Mobile Nav Menu
Know Your Candidates. Responsive Table with Viewport Widths.
SVG Path Animation
Vertical Scrolling Pagination
Greensock Animated Donut Chart
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!