Video Category: Elementor

Hexagon and Transition Effect (CSS Snippet)

selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.shadow::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.shadow:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}

Hide and Show (CSS Snippet)

selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*Column Element Show/Hide CSS*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

The Code to Enable the Data Transfer

// Change to true to enable email notifications
var emailNotification = false;
var emailAddress = "Change_to_your_Email";

// DO NOT EDIT THESE NEXT PARAMS
var isNewSheet = false;
var recivedData = [];
/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
  return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}
// Webhook Receiver - triggered with form webhook to pusblished App URL.
function doPost( e ) {
  var params = JSON.stringify(e.parameter);
  params = JSON.parse(params);
  insertToSheet(params);
  // HTTP Response
  return HtmlService.createHtmlOutput( "post request received" );
}
// Flattens a nested object for easier use with a spreadsheet
function flattenObject( ob ) {
  var toReturn = {};
  for ( var i in ob ) {
    if ( ! ob.hasOwnProperty( i ) ) continue;
    if ( ( typeof ob[ i ] ) == 'object' ) {
      var flatObject = flattenObject( ob[ i ] );
      for ( var x in flatObject ) {
        if ( ! flatObject.hasOwnProperty( x ) ) continue;
        toReturn[ i + '.' + x ] = flatObject[ x ];
      }
    } else {
      toReturn[ i ] = ob[ i ];
    }
  }
  return toReturn;
}
// normalize headers
function getHeaders( formSheet, keys ) {
  var headers = [];
  
  // retrieve existing headers
    if ( ! isNewSheet ) {
    headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
    }
  // add any additional headers
  var newHeaders = [];
  newHeaders = keys.filter( function( k ) {
    return headers.indexOf( k ) > -1 ? false : k;
  } );
  newHeaders.forEach( function( h ) {
    headers.push( h );
  } );
  return headers;
}
// normalize values
function getValues( headers, flat ) {
  var values = [];
  // push values based on headers
  headers.forEach( function( h ){
    values.push( flat[ h ] );
  });
  return values;
}
// Insert headers
function setHeaders( sheet, values ) {
  var headerRow = sheet.getRange( 1, 1, 1, values.length )
  headerRow.setValues( [ values ] );
  headerRow.setFontWeight( "bold" ).setHorizontalAlignment( "center" );
}
// Insert Data into Sheet
function setValues( sheet, values ) {
  var lastRow = Math.max( sheet.getLastRow(),1 );
  sheet.insertRowAfter( lastRow );
  sheet.getRange( lastRow + 1, 1, 1, values.length ).setValues( [ values ] ).setFontWeight( "normal" ).setHorizontalAlignment( "center" );
}
// Find or create sheet for form
function getFormSheet( formName ) {
  var formSheet;
  var activeSheet = SpreadsheetApp.getActiveSpreadsheet();
  // create sheet if needed
  if ( activeSheet.getSheetByName( formName ) == null ) {
      formSheet = activeSheet.insertSheet();
      formSheet.setName( formName );
      isNewSheet = true;
  }
  return activeSheet.getSheetByName( formName );
}

// magic function where it all happens
function insertToSheet( data ){
  var flat = flattenObject( data );
  var keys = Object.keys( flat );
  var formName = data["form_name"];
  var formSheet = getFormSheet( formName );
  var headers = getHeaders( formSheet, keys );
  var values = getValues( headers, flat );
  setHeaders( formSheet, headers );
  setValues( formSheet, values );
  
    if ( emailNotification ) {
    sendNotification( data, getSeetURL() );
  }
}
function getSeetURL() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  return spreadsheet.getUrl();
}
function sendNotification( data, url ) {
  var subject = "A new Elementor Pro Froms subbmition has been inserted to your sheet";
  var message = "A new subbmition has been recived via " + data['form_name'] + " form and inserted into your Google sheet at: " + url;
  MailApp.sendEmail( emailAddress, subject, message, {
    name: 'Automatic Emailer Script'
  } );
}

Animation Button Effect on Hover (CSS Snippet)

    selector{
        --size: 6px;
        --color: #ffffff;
    }
    selector a{
        position: relative;
    }
    selector a:before{
        content: '';
        position: absolute;
        top: var(--size);
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% - var(--size) * 2);
        background: var(--color);
        transition: 0.6s ease-in-out;
        transform: scaleY(1);
    }
    selector a:hover:before{
        transform: scaleY(0);
    }
    selector a:after{
        content: '';
        position: absolute;
        left: var(--size);
        top: -10px;
        height: calc(100% + 20px);
        width: calc(100% - var(--size) * 2);
        background: var(--color);
        transition: 0.5s ease-in-out;
        transform: scaleX(1);
    }
    selector a:hover:after{
        transform: scaleX(0);
    }
    selector span{
        position: relative;
        z-index: 3;
    }  

CSS Snippet (Blur Zoom Hover Effect)

selector{
    --zoom-in: 1.3;
    --zoom-out: 0.7;
    --hover-background: ;
}
selector{
    transition: all .5;
}
selector:hover .services{
    filter: blur(5px);
    transform: scale(var(--zoom-out));
}
.services{
    transform: scale(1);
    transition: all .5s;
}
.services:hover{
    transform: scale(var(--zoom-in)) !important;
    z-index: 2;
    filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
    transition: all .5s;
}
selector .services:hover .elementor-widget-wrap{
    background: var(--hover-background) !important;
}

Hide Image (CSS Snippet)

    .all-tws{
        display: none;
    }
    #black-tws{
        display: block;
    }

Dynamic Image (JavaScript)

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    //No Youtube Remake using this Snippet without Permission
    //Copyrighted by Jim Fahad
    var $ = jQuery
    $(document).ready(function(){
        $('[data-showme]').on('click', function(){
            var showme = $(this).attr('data-showme')
            
            $('.all-tws').hide()
            $('#' + showme).show()
        })
    })
    </script>

Button Attributes:

1. Black

data-showme|black-tws

2, White

data-showme|white-tws

3. Red

data-showme|red-tws

4, Blue

data-showme|blue-tws

CSS Snippet

selector .elementor-widget-image{
        transition: ease-in-out 0.5s;
    }
    selector:hover .elementor-widget-image{
        transform: scale(.69);
    }
    selector:hover .bali1{
        transform-origin: center left;
    }
    selector:hover .bali2{
        transform-origin: center top;
    }
    selector:hover .bali3{
        transform-origin: bottom right;
    }

CSS Snippet

    /*Content Show/Hide on Hover*/
    selector{
        opacity: 0;
        transition: 0.5s ease-in-out;
    }
    selector:hover{
        opacity: 1;
    }

CSS Snippet (First Heading)

    selector{
        -webkit-text-stroke: 3px #DB00FD;
    }

CSS Snippet (Second Heading)

        selector{
        -webkit-animation: water 5s ease-in-out infinite;
                animation: water 5s ease-in-out infinite;
    }
    @-webkit-keyframes water{
        0%, 100%{
            -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                    clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
        }
        50%{
            -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                    clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
        }
    }
    @keyframes water{
        0%, 100%{
            -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                    clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
        }
        50%{
            -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                    clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
        }

HTML Code

<script>
jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
</script>

<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

CSS Snippet

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #000000;
    --transition: .3s ease-in-out;
    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
} 

Some properties on the CSS code above that you need to notice are:

• header-height: This property is used to control the height of the header (which set to 90px in this example). If you want to change the value, make sure to change both values: on the CSS code and on the header section’s settings.
• opacity: This property is used to control the degree to which your shrinking header is transparent. You can use a value between 0 to 1. In this example, we use the value 0.90.
• shrink-me: This property is used to control the degree to which your header and logo shrink when a visitor starts to scroll down. You can use the value between 0 to 1. We use the value 0.80 in this example. This value will make your header and logo shrink to 80 percent from the initial size.
• sticky-background-color: This property is used to control the color of the shrunken header (the header that appears when a visitor scrolls down). You can use a color name (i.e. red) or the hex code of the color. In this example, we use the hex code of 0e41e5 which represents blue.
• transition: This property is used to control how long it takes for the header to shrink from its initial size.

CSS Snippet

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}

.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
 display: none!important;
}

JavaScript Snippet

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    var offset = 400
    $(window).on('load scroll', function(){
        
        if( $(window).scrollTop() > offset ){
            $('body').addClass('show')
        }else{
            $('body').removeClass('show')
        }
    })
    </script>

CSS Snippet

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}