Skip to content

Instantly share code, notes, and snippets.

@pascalmaddin
Last active May 14, 2021 14:38
Show Gist options
  • Select an option

  • Save pascalmaddin/5756515 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown

ImShuvo commented Jan 20, 2015

Thank you so much

@coryschadt
Copy link
Copy Markdown

Nice!

Copy link
Copy Markdown

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
Copy Markdown

ghost commented Feb 23, 2016

Nice work!

@FranckG28
Copy link
Copy Markdown

Good ! Nice work !

@CrowleyDavid
Copy link
Copy Markdown

Awesome stuff! Thanks.

@AshboDev
Copy link
Copy Markdown

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
Copy Markdown

Shaz3e commented May 14, 2017

Thanks

@santosluiz
Copy link
Copy Markdown

Nice work guy, thanks!

@AmosMwangi
Copy link
Copy Markdown

Awesome.

@PrinzAI
Copy link
Copy Markdown

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