Add a bit of fun to your Divi theme this holiday with a rolling snowball effect. Here's how to add rolling snowballs to the bottom of any Divi section, row or module. Like this:
"The secret to making the perfect snowball is finding the right type of snow; it should be slightly wet and packable, not too powdery or icy. Scoop up a handful and compress it firmly and evenly with your hands into a smooth, round shape, applying enough pressure to bind the snow together without crushing it into an ice ball. The ideal snowball feels solid but has a bit of give, resisting quick breakage upon impact, embodying both strength and a nice, throwable texture."
To achieve this, first add the following PHP code to your site. It's reasonably long (in part due to the embedded base64 version of the snowball icon), but don't worry – you shouldn't have to modify it in any way:
if ( ! function_exists( 'divibooster_add_rolling_snowballs_to_section' ) ) {
function divibooster_add_rolling_snowballs_to_section( $output, $render_slug, $module ) {
if ( is_string( $output ) && isset( $module->props['module_class'] ) && in_array( 'rolling-snowballs', explode( ' ', $module->props['module_class'] ) ) ) {
$snowball_container = '<div class="rolling-snowballs-container"></div>';
$output = preg_replace( '/^(<div [^>]*>)/', '$1' . $snowball_container, $output, 1 );
}
return $output;
}
add_filter( 'et_module_shortcode_output', 'divibooster_add_rolling_snowballs_to_section', 10, 3 );
}
if (!function_exists('divibooster_rolling_snowballs_css')) {
function divibooster_rolling_snowballs_css() {
?>
<style>
.rolling-snowballs-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
@keyframes snowball-roll {
0% { transform: translateX(-100px) rotate(0); }
100% { transform: translateX(31410%) rotate(36000deg); } /* 100 rotations */
}
.snowball {
position: absolute;
bottom: 0;
left: 0;
width: var(--snowball-size);
height: var(--snowball-size);
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
animation: snowball-roll var(--snowball-speed) linear forwards infinite;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZmlsbD0iI2Y5ZjlmOSIgZD0iTTQ3OC45NTkgMjYyLjEyYzAgMjQuNDYuMTg3IDQ4LjM0NS02Ljk3OSA3MC40MTUtNy40MjYgMjIuODc0LTE5LjI5MSA0My45MDktMzMuMTQ3IDYyLjk0OS0xMy45OTYgMTkuMjMtMzYuMTUgMjkuMDkzLTU1LjM4MSA0My4wODktMTkuMDQgMTMuODU2LTM1LjM4NSAzMS4zMzUtNTguMjYgMzguNzYyLTIyLjA3IDcuMTY3LTQ1LjQ2OCA4LjA3LTY5LjkyOCA4LjA3cy00Ny45OTctLjQ3Ni03MC4wNjctNy42NDNjLTIyLjg3NS03LjQyNi00Mi43NzItMjAuMjYxLTYxLjgxMi0zNC4xMTctMTkuMjMtMTMuOTk1LTM5LjgyNS0yNy4zOC01My44Mi00Ni42MDktMTMuODU2LTE5LjA0LTMwLjI0My0zOS40NjctMzcuNjctNjIuMzQyLTcuMTY2LTIyLjA2OSA0LjA2Ni00OC4xMTQgNC4wNjYtNzIuNTc0cy05LjExNS00OS44MTgtMS45NDktNzEuODg4YzcuNDI3LTIyLjg3NSAyNS4wNzQtNDEuNTMgMzguOTMxLTYwLjU3IDEzLjk5NS0xOS4yMyAyNy4wMjYtNDAuODI0IDQ2LjI1Ny01NC44MTkgMTkuMDQtMTMuODU3IDQyLjU4NS0yMi41OTYgNjUuNDU5LTMwLjAyMyAyMi4wNy03LjE2NiA0Ni4xNDUtMTguMjI2IDcwLjYwNS0xOC4yMjZzNDcuMjg4IDE0Ljg5NiA2OS4zNTkgMjIuMDYyYzIyLjg3MyA3LjQyNyA0Ny4wMzUgMTMuMTk0IDY2LjA3NSAyNy4wNTEgMTkuMjMxIDEzLjk5NSAyNy4xMDEgMzguOTM4IDQxLjA5NiA1OC4xNjkgMTMuODU2IDE5LjA0IDQwLjIwNiAzMi41MzUgNDcuNjM0IDU1LjQwOSA3LjE2NiAyMi4wNzEtLjQ2OSA0OC4zNzUtLjQ2OSA3Mi44MzV6IiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjZTlmNmZiIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0iTTI1NS4yNjQgNDkyLjQwNWMtMjYuMDY0IDAtNDkuNDktLjYwMS03Mi4yMjktNy45ODQtMjQuNjg3LTguMDE1LTQ2LjA4OS0yMi4yNDktNjMuNzY5LTM1LjExNS0yLjQ5Ny0xLjgxNy01LjAxOC0zLjYyNS03LjU0NC01LjQzNy0xNy4yLTEyLjMzMS0zNC45ODUtMjUuMDgzLTQ3LjgxNi00Mi43MTRhMTQ1Ny45MjUgMTQ1Ny45MjUgMCAwIDAtNS4xNzYtNy4wNWMtMTIuNDgxLTE2LjkyNC0yNi42MjctMzYuMTA2LTMzLjQ5Mi01Ny4yNDktNC45Ni0xNS4yNzYtMi4xNTYtMzEuNjUyLjU1Ny00Ny40ODggMS41NTctOS4wOTMgMy4xNjctMTguNDk0IDMuMTY3LTI3LjI0OCAwLTguMzk0LTEuMTc5LTE3LjI0Ni0yLjMxOS0yNS44MDUtMi4xMzktMTYuMDU1LTQuMzUtMzIuNjU2LjcxMi00OC4yNDUgNi4wOC0xOC43MjQgMTguMjItMzQuMzM1IDI5Ljk2MS00OS40MzIgMy41MDMtNC41MDQgNi44MTItOC43NTkgOS45NjgtMTMuMDk1IDIuNTU5LTMuNTE2IDUuMTUxLTcuMjA2IDcuNjU4LTEwLjc3NCAxMS41NjktMTYuNDY5IDIzLjUzMi0zMy41IDQwLjE0LTQ1LjU4NSAxOS45MDgtMTQuNDg4IDQ0LjE2Ny0yMy40NzEgNjcuNDE3LTMxLjAyMSA0Ljc4NS0xLjU1NCA5LjYxNS0zLjI3NiAxNC43MjktNS4wOTkgMTguNTcyLTYuNjIyIDM3Ljc3Ni0xMy40NjkgNTguMDM4LTEzLjQ2OSAxOC4wMzggMCAzNC41NzUgNy4xNTQgNTAuNTY3IDE0LjA3MiA3LjI4NSAzLjE1MSAxNC4xNjYgNi4xMjggMjAuOTU0IDguMzMyIDMuOTY0IDEuMjg3IDguMDYyIDIuNTUzIDEyLjAyNSAzLjc3NyAxOS4zNTQgNS45NzkgMzkuMzY1IDEyLjE2MSA1Ni4wMDcgMjQuMjcxIDEzLjc4NSAxMC4wMzIgMjIuMDE1IDI0Ljc0OCAyOS45NzQgMzguOTggNC4xMzYgNy4zOTYgOC4wNDIgMTQuMzgxIDEyLjY2MyAyMC43MjkgNC45NTYgNi44MTEgMTEuNzc5IDEyLjk2OCAxOS4wMDMgMTkuNDg2IDEyLjA1IDEwLjg3MyAyNC41MSAyMi4xMTYgMjkuNjI5IDM3Ljg4IDUuMTc4IDE1Ljk0NyAzLjM2NSAzMy4zOTUgMS42MTIgNTAuMjY4LS44NTUgOC4yMzEtMS43MzkgMTYuNzQyLTEuNzM5IDI0LjcyOXYxLjgxNGMuMDA1IDIzLjY4OC4wMSA0OC4xODQtNy4zMjEgNzAuNzYzLTYuOTk1IDIxLjU0Ny0xOC40ODMgNDMuMzg1LTM0LjE0NiA2NC45MDYtMTAuNjk1IDE0LjY5NC0yNS41ODUgMjQuMTc4LTM5Ljk4NSAzMy4zNDktNS42NTUgMy42MDMtMTEuNTA0IDcuMzI3LTE2LjkzNyAxMS4yODEtNS4wNzggMy42OTUtMTAuMTA3IDcuNzc2LTE0Ljk3MiAxMS43MjQtMTMuNDc3IDEwLjkzNy0yNy40MTIgMjIuMjQ2LTQ1LjI0NSAyOC4wMzYtMjMuOTA4IDcuNzY0LTQ4LjcyMyA4LjQxMy03Mi4wOTEgOC40MTN6bTAtNDU4LjgxYy0xNy44NCAwLTM1Ljg4NiA2LjQzNC01My4zMzYgMTIuNjU2LTQuOTgxIDEuNzc2LTEwLjEzMSAzLjYxMi0xNS4xMDcgNS4yMjgtMjIuMTUgNy4xOTItNDUuMTc1IDE1LjY4Ny02My41MDIgMjkuMDI1LTE0LjcyNyAxMC43MTctMjYuMDEgMjYuNzc5LTM2LjkyMiA0Mi4zMTMtMi41NCAzLjYxNi01LjE2NyA3LjM1NC03Ljc5NCAxMC45NjUtMy4yODcgNC41MTYtNi44MTkgOS4wNTktMTAuMjM2IDEzLjQ1Mi0xMSAxNC4xNDUtMjIuMzc1IDI4Ljc3MS0yNy42OTcgNDUuMTYxLTQuMDggMTIuNTY2LTIuMTcxIDI2Ljg5OS0uMTUgNDIuMDczIDEuMiA5LjAxMiAyLjQ0MSAxOC4zMzIgMi40NDEgMjcuNjU0IDAgOS45NDMtMS43MTIgMTkuOTQyLTMuMzY5IDI5LjYxMS0yLjUzNyAxNC44MTUtNC45MzQgMjguODA5LTEuMDQgNDAuODAxIDYuMTY0IDE4Ljk4NCAxOS4wMTYgMzYuNDExIDMxLjQ0NCA1My4yNjQgMS43NjcgMi4zOTYgMy41MTcgNC43NyA1LjIyOSA3LjEyMSAxMS41MDMgMTUuODA3IDI4LjM1NiAyNy44OSA0NC42NTQgMzkuNTc1IDIuNTUzIDEuODMgNS4xIDMuNjU2IDcuNjI1IDUuNDkzIDE3LjYzNSAxMi44MzUgMzcuMDkyIDI1LjczIDU5Ljg1NCAzMy4xMTkgMjAuNzkgNi43NTIgNDMuMDU0IDcuMzAxIDY3LjkwNiA3LjMwMSAyMi4yNDcgMCA0NS44MDUtLjU5NyA2Ny43NjYtNy43MjkgMTUuMzU3LTQuOTg1IDI3LjY5LTE0Ljk5NCA0MC43NDgtMjUuNTkxIDUuMDA0LTQuMDYxIDEwLjE3OS04LjI2IDE1LjU1NS0xMi4xNzMgNS43ODQtNC4yMDkgMTEuODE4LTguMDUzIDE3LjY1NC0xMS43NyAxMy45MTItOC44NTkgMjcuMDUyLTE3LjIyOSAzNi4xODctMjkuNzc4IDE0Ljc5My0yMC4zMjcgMjUuNjA5LTQwLjg0OCAzMi4xNDgtNjAuOTkxIDYuNjQ2LTIwLjQ3IDYuNjQzLTQyLjc5OCA2LjYzOC02Ni40Mzd2LTEuODE3YzAtOC43MTIuOTIyLTE3LjU5IDEuODE0LTI2LjE3NSAxLjY3Ni0xNi4xMzMgMy4yNTktMzEuMzcxLTEuMDA0LTQ0LjQ5OC0zLjk2Mi0xMi4yMDMtMTQuNTE3LTIxLjcyNy0yNS42OTEtMzEuODEtNy40MzgtNi43MTItMTUuMTI5LTEzLjY1Mi0yMC45NDQtMjEuNjQyLTUuMTExLTcuMDI1LTkuNDA3LTE0LjcwNi0xMy41NjItMjIuMTM1LTcuNTU1LTEzLjUwOC0xNC42ODktMjYuMjY4LTI1Ljk5My0zNC40OTMtMTQuNzU5LTEwLjc0MS0zMi44MDEtMTYuMzE0LTUxLjkwMS0yMi4yMTUtNC4wMS0xLjIzOS04LjE1Ni0yLjUyLTEyLjIxNy0zLjgzOC03LjQxNi0yLjQwOC0xNC45MjYtNS42NTctMjIuMTg4LTguNzk4LTE0LjY4Ni02LjM1My0yOS44NzEtMTIuOTIyLTQ1LjAxLTEyLjkyMnoiIGZpbGw9IiNkN2QxZDEiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48cGF0aCBmaWxsPSIjZjlmOWY5IiBkPSJNNDc4Ljk1OSAyNjIuMTJjMCAyNC40Ni4xODcgNDguMzQ1LTYuOTc5IDcwLjQxNS03LjQyNiAyMi44NzQtMTkuMjkxIDQzLjkwOS0zMy4xNDcgNjIuOTQ5LTEzLjk5NiAxOS4yMy0zNi4xNSAyOS4wOTMtNTUuMzgxIDQzLjA4OS0xOS4wNCAxMy44NTYtMzUuMzg1IDMxLjMzNS01OC4yNiAzOC43NjItMjIuMDcgNy4xNjctNDUuNDY4IDguMDctNjkuOTI4IDguMDdzLTQ3Ljk5Ny0uNDc2LTcwLjA2Ny03LjY0M2MtMjIuODc1LTcuNDI2LTQyLjc3Mi0yMC4yNjEtNjEuODEyLTM0LjExNy0xOS4yMy0xMy45OTUtMzkuODI1LTI3LjM4LTUzLjgyLTQ2LjYwOS0xMy44NTYtMTkuMDQtMzAuMjQzLTM5LjQ2Ny0zNy42Ny02Mi4zNDItNy4xNjYtMjIuMDY5IDQuMDY2LTQ4LjExNCA0LjA2Ni03Mi41NzRzLTkuMTE1LTQ5LjgxOC0xLjk0OS03MS44ODhjNy40MjctMjIuODc1IDI1LjA3NC00MS41MyAzOC45MzEtNjAuNTcgMTMuOTk1LTE5LjIzIDI3LjAyNi00MC44MjQgNDYuMjU3LTU0LjgxOSAxOS4wNC0xMy44NTcgNDIuNTg1LTIyLjU5NiA2NS40NTktMzAuMDIzIDIyLjA3LTcuMTY2IDQ2LjE0NS0xOC4yMjYgNzAuNjA1LTE4LjIyNnM0Ny4yODggMTQuODk2IDY5LjM1OSAyMi4wNjJjMjIuODczIDcuNDI3IDQ3LjAzNSAxMy4xOTQgNjYuMDc1IDI3LjA1MSAxOS4yMzEgMTMuOTk1IDI3LjEwMSAzOC45MzggNDEuMDk2IDU4LjE2OSAxMy44NTYgMTkuMDQgNDAuMjA2IDMyLjUzNSA0Ny42MzQgNTUuNDA5IDcuMTY2IDIyLjA3MS0uNDY5IDQ4LjM3NS0uNDY5IDcyLjgzNXoiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiNlOWY2ZmIiIGNsYXNzPSIiPjwvcGF0aD48cGF0aCBkPSJNMjU1LjI2NCA0OTIuNDA1Yy0yNi4wNjQgMC00OS40OS0uNjAxLTcyLjIyOS03Ljk4NC0yNC42ODctOC4wMTUtNDYuMDg5LTIyLjI0OS02My43NjktMzUuMTE1LTIuNDk3LTEuODE3LTUuMDE4LTMuNjI1LTcuNTQ0LTUuNDM3LTE3LjItMTIuMzMxLTM0Ljk4NS0yNS4wODMtNDcuODE2LTQyLjcxNGExNDU3LjkyNSAxNDU3LjkyNSAwIDAgMC01LjE3Ni03LjA1Yy0xMi40ODEtMTYuOTI0LTI2LjYyNy0zNi4xMDYtMzMuNDkyLTU3LjI0OS00Ljk2LTE1LjI3Ni0yLjE1Ni0zMS42NTIuNTU3LTQ3LjQ4OCAxLjU1Ny05LjA5MyAzLjE2Ny0xOC40OTQgMy4xNjctMjcuMjQ4IDAtOC4zOTQtMS4xNzktMTcuMjQ2LTIuMzE5LTI1LjgwNS0yLjEzOS0xNi4wNTUtNC4zNS0zMi42NTYuNzEyLTQ4LjI0NSA2LjA4LTE4LjcyNCAxOC4yMi0zNC4zMzUgMjkuOTYxLTQ5LjQzMiAzLjUwMy00LjUwNCA2LjgxMi04Ljc1OSA5Ljk2OC0xMy4wOTUgMi41NTktMy41MTYgNS4xNTEtNy4yMDYgNy42NTgtMTAuNzc0IDExLjU2OS0xNi40NjkgMjMuNTMyLTMzLjUgNDAuMTQtNDUuNTg1IDE5LjkwOC0xNC40ODggNDQuMTY3LTIzLjQ3MSA2Ny40MTctMzEuMDIxIDQuNzg1LTEuNTU0IDkuNjE1LTMuMjc2IDE0LjcyOS01LjA5OSAxOC41NzItNi42MjIgMzcuNzc2LTEzLjQ2OSA1OC4wMzgtMTMuNDY5IDE4LjAzOCAwIDM0LjU3NSA3LjE1NCA1MC41NjcgMTQuMDcyIDcuMjg1IDMuMTUxIDE0LjE2NiA2LjEyOCAyMC45NTQgOC4zMzIgMy45NjQgMS4yODcgOC4wNjIgMi41NTMgMTIuMDI1IDMuNzc3IDE5LjM1NCA1Ljk3OSAzOS4zNjUgMTIuMTYxIDU2LjAwNyAyNC4yNzEgMTMuNzg1IDEwLjAzMiAyMi4wMTUgMjQuNzQ4IDI5Ljk3NCAzOC45OCA0LjEzNiA3LjM5NiA4LjA0MiAxNC4zODEgMTIuNjYzIDIwLjcyOSA0Ljk1NiA2LjgxMSAxMS43NzkgMTIuOTY4IDE5LjAwMyAxOS40ODYgMTIuMDUgMTAuODczIDI0LjUxIDIyLjExNiAyOS42MjkgMzcuODggNS4xNzggMTUuOTQ3IDMuMzY1IDMzLjM5NSAxLjYxMiA1MC4yNjgtLjg1NSA4LjIzMS0xLjczOSAxNi43NDItMS43MzkgMjQuNzI5djEuODE0Yy4wMDUgMjMuNjg4LjAxIDQ4LjE4NC03LjMyMSA3MC43NjMtNi45OTUgMjEuNTQ3LTE4LjQ4MyA0My4zODUtMzQuMTQ2IDY0LjkwNi0xMC42OTUgMTQuNjk0LTI1LjU4NSAyNC4xNzgtMzkuOTg1IDMzLjM0OS01LjY1NSAzLjYwMy0xMS41MDQgNy4zMjctMTYuOTM3IDExLjI4MS01LjA3OCAzLjY5NS0xMC4xMDcgNy43NzYtMTQuOTcyIDExLjcyNC0xMy40NzcgMTAuOTM3LTI3LjQxMiAyMi4yNDYtNDUuMjQ1IDI4LjAzNi0yMy45MDggNy43NjQtNDguNzIzIDguNDEzLTcyLjA5MSA4LjQxM3ptMC00NTguODFjLTE3Ljg0IDAtMzUuODg2IDYuNDM0LTUzLjMzNiAxMi42NTYtNC45ODEgMS43NzYtMTAuMTMxIDMuNjEyLTE1LjEwNyA1LjIyOC0yMi4xNSA3LjE5Mi00NS4xNzUgMTUuNjg3LTYzLjUwMiAyOS4wMjUtMTQuNzI3IDEwLjcxNy0yNi4wMSAyNi43NzktMzYuOTIyIDQyLjMxMy0yLjU0IDMuNjE2LTUuMTY3IDcuMzU0LTcuNzk0IDEwLjk2NS0zLjI4NyA0LjUxNi02LjgxOSA5LjA1OS0xMC4yMzYgMTMuNDUyLTExIDE0LjE0NS0yMi4zNzUgMjguNzcxLTI3LjY5NyA0NS4xNjEtNC4wOCAxMi41NjYtMi4xNzEgMjYuODk5LS4xNSA0Mi4wNzMgMS4yIDkuMDEyIDIuNDQxIDE4LjMzMiAyLjQ0MSAyNy42NTQgMCA5Ljk0My0xLjcxMiAxOS45NDItMy4zNjkgMjkuNjExLTIuNTM3IDE0LjgxNS00LjkzNCAyOC44MDktMS4wNCA0MC44MDEgNi4xNjQgMTguOTg0IDE5LjAxNiAzNi40MTEgMzEuNDQ0IDUzLjI2NCAxLjc2NyAyLjM5NiAzLjUxNyA0Ljc3IDUuMjI5IDcuMTIxIDExLjUwMyAxNS44MDcgMjguMzU2IDI3Ljg5IDQ0LjY1NCAzOS41NzUgMi41NTMgMS44MyA1LjEgMy42NTYgNy42MjUgNS40OTMgMTcuNjM1IDEyLjgzNSAzNy4wOTIgMjUuNzMgNTkuODU0IDMzLjExOSAyMC43OSA2Ljc1MiA0My4wNTQgNy4zMDEgNjcuOTA2IDcuMzAxIDIyLjI0NyAwIDQ1LjgwNS0uNTk3IDY3Ljc2Ni03LjcyOSAxNS4zNTctNC45ODUgMjcuNjktMTQuOTk0IDQwLjc0OC0yNS41OTEgNS4wMDQtNC4wNjEgMTAuMTc5LTguMjYgMTUuNTU1LTEyLjE3MyA1Ljc4NC00LjIwOSAxMS44MTgtOC4wNTMgMTcuNjU0LTExLjc3IDEzLjkxMi04Ljg1OSAyNy4wNTItMTcuMjI5IDM2LjE4Ny0yOS43NzggMTQuNzkzLTIwLjMyNyAyNS42MDktNDAuODQ4IDMyLjE0OC02MC45OTEgNi42NDYtMjAuNDcgNi42NDMtNDIuNzk4IDYuNjM4LTY2LjQzN3YtMS44MTdjMC04LjcxMi45MjItMTcuNTkgMS44MTQtMjYuMTc1IDEuNjc2LTE2LjEzMyAzLjI1OS0zMS4zNzEtMS4wMDQtNDQuNDk4LTMuOTYyLTEyLjIwMy0xNC41MTctMjEuNzI3LTI1LjY5MS0zMS44MS03LjQzOC02LjcxMi0xNS4xMjktMTMuNjUyLTIwLjk0NC0yMS42NDItNS4xMTEtNy4wMjUtOS40MDctMTQuNzA2LTEzLjU2Mi0yMi4xMzUtNy41NTUtMTMuNTA4LTE0LjY4OS0yNi4yNjgtMjUuOTkzLTM0LjQ5My0xNC43NTktMTAuNzQxLTMyLjgwMS0xNi4zMTQtNTEuOTAxLTIyLjIxNS00LjAxLTEuMjM5LTguMTU2LTIuNTItMTIuMjE3LTMuODM4LTcuNDE2LTIuNDA4LTE0LjkyNi01LjY1Ny0yMi4xODgtOC43OTgtMTQuNjg2LTYuMzUzLTI5Ljg3MS0xMi45MjItNDUuMDEtMTIuOTIyeiIgZmlsbD0iI2Q3ZDFkMSIgb3BhY2l0eT0iMSIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMTUuMjQ1IDE0Ni45MzhhNy4wMDEgNy4wMDEgMCAwIDEtNi45NDQtNi4xODljLTIuNDY1LTIxLjExMS0xNS45ODYtMzQuNjMzLTM3LjA5OC0zNy4wOTlhNy4wMDEgNy4wMDEgMCAwIDEtNi4xNDItNy43NjUgNy4wMDUgNy4wMDUgMCAwIDEgNy43NjUtNi4xNDFjMjcuNjg4IDMuMjMzIDQ2LjE0OCAyMS42OTMgNDkuMzgxIDQ5LjM4MWE3IDcgMCAwIDEtNi45NjIgNy44MTN6TTIzMi4zNTQgNDA0LjAxYy0xNi40MzcgMC0zMS42MTctNy43My00My4wNDUtMjIuNTY3QTcgNyAwIDEgMSAyMDAuNCAzNzIuOWMxMi45NzEgMTYuODM5IDMxLjUyMSAyMS40ODMgNTAuODk1IDEyLjc0MWE3IDcgMCAwIDEgNS43NTggMTIuNzYyYy04LjM0IDMuNzYyLTE2LjY3IDUuNjA3LTI0LjY5OSA1LjYwN3pNMzgyLjk4MyAzNDAuNTU4YTcuMDAyIDcuMDAyIDAgMCAxLTIuNzExLTEzLjQ1N2MxOS42LTguMjIyIDI4Ljg0Mi0yNC45NjQgMjUuMzU2LTQ1LjkzMmE3IDcgMCAxIDEgMTMuODExLTIuMjk1YzQuNTcxIDI3LjQ5OC04LjA0NiA1MC4zNTQtMzMuNzUxIDYxLjEzN2E2Ljk3NyA2Ljk3NyAwIDAgMS0yLjcwNS41NDd6TTMwNS43NDQgMjc3Ljc1NGE3IDcgMCAwIDEtNi4zODMtNC4xMTljLTguNzUzLTE5LjM2OS0yNS43NC0yOC4xNTQtNDYuNjA0LTI0LjA5NGE3LjAwMiA3LjAwMiAwIDAgMS0yLjY3Mi0xMy43NDRjMjcuMzctNS4zMTcgNTAuNTU0IDYuNjcgNjIuMDM0IDMyLjA3MmE3LjAwMSA3LjAwMSAwIDAgMS02LjM3NSA5Ljg4NXpNMTE1LjA5NCAyMjkuNjM1YTcuMDAyIDcuMDAyIDAgMCAxLTYuNTg0LTQuNjIzYy05LjQ3My0yNi4yMTctMS4yLTUwLjk3OCAyMi4xMy02Ni4yMzVhNyA3IDAgMSAxIDcuNjYyIDExLjcxNmMtMTcuNzg4IDExLjYzMy0yMy44NDggMjkuNzctMTYuNjI1IDQ5Ljc2YTcgNyAwIDAgMS00LjIwNSA4Ljk2MiA2Ljk1NiA2Ljk1NiAwIDAgMS0yLjM3OC40MnoiIGZpbGw9IiNkN2QxZDEiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+);
}
</style>
<?php
}
add_action( 'wp_head', 'divibooster_rolling_snowballs_css' );
}
if (!function_exists('divibooster_rolling_snowballs_js')) {
function divibooster_rolling_snowballs_js() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('.rolling-snowballs-container');
function createSnowball() {
var snowball = document.createElement('div');
snowball.classList.add('snowball');
// Randomize snowball size
var minSize = 10;
var maxSize = 80;
var power = 2;
var sizeRandom = Math.pow(Math.random(), power);
var size = sizeRandom * (maxSize - minSize) + minSize;
snowball.style.setProperty('--snowball-size', size + 'px');
// Randomize roll duration
var minSpeed = 3;
var maxSpeed = 10;
var power = 2;
var speedRandom = Math.pow(Math.random(), power);
var speed = (1 - speedRandom) * (maxSpeed - minSpeed) + minSpeed;
speed = 20 * speed; // Apply a scale factor of 20
snowball.style.setProperty('--snowball-speed', speed + 's');
container.appendChild(snowball);
setTimeout(() => snowball.remove(), 120000);
}
if (container) {
setInterval(createSnowball, 2000);
}
});
</script>
<?php
}
add_action( 'wp_footer', 'divibooster_rolling_snowballs_js', 100 );
}Related Post: Adding PHP to the Divi Theme
Now, on any section, row or module that you want to add falling snow to, just give it a CSS Class of "rolling-snowballs", like so:
0 Comments