Header/Footer Parallax Effect

Developer
Maheshc
Size
2,778 Kb
Views
22,264
  1. Header/Footer Parallax Effect Previews
  2. Header/Footer Parallax Effect HTML Codes
  3. Header/Footer Parallax Effect CSS Codes
  4. Header/Footer Parallax Effect JS Codes

How do I make an header/footer parallax effect?

What is a header/footer parallax effect? How do you make a header/footer parallax effect? This script and codes were developed by Maheshc on 27 November 2022, Sunday.

Header/Footer Parallax Effect Previews
IQ Test

Header/Footer Parallax Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Header/Footer Parallax Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="scroll-animate"> <div id="scroll-animate-main"> <div class="wrapper-parallax"> <header> <h1>Header</h1> </header> <section class="content"> <h1>Content</h1> </section> <footer> <h1>Footer</h1> </footer> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Header/Footer Parallax Effect - Script Codes CSS Codes

#scroll-animate-main
{ width: 100%; left: 0; position: fixed;
}
#heightPage,
#heightScroll
{ width: 10px; top: 0; position: absolute; z-index: 99;
}
#heightPage
{ left: 0;
}
#heightScroll
{ right: 0;
}
header
{ width: 100%; height: 100%; background: url(http://www.hudsonmarinho.com/lab/header-and-footer-parallax-effect/bg-header.jpg) no-repeat 50% 50%; top: 0; position: fixed; z-index: -1;
}
footer
{ width: 100%; height: 300px; background: gray; bottom: -300px; position: fixed; z-index: -1;
}
.content
{ height: 1000px; min-height: 1000px; background: #ededed; position: relative; z-index: 1;
}
.wrapper-parallax { margin-top: 100%; margin-bottom: 300px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
h1{ width: 100%; height: 100%; padding: 0; margin: 0; text-transform: uppercase; text-align: center; font-family: Helvetica; font-size: 150px; color: #fff;
}
header h1{}
.content h1{ line-height: 1000px; color: #999;
}
footer h1
{ line-height: 300px;
}
header,
footer,
#scroll-animate-main
{ -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1); transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

Header/Footer Parallax Effect - Script Codes JS Codes

function scrollFooter(scrollY, heightFooter)
{ console.log(scrollY); console.log(heightFooter); if(scrollY >= heightFooter) { $('footer').css({ 'bottom' : '0px' }); } else { $('footer').css({ 'bottom' : '-' + heightFooter + 'px' }); }
}
$(window).load(function(){ var windowHeight = $(window).height(), footerHeight = $('footer').height(), heightDocument = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20; // Definindo o tamanho do elemento pra animar $('#scroll-animate, #scroll-animate-main').css({ 'height' : heightDocument + 'px' }); // Definindo o tamanho dos elementos header e conteúdo $('header').css({ 'height' : windowHeight + 'px', 'line-height' : windowHeight + 'px' }); $('.wrapper-parallax').css({ 'margin-top' : windowHeight + 'px' }); scrollFooter(window.scrollY, footerHeight); // ao dar rolagem window.onscroll = function(){ var scroll = window.scrollY; $('#scroll-animate-main').css({ 'top' : '-' + scroll + 'px' }); $('header').css({ 'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%' }); scrollFooter(scroll, footerHeight); }
});
Header/Footer Parallax Effect - Script Codes
Header/Footer Parallax Effect - Script Codes
Home Page Home
Developer Maheshc
Username maheshc
Uploaded November 27, 2022
Rating 4.5
Size 2,778 Kb
Views 22,264
Do you need developer help for Header/Footer Parallax Effect?

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!

Maheshc (maheshc) Script Codes
Name
CSS 3D Solar System
Sequence.js - Sliding Horizontal Parallax
Simplest Parallax effect ever.
Animated scroll-dependant menu using scrollMonitor
Parallax scrolling background
A Pen by maheshc
GTA 5 CSS3 Parallax
Create amazing art & images 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!