Hero Section with video and blend mode using HTML CSS and JavaScript

Share your love

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 &#x3C;anonymous> (https://herotofu.com/haml.js:657:11), &#x3C;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

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💖

Share your love

Related Posts