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.
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
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
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 EffectA video based Hero section with a blend-mix-mode for dynanic chanes to the gradiant. Look, looks cool, init
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
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…
On experimenting, when you have a 0deg (horizontal gradient) line, then the circles seem to disapear
<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>
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); }); });
<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>
.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; }
No comments? c'mon, show me some love.