Skip to content

Instantly share code, notes, and snippets.

@pascalmaddin
Last active May 14, 2021 14:38
Show Gist options
  • Star 25 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save pascalmaddin/5756515 to your computer and use it in GitHub Desktop.
Save pascalmaddin/5756515 to your computer and use it in GitHub Desktop.
An Image with parallax-effect and with some text, which is fading out while scrolling
<div id="banner">
<div class="wrap-center">
<div class="banner-centered" id="banner-text">
<h2>Hello <strong>We Are Company-Name</strong>, Glad To See You. :-)</h2>
</div>
</div>
</div>
function scrollBanner() {
$(document).scroll(function(){
var scrollPos = $(this).scrollTop();
$('#banner-text').css({
'top' : (scrollPos/3)+'px',
'opacity' : 1-(scrollPos/510)
});
$('#banner').css({
'background-position' : 'center ' + (-scrollPos/2)+'px'
});
});
}
scrollBanner();
#banner {
margin-bottom: 50px;
overflow: hidden;
width: 100%;
height: 500px;
position: relative;
clear: both;
background: transparent url(path/to/image/1.jpg) center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale')";
}
.wrap-center{
margin: 0 auto;
position: relative;
max-width: 73.231em;
}
.banner-centered {
text-align: center;
position: absolute;
display: block;
max-width: 75.231em;
height: inherit;
overflow: hidden;
margin-top: 100px;
}
.banner-centered h2 {
font-size: 5.385em;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 2px;
color: #fafafa;
font-weight: 100;
display: block;
}
@ImShuvo
Copy link

ImShuvo commented Jan 20, 2015

Thank you so much

@coryschadt
Copy link

Nice!

Copy link

ghost commented Apr 15, 2015

which links do i need to include to make it work?
and where do they go??

Great work though!

Copy link

ghost commented Feb 23, 2016

Nice work!

@FranckG28
Copy link

Good ! Nice work !

@CrowleyDavid
Copy link

Awesome stuff! Thanks.

@AshboDev
Copy link

Thanks for this. Very nice little code. I've set up an example here so you can see what it does (I needed to show someone) http://codepen.io/AshboDev/pen/WGKXwg

@Shaz3e
Copy link

Shaz3e commented May 14, 2017

Thanks

@santosluiz
Copy link

Nice work guy, thanks!

@AmosMwangi
Copy link

Awesome.

@PrinzAI
Copy link

PrinzAI commented May 14, 2021

Thanks for this. Very nice little code. I've set up an example here so you can see what it does (I needed to show someone) http://codepen.io/AshboDev/pen/WGKXwg

I've seen your example and for me it shows a white background on an almost white text, It works but if someone wants to see it in action it'll be difficult without changing anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment