Webpage Hero header - scroll effects
How do I make an webpage hero header - scroll effects?
Fixed background scaling, text transition. + a bouncy SVG arrow, Yay!. What is a webpage hero header - scroll effects? How do you make a webpage hero header - scroll effects? This script and codes were developed by EricPorter on 28 August 2022, Sunday.
Webpage Hero header - scroll effects Previews
Webpage Hero header - scroll effects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Webpage Hero header - scroll effects</title> <link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='heroEffects'> <div class="bg"> <div class="arrow bouncy"> <svg height="25" width="50"> <polygon points="0,0 25,10 50,0 25,25" fill="rgba(255,255,255,.5)" stroke-width="0" stroke="rgba(255,255,255,.3)"/> </svg> </div> <div class="title centerV"> <div> <div class="text"> <h1>Hero Effects</h1> <p>Lorem Ipsum, lorem ipsum, lorem ipsum</p> </div> </div> </div> </div> <div class="shade"></div>
</div>
<div class='content'> <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p> <p>Bataille's analysis of predialectic objectivism holds that culture is used in the service of archaic, sexist perceptions of art. A number of constructions concerning capitalist objectivism may be found. However, the primary theme of von Ludwig's[2] model of pretextual capitalist theory is the bridge between society and class. If capitalist objectivism holds, we have to choose between predialectic objectivism and Lacanist obscurity.</p>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Webpage Hero header - scroll effects - Script Codes CSS Codes
*, *::before, *::after { box-sizing: border-box;
}
html, body { height: 100%;
}
body { font-family: 'Julius Sans One', sans-serif; font-size: 14px;
}
.heroEffects { height: 100vh; position: relative; z-index: -1; top: 0; left: 0;
}
.heroEffects .bg { height: 100vh; position: fixed; width: 100%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungleBG.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-transform: scale(1); transform: scale(1);
}
.heroEffects .shade { opacity: 0; background: rgba(0, 0, 0, 0.8); z-index: 3; height: 100vh; position: fixed; width: 100%;
}
.heroEffects .title { width: 100%;
}
.heroEffects .title .text { z-index: 1; width: 100%; text-align: center; color: White; padding: 2em; background: rgba(0, 0, 0, 0.5);
}
.heroEffects .arrow { position: fixed; left: 50%; margin-left: -20px; bottom: 20px; width: 40px; height: 40px; opacity: 1;
}
.centerV { display: table; height: 100%;
}
.centerV > div { display: table-cell; vertical-align: middle;
}
h1 { font-size: 5em; margin-bottom: 0.1em; font: 5em/1em; color: #fff;
}
p { width: 60vw; margin: 0 auto; line-height: 1.5em; padding: 10px 20px 0; border-top: solid 1px rgba(255, 255, 255, 0.2); letter-spacing: 0.015em; display: block; color: #eee;
}
.content { background: #cdcdcd; padding: 150px 50px;
}
.content p { color: #111; font-size: 2em; margin-bottom: 50px;
}
.bouncy { -webkit-animation: Weeeeeeeeeee 3s infinite ease-in-out; animation: Weeeeeeeeeee 3s infinite ease-in-out;
}
@-webkit-keyframes Weeeeeeeeeee { 0% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 11% { -webkit-transform: translate(0, -25px) scaleX(0.8); transform: translate(0, -25px) scaleX(0.8); -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); } 20% { -webkit-transform: translate(0, 0px) scaleY(0.8); transform: translate(0, 0px) scaleY(0.8); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 28% { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); } 36% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 100% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); }
}
@keyframes Weeeeeeeeeee { 0% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 11% { -webkit-transform: translate(0, -25px) scaleX(0.8); transform: translate(0, -25px) scaleX(0.8); -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); } 20% { -webkit-transform: translate(0, 0px) scaleY(0.8); transform: translate(0, 0px) scaleY(0.8); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 28% { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5); } 36% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); } 100% { -webkit-transform: translate(0, 0px); transform: translate(0, 0px); -webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1); }
}
Webpage Hero header - scroll effects - Script Codes JS Codes
(function () { $(window).scroll(function () { var Num = $(window).scrollTop() / 500; var Num2 = $(window).scrollTop() * .0004; // higher number for larger scaling BG var Num2mod = Num2 + 1; var Num3 = $(window).scrollTop() * .2; // speed of title scroll var Num3mod = Num3 + 1; return $('.shade').css('opacity', Num), $(".bg").css({"transform":"scale(" + Num2mod + ")"}), $(".text").css({"margin-top":"-" + Num3mod + "px"}); });
}.call(this));
| Developer | EricPorter |
| Username | EricPorter |
| Uploaded | August 28, 2022 |
| Rating | 4.5 |
| Size | 4,314 Kb |
| Views | 44,528 |
Do you need developer help for Webpage Hero header - scroll effects?
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!
EricPorter (EricPorter) Script Codes
| Name | Size |
| Styled Contact Form - jQuery Validate | 4,663 Kb |
| Jive Turkey - css animation | 3,226 Kb |
| CSS Animated Bicycle | 3,460 Kb |
| Flip Boxes | 2,716 Kb |
| Graphs - animated on scroll, responsive, data-driven | 7,477 Kb |
| Mobile accordion dropdown nav - animation | 3,667 Kb |
| Floating Form Field Labels | 4,010 Kb |
| CSS Buttons Set | 2,039 Kb |
| Scroll Image Reveal effects | 6,519 Kb |
| Image Hover Effects | 3,035 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Slides-07-1 POSITION | Exhtml | 1,909 Kb |
| A cube | KyleDavidE | 18,627 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
| Blog Concept - Single Post | Marionebl | 9,603 Kb |
| Apple website | Jds317 | 1,835 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| Animating characters with jQuery | 042 | 2,776 Kb |
| A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!