In the realm of web design, the hero section serves as the digital storefront, inviting visitors to step into the world of your website. To truly captivate your audience, it’s essential to infuse this crucial space with captivating visuals that leave a lasting impression. What better way to achieve this than by incorporating dynamic video content and intriguing blend modes?
In this blog post, we’re embarking on a journey to elevate your website’s hero section by seamlessly integrating video playback and blend mode effects using the powerful trio of HTML, CSS, and JavaScript. By harnessing the capabilities of these core web development technologies, we’ll unlock the potential to create a visually stunning and immersive experience that resonates with your audience.
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Blend-Mode Sticky Nav & Hero by Jalin Burton (@jalinb) on CodePen.
HTML Code
Starter Template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Hero Section with video and blend mode using HTML CSS and JavaScript - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag.
<html> <head></head> <body> <pre class="error">TypeError: undefined is not a function at eval (eval at <anonymous> (https://herotofu.com/haml.js:657:11), <anonymous>:28:12) at https://herotofu.com/haml.js:657:11 at execute (https://herotofu.com/haml.js:663:7) at Function.render (https://herotofu.com/haml.js:649:12) at https://herotofu.com/_next/static/chunks/8117.6e181f0bb83d48a1.js:1:472 at https://herotofu.com/_next/static/chunks/8117.6e181f0bb83d48a1.js:1:701 at oB (https://herotofu.com/_next/static/chunks/framework-6beac1b3a08589a3.js:25:84108) at uU (https://herotofu.com/_next/static/chunks/framework-6beac1b3a08589a3.js:25:113154) at https://herotofu.com/_next/static/chunks/framework-6beac1b3a08589a3.js:25:111540 at uB (https://herotofu.com/_next/static/chunks/framework-6beac1b3a08589a3.js:25:111606)</pre> </body> </html>
CSS Code
Create a file style.css and paste the code below.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap'); $black: #212121; $white: #efefef; $pearl: #fff; $purple: #e8d1f6; $blue: #29639c; $green: #00BCD4; $pink: #b73b3b; * { box-sizing: border-box; cursor: none; } html, body { background: $white; color: $black; font-family: 'Montserrat', sans-serif; font-size: 16px; height: 100%; } ::selection { background: $white; color: $black; mix-blend-mode: difference; } ::-moz-selection { background: $white; color: $black; } h1, h2, h3, h4, h5 { font-weight: 900; } h1 { font-size: 3em; } .hero-title { font-size: 8vw; line-height: 1em; font-weight: 900; } .nav-title { font-size: 4em; } a { transition: all .25s ease-in-out; } .white, a.white { color: $white; } .black { color: $black; } .pearl, a.pearl { color: $pearl; } .green, a.green { color: $green; } .pink { color: $pink; } .blend { mix-blend-mode: difference !important; color: $white; position: relative; z-index: 2; } .bg-black { background-color: $black; } .bg-green { background-color: $green; } .bg-topographic { background-image: url(https://assets.codepen.io/319606/bg-topographic.svg); background-size: 5000px; opacity: .1; pointer-events: none; } .custom-cursor { position: fixed; opacity: 0; pointer-events: none; mix-blend-mode: difference; width: 30px; height: 30px; border-radius: 50%; background-color: $green; transition: transform 350ms ease; transform: translate(-50%, -50%) scale(.3); z-index: 1000; } .custom-cursor--link { transform: translate(-50%, -50%) scale(1.25); } .swoosh { background-image: url('https://assets.codepen.io/319606/2023-logo-swoosh.svg'); background-size: 100%; background-repeat: no-repeat; top: 20px; left: 18px; width: 230px; height: 45px; z-index: 1000; background-position: left; } .sticky-nav { top: 20px; left: 20px; position: fixed; width: calc(100% - 40px); z-index: 999; &.difference { background-repeat: no-repeat; background-size: contain; mix-blend-mode: difference; // filter: invert(1); #nav-btn { filter: invert(0); } } .logo { width: 220px; height: 45px; background-image: url(https://assets.codepen.io/319606/2023-logo-white.svg); background-size: 100%; background-repeat: no-repeat; background-position: left; z-index: 998; } #nav-btn { width: 60px; z-index: 999; filter: invert(1); .icon { position: relative; width: 100%; height: 100%; fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; // cursor: pointer; stroke: #fff; } } } #takeover-nav { position: fixed; width: 100vw; height: 100vh; overflow-y: auto; left: 0; top: -200%; transition: all .5s ease-in-out; z-index: 996; &.shown { top: 0; } .nav-col { min-height: 100vh; a { color: $white; &:hover { color: $black; } } } .nav-contact { .content { max-width: 700px; } } .nav-items { font-size: 2.5em; font-weight: 700; } .contact-items { font-size: 1.25em; font-weight: 700; a:hover { color: $green; } } .social { font-size: .75em; a { color: $green; &:hover { color: $white; } } } } .gradient-overlay { bottom: 0; height: 50%; background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 50%); background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,1) 50%); background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,1) 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#212121',GradientType=0 ); z-index: 1; border-bottom-right-radius: 15vw; pointer-events: none; } .video-wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; border-bottom-right-radius: 15vw; pointer-events: none; } #video-bg { position: absolute; width: 100%; height: 100%; min-width: 100%; background-position: center center; background-size: cover; object-fit: cover; transform: rotate(180deg); } section { min-height: 800px; height: 800px; width: 100%; &.hero { background-color: $black; border-bottom-right-radius: 15vw; position: relative; &:before { content: ""; background-color: $black; position: absolute; top: 100%; left: 0; width: 15vw; height: 15vw; } &:after { content: ""; background-color: $white; position: absolute; top: 100%; left: 0; width: 15vw; height: 15vw; border-top-left-radius: 15vw; } } &.two { background-color: $white; } &.three { background-color: $purple; } &.four { background-color: $green; } &.five { background-color: $blue; } } @media screen and (min-width: 1200px) { .hero { height: 75vh; #video-bg { object-position: 0 5vw; } } } @media screen and (max-width: 1199px) { .hero { #video-bg { object-position: 0 15vw; } } } @media screen and (max-width: 767px) { #takeover-nav { .nav-menu { min-height: 500px; a { color: $black; &:hover { color: $white } } } .nav-contact { min-height: 600px; .nav-title { font-size: 2.5em; } } } } @media screen and (max-width: 575px) { header { .swoosh { width: 165px; height: 35px; top: 10px; } .sticky-nav { top: 10px; .logo { width: 150px; height: 35px; } #nav-btn { width: 40px; } } #takeover-nav { .contact-items { font-size: 1em; } } } .hero { min-height: 600px; height: 600px; .hero-title { font-size: 12vw; } #video-bg { object-position: 0 30vw; } } }
JavaScript Code
Create a file script.js and paste the code below.
$( "#nav-btn" ).on( "click", function() { $('#takeover-nav').toggleClass("shown"); $('.sticky-nav').toggleClass("difference"); }); ///Initiation Variables var icon_1 = document.getElementById("nav-btn"); var topLine_1 = document.getElementById("top-line-1"); var middleLine_1 = document.getElementById("middle-line-1"); var bottomLine_1 = document.getElementById("bottom-line-1"); var state_1 = "menu"; // can be "menu" or "arrow" var topLineY_1; var middleLineY_1; var bottomLineY_1; var topLeftY_1; var topRightY_1; var bottomLeftY_1; var bottomRightY_1; var topLeftX_1; var topRightX_1; var bottomLeftX_1; var bottomRightX_1; ///Animation Variables var segmentDuration_1 = 15; var menuDisappearDurationInFrames_1 = segmentDuration_1; var arrowAppearDurationInFrames_1 = segmentDuration_1; var arrowDisappearDurationInFrames_1 = segmentDuration_1; var menuAppearDurationInFrames_1 = segmentDuration_1; var menuDisappearComplete_1 = false; var arrowAppearComplete_1 = false; var arrowDisappearComplete_1 = false; var menuAppearComplete_1 = false; var currentFrame_1 = 1; ///Menu Disappear function menuDisappearAnimation_1() { currentFrame_1++; if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) { window.requestAnimationFrame( ()=> { //top line topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 ); topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 ); //bottom line bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 ); bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 ); //recursion menuDisappearAnimation_1(); }); } else { middleLine_1.style.opacity = "0"; currentFrame_1 = 1; menuDisappearComplete_1 = true; openMenuAnimation_1(); } } ///Cross Appear function arrowAppearAnimation_1() { currentFrame_1++; if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) { window.requestAnimationFrame( ()=> { //top line topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 ); topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 ); bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 ); bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 ); topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 ); //bottom line bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 ); bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 ); topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 ); topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 ); bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 ); //recursion arrowAppearAnimation_1(); }); } else { currentFrame_1 = 1; arrowAppearComplete_1 = true; openMenuAnimation_1(); } } ///Combined Open Menu Animation function openMenuAnimation_1() { if ( !menuDisappearComplete_1 ) { menuDisappearAnimation_1(); } else if ( !arrowAppearComplete_1) { arrowAppearAnimation_1(); } } ///Cross Disappear function arrowDisappearAnimation_1() { currentFrame_1++; if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) { window.requestAnimationFrame( ()=> { //top line topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 ); topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 ); bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 ); bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 ); topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 ); //bottom line bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 ); bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 ); topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 ); topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 ); bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 ); //recursion arrowDisappearAnimation_1(); }); } else { middleLine_1.style.opacity = "1"; currentFrame_1 = 1; arrowDisappearComplete_1 = true; closeMenuAnimation_1(); } } ///Menu Appear function menuAppearAnimation_1() { currentFrame_1++; if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) { window.requestAnimationFrame( ()=> { //top line topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 ); topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 ); //bottom line bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 ); bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 ); //recursion menuAppearAnimation_1(); }); } else { currentFrame_1 = 1; menuAppearComplete_1 = true; closeMenuAnimation_1(); } } ///Close Menu Animation function closeMenuAnimation_1() { if ( !arrowDisappearComplete_1 ) { arrowDisappearAnimation_1(); } else if ( !menuAppearComplete_1 ) { menuAppearAnimation_1(); } } ///Events icon_1.addEventListener( "click", ()=> { if ( state_1 === "menu" ) { openMenuAnimation_1(); state_1 = "arrow"; arrowDisappearComplete_1 = false; menuAppearComplete_1 = false; } else if ( state_1 === "arrow" ) { closeMenuAnimation_1(); state_1 = "menu"; menuDisappearComplete_1 = false; arrowAppearComplete_1 = false; } }); // Cursor document.addEventListener("DOMContentLoaded", function(event) { var cursor = document.querySelector(".custom-cursor"); var links = document.querySelectorAll("a, button, #nav-btn, input.btn"); var initCursor = false; for (var i = 0; i < links.length; i++) { var selfLink = links[i]; selfLink.addEventListener("mouseover", function() { cursor.classList.add("custom-cursor--link"); }); selfLink.addEventListener("mouseout", function() { cursor.classList.remove("custom-cursor--link"); }); } window.onmousemove = function(e) { var mouseX = e.clientX; var mouseY = e.clientY; if (!initCursor) { // cursor.style.opacity = 1; TweenLite.to(cursor, 0.5, { opacity: 1 }); initCursor = true; } TweenLite.to(cursor, 0, { top: mouseY + "px", left: mouseX + "px" }); }; window.ontouchmove = function(e) { var mouseX = e.touches[0].clientX; var mouseY = e.touches[0].clientY; if (!initCursor) { // cursor.style.opacity = 1; TweenLite.to(cursor, 0.3, { opacity: 1 }); initCursor = true; } TweenLite.to(cursor, 0, { top: mouseY + "px", left: mouseX + "px" }); }; window.onmouseout = function(e) { TweenLite.to(cursor, 0.3, { opacity: 0 }); initCursor = false; }; window.ontouchstart = function(e) { TweenLite.to(cursor, 0.3, { opacity: 1 }); }; window.ontouchend = function(e) { setTimeout( function() { TweenLite.to(cursor, 0.3, { opacity: 0 }); }, 200); }; });
Final Output
![](https://codingtorque.com/wp-content/uploads/2024/05/image-4-1024x489.png)
Written by: Piyush Patil
Code Credits: https://codepen.io/jalinb/full/ExOgOBZ
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖