Parallax background

Developer
James Crockford
Size
3,413 Kb
Views
18,216
  1. Parallax background Previews
  2. Parallax background HTML Codes
  3. Parallax background CSS Codes
  4. Parallax background JS Codes

How do I make an parallax background?

Simple parallax image scroll. What is a parallax background? How do you make a parallax background? This script and codes were developed by James Crockford on 18 November 2022, Friday.

Parallax background Previews
IQ Test

Parallax background - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax background</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0;
}
section { text-align: center; display: flex; justify-content: center; align-items: center; border-top: solid 1px #404040; height: 800px; background-attachment: fixed; background-size: cover;
}
div { max-width: 35%;
}
h1, p { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 100;
}
p { color: #888; line-height: 1.618; font-size: 24px; margin-top: -110px;
}
h1 { color: #282828; font-size: 200px; margin-bottom: 30px;
}
.section--dark { background-color: #202020;
}
.cat { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), url("http://lorempixel.com/g/1600/900/cats/");
}
.sport { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), url("http://lorempixel.com/g/1600/900/sports/");
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="section--dark"> <div> <h1>Cat</h1> <p>a small domesticated carnivorous mammal with soft fur, a short snout, and retractile claws. It is widely kept as a pet or for catching mice, and many breeds have been developed.</p> </div>
</section>
<section class="section--dark cat"></section>
<section class="section--dark"> <div> <h1>Sport</h1> <p>an activity involving physical exertion and skill in which an individual or team competes against another or others for entertainment</p> </div>
</section>
<section class="section--dark sport"></section> <script src="js/index.js"></script>
</body>
</html>

Parallax background - Script Codes CSS Codes

body { margin: 0;
}
section { text-align: center; display: flex; justify-content: center; align-items: center; border-top: solid 1px #404040; height: 800px; background-attachment: fixed; background-size: cover;
}
div { max-width: 35%;
}
h1, p { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 100;
}
p { color: #888; line-height: 1.618; font-size: 24px; margin-top: -110px;
}
h1 { color: #282828; font-size: 200px; margin-bottom: 30px;
}
.section--dark { background-color: #202020;
}
.cat { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), url("http://lorempixel.com/g/1600/900/cats/");
}
.sport { background-image: linear-gradient(to bottom, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), url("http://lorempixel.com/g/1600/900/sports/");
}

Parallax background - Script Codes JS Codes

// http://youmightnotneedjquery.com/#on
function on(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, handler); }
}
var cat = document.querySelector('.cat');
var sport = document.querySelector('.sport');
// checks if the element is vertically visible
function isVisible( el ){ return ( ( window.innerHeight + window.scrollY > el.offsetTop ) && (window.scrollY < el.offsetTop + el.offsetHeight ) );
}
function bgScroll( el ){ if( isVisible( el ) ) { el.style.backgroundPosition = '0 ' + ( el.offsetTop - window.scrollY ) / 3 + 'px'; }
}
on( window, 'scroll', function(){ bgScroll( cat ); bgScroll( sport );
});
Parallax background - Script Codes
Parallax background - Script Codes
Home Page Home
Developer James Crockford
Username james_crockford
Uploaded November 18, 2022
Rating 3.5
Size 3,413 Kb
Views 18,216
Do you need developer help for Parallax background?

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!

James Crockford (james_crockford) Script Codes
Name
Yank
Keys
Inline-block masonary
Hexagon Split
CSS breakpoints in JS
Drips
A Pen by James Crockford
Move
Glow loading
Vim logo animated
Create amazing blog posts 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!