Basic parallax

Developer
SNÖGRAFX
Size
2,269 Kb
Views
38,456
  1. Basic parallax Previews
  2. Basic parallax HTML Codes
  3. Basic parallax CSS Codes
  4. Basic parallax JS Codes

How do I make an basic parallax?

What is a basic parallax? How do you make a basic parallax? This script and codes were developed by SNÖGRAFX on 26 August 2022, Friday.

Basic parallax Previews
IQ Test

Basic parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic parallax</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="home" data-type="background" data-speed="2" class="pages"> <article>Jupiter</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages"> <article>Saturn</article>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic parallax - Script Codes CSS Codes

body { margin: 0; font-size: 3em; color: white;
}
#home { background: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg') 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative;
}
#home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%;
}
#about { background: url('http://upload.wikimedia.org/wikipedia/commons/2/25/Saturn_PIA06077.jpg') 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%;
}

Basic parallax - Script Codes JS Codes

$(document).ready(function(){ // Cache the Window object $window = $(window); $('section[data-type="background"]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { // Scroll the background at var speed // the yPos is a negative value because we're scrolling it UP! var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); // window scroll Ends });
});
document.createElement("article");
document.createElement("section");
Basic parallax - Script Codes
Basic parallax - Script Codes
Home Page Home
Developer SNÖGRAFX
Username snografx
Uploaded August 26, 2022
Rating 3
Size 2,269 Kb
Views 38,456
Do you need developer help for Basic parallax?

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!

SNÖGRAFX (snografx) Script Codes
Name
Clickable back element
Mondrian Flexbox
CityPlanner fallback
CSS Close button
CSS X
Huzzo spinner
CityPlanner Logo Loading Animation 2017
Norkart CityPlanner ribbon logo
Hide on inactivity
Google-style CSS options button
Create amazing love letters 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!