Parallax Backgrounds

Developer
Andy Vanee
Size
4,281 Kb
Views
18,216
  1. Parallax Backgrounds Previews
  2. Parallax Backgrounds HTML Codes
  3. Parallax Backgrounds CSS Codes
  4. Parallax Backgrounds JS Codes

How do I make an parallax backgrounds?

What is a parallax backgrounds? How do you make a parallax backgrounds? This script and codes were developed by Andy Vanee on 21 September 2022, Wednesday.

Parallax Backgrounds Previews
IQ Test

Parallax Backgrounds - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Backgrounds</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg bg-normal"> <p> normal background </p>
</div>
<div class="bg bg-slow"> <div class="bg-slow-img"></div> <p> slow scrolling background </p>
</div>
<div class="bg bg-parallax"> <p> fast scrolling background </p> <div class="bg-parallax-img"></div>
</div>
<div class="bg bg-normal attachment-fixed"> <p> normal background attachment-fixed </p>
</div>
<div class="bg bg-scaling"> <p> scaling background </p> <div class="bg-parallax-scale"></div>
</div>
<div class="bg bg-normal"> <p> normal background... cleanse the palette </p>
</div>
<div class="bg bg-panning"> <p> panning background </p> <div class="bg-parallax-pan"></div>
</div>
<div class="colophon"></div> <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 Backgrounds - Script Codes CSS Codes

.bg { width: 100%; height: 90vh; overflow: hidden; box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.9); position: relative;
}
.bg p { position: absolute; z-index: 10; top: 20%; left: 20%; width: 42em; max-width: 60%; color: #777; font-size: 1.6em; background-color: rgba(255, 255, 255, 0.7); padding: 0.5em 1em;
}
.bg-normal { background-image: url(https://s169923.gridserver.com/images/fjord.jpg); background-position: center; background-size: cover;
}
.attachment-fixed { background-attachment: fixed;
}
.bg-slow-img { position: absolute; width: 100%; height: 140%; top: -20%; background-image: url(https://s169923.gridserver.com/images/norwaydock.jpg); background-position: center; background-size: auto 100%; background-repeat: no-repeat;
}
.bg-parallax-img { position: relative; width: 100%; height: 160%; transform: translateY(0%); background-image: url(https://s169923.gridserver.com/images/norwaytunnel.jpg); background-position: center; background-size: cover;
}
.bg-parallax-scale { position: relative; width: 100%; height: 100%; transform: scale(1); background-image: url(https://s169923.gridserver.com/images/thecanal.jpg); background-position: center center;
}
.bg-parallax-pan { position: relative; width: 140%; height: 140%; transform: translateX(0); background-image: url(https://s169923.gridserver.com/images/icelandlatte.jpg); background-size: 140%;
}
.colophon { height: 120vh;
}

Parallax Backgrounds - Script Codes JS Codes

'use strict';
//
// $(elem).progress(callback)
//
// calls the callback with a value between 0 and 1 based on the current
// position of the element within the viewport
// 0 when the top of the element reaches the bottom of the viewport
// 1 when the bottom of the element reaches the top of the viewport
//
$.fn.progress = function (cb) { var $me = $(this); var $win = $(window); var currentProgress = 0; $win.on('scroll', function () { var winHeight = $win.height(); var myHeight = $me.height(); var winTop = $win.scrollTop(); var winBottom = winTop + $win.height(); var myTop = $me.position().top; var myBottom = myTop + myHeight; if (winBottom < myTop) currentProgress = 0; // before if (myBottom < winTop) currentProgress = 1; // after var animatedHeight = myHeight + winHeight; var prog = 1 - (myBottom - winTop) / animatedHeight; currentProgress = Math.round(prog * 1000) / 1000; }); var $updater = function $updater() { if (currentProgress > 0 && currentProgress < 1) { cb(currentProgress); } requestAnimationFrame($updater); }; requestAnimationFrame($updater);
};
$('.bg-slow').progress(function (i) { var t = i * 20 - 10; $('.bg-slow-img').css('transform', 'translateY(' + t + '%)');
});
$('.bg-parallax').progress(function (i) { var t = 0 - i * 30; $('.bg-parallax-img').css('transform', 'translateY(' + t + '%)');
});
$('.bg-scaling').progress(function (i) { var scale_amount = 1 + i * 0.5; $('.bg-parallax-scale').css('transform', 'scale(' + scale_amount + ')');
});
$('.bg-panning').progress(function (i) { var pan_amount = 0 - i * 20; $('.bg-parallax-pan').css('transform', 'translateX(' + pan_amount + '%)');
});
Parallax Backgrounds - Script Codes
Parallax Backgrounds - Script Codes
Home Page Home
Developer Andy Vanee
Username andyvanee
Uploaded September 21, 2022
Rating 3
Size 4,281 Kb
Views 18,216
Do you need developer help for Parallax Backgrounds?

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!

Andy Vanee (andyvanee) Script Codes
Name
Transform iFrame
Historical Data
More Perspective
Generic Stock
Harmoniclock-16
Some perspective 2
Responsive Banner with VW
Css bullets
Harmoniclock Spiro
Ambient Animation
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!