Here I experiment with a video-based hero header or can be used elsewhere. It uses a funky mix-blend-mode, gradients, absolute/relative positioning and clip-paths

I really enjoyed making this, I kind of went along as I saw things to do.

There are also some buttons to change the gradient effect dynamically, along with the jQuery that sorts that.

Link to this:

Note to Webkit users / including iOs / Safari

Because of the way that mix-blend-mode works, i've had to use a opacity, so the effect is slightly different as it would be on chrome/desktop browers

Hello Pauly, how are you?

Clear Effect

Press the above button to clear the effect entirely, so you can see what the origional video looks like

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

Change Effect

A note about using Black and White

This is weird, because it's black and white, and the effect (mix-blend-mode: color) requires colour to work - so it just makes the whole thing greyscale and everything element disapears when using black'n'white. Here are a few examples can see how they work.

Safari Only Note: This works differently on safari because of the way the effects work. It still looks 'ok', but looks better on the other browsers. Except IE. Nobody likes IE. Don't be like IE.

Change Effect

Change Effect

Change Effect

Description

A video based Hero section with a blend-mix-mode for dynanic chanes to the gradiant. Look, looks cool, init

Tech Description

The element is a section.hero relative position and clip-path. Inside is a video with a min-width and min-height of 100% for the video, which to auto-play, needs to been Loop, autoplay & muted, so it'll repeat over and over. This is just a video fo my dog, , whihc we can all agrree is awesome - but it could be a video of anything, such as a borowing video of

There is a neon glow effect using a series of text-shadow on the H1, which is centered using Flex.

There is a clip-path at the top which gives it a sort of tower block effects, but I bet you could anniate it or make it look curved etc

Tools created, not really in scope

Press one of the buttons in order to change the overlay to that button's code. This is done using jQuery, and isn't within the scope of the demonstration; however, they use…

data-button='true'
Make this a button that we look for in the jQuery to search for a $(document).on('click', '[data-button]', function(){ /* to script inserst */ })
var className = data-button-target='.theOverlay'
Get the value of id='OverlayID', and surround in a $(className) so that it gets that element. It could have a value of '#singleID' for ID names.
var CSS = data-button-css='background-image' &
NOw we have the $(className), this will do $(clasName).css(CSS, */ wait for this, coming next /*).
var Value = data-button-value="linear-gradient(0deg, #00ff00, #ff0000)"
Finally, what are we going to set the above $('#OverlayID').css(CSS, value);

On experimenting, when you have a 0deg (horizontal gradient) line, then the circles seem to disapear

Full Javascript for this

The buttons that changes the effect

(note: the 'style' and 'data-button-value' are the same, that's so you can see the effect of the button before pressing it; feel free to do this differnetly)
                <p>  <span class="btn btn-block btn-primary"
                        data-button="true"
                        data-button-target=".theOverlay"
                        data-button-value="linear-gradient(0deg, #8dfa69, #ff36f5, #ff470b)"
                        data-button-css="background-image"
                        style="background-image:linear-gradient(0deg, #8dfa69, #ff36f5, #ff470b);">Change Effect</span></p>


                <p>   <span class=" btn btn-block btn-primary"
                           data-button="true"
                           data-button-target=".theOverlay"
                           data-button-value="linear-gradient(45deg, #5d79fa, #53ff5f, #ca77ff)"
                           data-button-css="background-image"
                           style="background-image:linear-gradient(45deg, #5d79fa, #53ff5f, #ca77ff);">Change Effect</span></p>

                

The jQuery that the above buttons are attached to.

        jQuery(document).ready(function ($) {

    $(document).on('click', '[data-button]', function() {
    var target = $(this).attr('data-button-target');
    var css = $(this).attr('data-button-css');
    var value = $(this).attr('data-button-value');

   $(target).css(css, value);

   $('html, body').animate({
      scrollTop: $('section.hero').offset().top
    }, 1000);
  });
        });
      

HTML

        
          <section class="hero">
  <h1>Hello Pauly, how are you</h1>

  <div class="overlay"></div>
          <!-- The circles -->
           <div class="theOverlay circle circle1"></div>l
  <div class="theOverlay circle circle2"></div>l
  <!-- Remember, due to browser requirementsm we need to mute autoplays -->
          <video loop muted autoplay>
          <!-- Link to your video here -->
    <<<source src="/wp-content/themes/paulnew/custom_dist/video/nuky.mp4" type="video/mp4" / >
</video>

</section>
        
        

CSS

    .hero {
          /* Minimum height, we'll expand on this over at [1]. */
      min-height: 500px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
  /* Use this for customising: https://bennettfeely.com/clippy/ */
      clip-path:
          polygon(
            0% 7%, 7% 13%, 9% 12%, 16% 8%, 20% 12%,
            23% 20%, 37% 11%, 46% 21%, 46% 30%, 52% 30%,
            52% 21%, 58% 20%, 61% 7%, 70% 8%, 82% 12%,
            92% 4%, 100% 1%, 100% 100%, 0% 100%
          );
    }
          /* [1] here we use a block to expand it outwards at 40% */
          .hero .expander {
            padding-bottom: 40%;
          }
/* Use this for customising: https://html-css-js.com/css/generator/text-shadow/ */
    .hero h1 {
      position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
      color: white;
      text-shadow:
            #FFF 0px 0px 5px, #FFF 0px 0px 10px,
            #FFF 0px 0px 15px, #9d9aff 0px 0px 20px,
          #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px,
          #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
      z-index: 500;
    }

    .hero video {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      z-index: 400;
    }

    .hero .theOverlayBlock {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    }
/*
  This will change when you press the buttons...
  Remember, this effects the whole overlay background,
  as well as the two circles. Just the background-image.

  Try playing around with the mix-blend-mode too =)

  For it to work in Safari, then we need to use an opacity instead
  of a blend mode. The effect is very similar but it allows for it
  to work on iOs.
*/

    .hero .theOverlay {
      background-image: linear-gradient(90deg, #001ff5, #fa1d1f);
      mix-blend-mode: color;
      z-index: 450;

    }

/* This will show up on safari only.

  Because the mix-blend-mode doesn't really work in sfarai, i'm using a opacity
          to give off a similar vibe. It's not the same but close enough.

          I've also added in a .safariExpain inorder to explain things just to
          safarai users. It defaults to display none, then switchesto display: bock
          forourpartnt;s]]//.s//

          Remember, all iOS  browsre are the Webit safari, just with differnet skins. Incuding Chrome on iPad. */



      .safariExplain {
        display: none;
      }

  @media  not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) {

      .hero .theOverlay {
        opacity: 0.5;
      }

      .safariExplain {
        display: block;
      }
    }}
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
    .hero .circle1 {
      top: 25px;
      right: 25px;
      width: 40vh;
      height: 40vh;
    }

    .hero .circle2 {
      bottom: 25px;
      left: 25px;
      width: 20vh;
      height: 20vh;
    }x;
    }

    .hero .circle {
      position: absolute;

      border-radius: 50%;
      z-index: 475;
    }

 

I hope this makes sense and you enjoy the effects


Lots of 💓
- Paul 'Pauly' Silver.

No comments? c'mon, show me some love.

Leave a Reply

Your email address will not be published. Required fields are marked *

;