How we can experiment with all blend modes in an image by creating a proper program? Solution: See this Blend Modes Example Using GSAP, CSS Background-Blend-Mode.
Previously I have shared the CSS Blend Modes program, this is also similar to that but it is based on GSAP library. Basically, Blend modes are a way to blend pixels of two images with each other to get different types of effects. CSS has blend modes of command to create effects like graphic or editing software. What we can do in photoshop with blend modes, the same things can be happen using CSS.
Today you will learn to create a program to test CSS Background-Blend-Mode. Basically, there are an image and two sections of blend mode commands. There are all blend modes commands: normal, multiply, screen, overlay, darken, lighten, color-dodge, difference, exclusion, hue, saturation, color, luminosity. There are two types of blend modes you can test normal image blend mode and overlay blend mode.
So, Today I am sharing Blend Modes Example Using GSAP. There I have used HTML to create the layout and pass values, CSS for styling, and GSAP library to functioning and apply the filters or blend modes. This is the complete program to test all the blend modes with two types of effect overlay and normal. You can use this program on your project to create image filters.
If you are thinking now how this filter program actually is, then see the preview given below.
Preview Of CSS Background-Blend-Mode
See this video preview to getting an idea of how this program looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Blend Modes Example Using GSAP Source Code
Before sharing source code, let’s talk about it. First I have created the main div named ‘wrapper’ and placed all the items inside it. Inside the main div, I have created an SVG filter element for overlay effect. After that, I have created two lists for image and overlay blend modes. In every list item, I have pass blend mode data using the HTML Data-* attribute.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I gave basic values like size, position, margin, padding, etc to the elements. There I have used flex display command to create a flexible layout. I used CSS background-blend-mode command to apply the blend modes, later it values will handle by GSAP.
GSAP handling here the 3D image move effect on hover and apply the blend modes on the action. There it fetched all the elements using document.querySelector command. It changing the CSS values dynamically to change the effect. There I have done all the processes according to the library’s documentation. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files.
First file for HTML, second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Image Blend Modes | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <svg viewBox="0 0 180 100"> <filter id='noise' x='0%' y='0%' width='100%' height='100%'> <feTurbulence type="fractalNoise" baseFrequency="0" result="noise" numOctaves="3" seed="10"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter> </svg> <div class="split"> <div class="list-outer"> <ul id="imageList"> <li class="bold">IMAGE BLEND</li> <li class="active" data-mode="normal">normal</li> <li data-mode="multiply">multiply</li> <li data-mode="screen">screen</li> <li data-mode="overlay">overlay</li> <li data-mode="darken">darken</li> <li data-mode="lighten">lighten</li> <li data-mode="color-dodge">color-dodge</li> <li data-mode="color-burn">color-burn</li> <li data-mode="difference">difference</li> <li data-mode="exclusion">exclusion</li> <li data-mode="hue">hue</li> <li data-mode="saturation">saturation</li> <li data-mode="color">color</li> <li data-mode="luminosity">luminosity</li> </ul> <ul id="overlayList"> <li class="bold">OVERLAY BLEND</li> <li data-mode="normal">normal</li> <li class="active" data-mode="multiply">multiply</li> <li data-mode="screen">screen</li> <li data-mode="overlay">overlay</li> <li data-mode="darken">darken</li> <li data-mode="lighten">lighten</li> <li data-mode="color-dodge">color-dodge</li> <li data-mode="color-burn">color-burn</li> <li data-mode="difference">difference</li> <li data-mode="exclusion">exclusion</li> <li data-mode="hue">hue</li> <li data-mode="saturation">saturation</li> <li data-mode="color">color</li> <li data-mode="luminosity">luminosity</li> </ul> </div> <div id="container"> <div id="inner"> <div id="mask" class="turb-mask"></div> <img id="image" src="https://webdevtrick.com/wp-content/uploads/skynature.jpg"> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { box-sizing: border-box; } html { font-size: 17px; } body { padding: 0; margin: 0; font-family: sans-serif; font-size: 1rem; } .list-outer { display: flex; justify-content: space-between; padding: 2rem; } .list-outer > ul:first-child { margin-right: 5rem; } @media screen and (max-width: 50rem) { .list-outer { padding-top: 4rem; } } ul { list-style: none; line-height: 1.5; padding: 0; margin: 0; } ul li { cursor: pointer; font-size: 0.8em; } .active { font-weight: bold; } .bold { font-weight: bold; letter-spacing: 0.05em; margin-bottom: 0.05em; font-size: 1rem; } svg { height: 0; width: 0; visibility: hidden; } .hover { position: fixed; top: 1rem; right: 1rem; margin: 0; font-weight: bold; font-style: italic; letter-spacing: 0.05em; } .wrapper { max-width: 1600px; min-height: 100vh; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; } .split { width: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: column; } @media screen and (min-width: 50rem) { .split { flex-direction: row; } } #container { perspective: 1.5rem; } #inner { position: relative; overflow: hidden; box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.4); transition: transform 0.5s; display: flex; } #inner img { mix-blend-mode: normal; width: 100%; max-width: 500px; height: auto; } .turb-mask { position: absolute; width: 110%; height: 110%; left: -5%; top: -5%; opacity: 0.5; pointer-events: none; background-color: rgba(255, 0, 0, 0.65); background-image: url(https://webdevtrick.com/wp-content/uploads/skynature.jpg); background-size: cover; background-position: center; background-blend-mode: multiply; z-index: 0; -webkit-filter: url(#noise); filter: url(#noise); } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
// Code By Webdevtrick ( https://webdevtrick.com ) const container = document.getElementById('container'), mask = document.getElementById('mask'), turbVal = { val: 0.0 }, octavesVal = { val: 0 }, turb = document.querySelector('#noise feTurbulence'), turbTl = gsap.timeline({ paused: true, repeat: -1, yoyo: true, onUpdate: function () { turb.setAttribute('baseFrequency', turbVal.val); // turb.setAttribute('numOctaves', octavesVal.val); } }), maskTl = gsap.timeline({ paused: true }); turbTl.to(turbVal, 12, { ease: Sine.easeInOut, val: 0.03 }); maskTl.to(mask, 0.5, { ease: Sine.ease, opacity: 0.9 }); container.addEventListener('mouseenter', e => { turbTl.restart(); maskTl.restart(); }); container.addEventListener('mouseleave', e => { turbTl.delay(0.5).reverse(1); maskTl.reverse(1); }); const imageListItem = document.querySelectorAll('#imageList li'), overlayListItem = document.querySelectorAll('#overlayList li'), image = document.getElementById('image'); for (const item of imageListItem) { item.addEventListener('click', function (e) { imageListItem.forEach(node => { node.classList.remove('active'); }); e.currentTarget.classList.add('active'); image.style.mixBlendMode = this.getAttribute('data-mode'); }); } for (const item of overlayListItem) { item.addEventListener('click', function (e) { overlayListItem.forEach(node => { node.classList.remove('active'); }); e.currentTarget.classList.add('active'); mask.style.backgroundBlendMode = this.getAttribute('data-mode'); }); } (function () { // Init var container = document.getElementById("container"), inner = document.getElementById("inner"); // Mouse var mouse = { _x: 0, _y: 0, x: 0, y: 0, updatePosition: function (event) { var e = event || window.event; this.x = e.clientX - this._x; this.y = (e.clientY - this._y) * -1; }, setOrigin: function (e) { this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2); this._y = e.offsetTop + Math.floor(e.offsetHeight / 2); }, show: function () { return "(" + this.x + ", " + this.y + ")"; } }; mouse.setOrigin(container); var counter = 0; var updateRate = 10; var isTimeToUpdate = function () { return counter++ % updateRate === 0; }; var onMouseEnterHandler = function (event) { update(event); }; var onMouseLeaveHandler = function () { inner.style = ""; }; var onMouseMoveHandler = function (event) { if (isTimeToUpdate()) { update(event); } }; var update = function (event) { mouse.updatePosition(event); updateTransformStyle( (mouse.y / inner.offsetHeight / 2).toFixed(2), (mouse.x / inner.offsetWidth / 2).toFixed(2)); }; var updateTransformStyle = function (x, y) { var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)"; inner.style.transform = style; inner.style.webkitTransform = style; inner.style.mozTransform = style; inner.style.msTransform = style; inner.style.oTransform = style; }; container.onmouseenter = onMouseEnterHandler; container.onmouseleave = onMouseLeaveHandler; container.onmousemove = onMouseMoveHandler; })(); |
That’s It. Now you have successfully created Blend Modes Example Using GSAP, CSS Background-Blend-Mode Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
