Total Online Business SolutionsServicesToolsTeams
NOTE: Add JS Code and CSS code you see below.
Edit JS for your post IDs
See Alternate CSS with Different Sizing.
SECTION WITH FOLLOW GRADIENT
should be full width section
check to make sure enough padding above and below / adjust CSS if need be b/c you'll see edges of gradient at top and bottom
// FOLLOW GRADIENT - if JUST on one page, add if ($('body').is('.home')) { instead of the if below
if ( $("body").hasClass( "page-id-170") || $("body").hasClass("page-id-3610") || $("body").hasClass("page-id-4697") || $("body").hasClass("page-id-4984") || $("body").hasClass("page-id-4986") || $("body").hasClass("page-id-5236") || $("body").hasClass("page-id-5632") || $("body").hasClass("page-id-90776") || $("body").hasClass("page-id-19") ) {
const gradient = document.querySelector('.follow-gradient');
const debounce = (func, timeout = 300) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
};
const setCssVariables = (event) => {
const { clientX, clientY } = event;
const xPercentage = (clientX / window.innerWidth) * 100;
const yPercentage = (clientY / window.innerHeight) * 100;
gradient.style.setProperty('--mouse-x', xPercentage + "%");
gradient.style.setProperty('--mouse-y', yPercentage + "%");
};
const handleMousePointer = debounce((event) => setCssVariables(event), 50);
gradient.addEventListener('pointermove', handleMousePointer);
}
/* ******************************
* SECTION FOLLOW GRADIENT - add section and follow-gradient class OR remove .section from below and just use .follow-gradient
* *************************** */
.section.follow-gradient {
--mouse-x: 0px;
--mouse-y: 0px;
--base-color: #27324a;
position: relative;
/* min-height: 100vh; */
background: var(--base-color);
overflow: hidden;
}
.section.follow-gradient .e-con-inner:before {
content: "";
width: 250%;
height: 250%;
position: absolute;
top: var(--mouse-y);
left: var(--mouse-x);
transform: translate(-50%, -50%);
transition: all 2s ease-in-out;
background: var(--base-color);
background: radial-gradient(circle at 50% 50%, #f37f20 0%, #df4237 20%, #27324a 50%);
}
Inspect Hero for that CSS
Alternate CSS is Below with Different Sizing
/* FOLLOW ME Gradient */
.follow-gradient {
--mouse-x: 50%;
--mouse-y: 50%;
--base-color: #080E1C;
position: relative;
min-height: 100vh;
background: #080E1C !important;
overflow: hidden;
}
.follow-gradient .e-con-inner:before {
content: "";
width: 250%;
height: 250%;
position: absolute;
top: var(--mouse-y);
left: var(--mouse-x);
transform: translate(-50%, -50%);
transition: all 2s ease-in-out;
background: var(--base-color);
background: radial-gradient(circle at 50% 50%, #203870 0%, #0E1932 20%, #080E1C 50%);
}
The Rest of the Page Content Follows the Hero Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.