Skip to content

Instantly share code, notes, and snippets.

View oooh-boi's full-sized avatar

Oooh Boi oooh-boi

View GitHub Profile
<script>
;( function() {
// wait until gsap & ScrollTrigger available
let chck_if_gsap_loaded = setInterval( function() {
if( window.gsap && window.ScrollTrigger ) {
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
@oooh-boi
oooh-boi / gist:a2e47433443125887d20aafd5cec7388
Created January 18, 2020 12:21
OoohBoi Video Tutorial : Full-height Image Widget in Elementor PRO
/* be sure to copy-paste to the Image Widget Custom CSS panel */
selector,
selector .elementor-widget-container,
selector .elementor-image,
selector .elementor-image > a {
height: 100%;
}
selector .elementor-image img {
object-fit: cover;
object-position: 50% 50%;
<script>
;(function() {
// locomotive scroll storage
var loco_scroll = {};
// wait until sfe_loco_scroll available
var chck_if_sfe_loco_scroll_loaded = setInterval(function() {
if (window.sfe_loco_scroll && Object.keys(window.sfe_loco_scroll).length !== 0 && window.gsap && window.ScrollTrigger) {
@oooh-boi
oooh-boi / fluid H and text
Created September 27, 2022 13:20
Fluid Typography in Elementor
<style>
.elementor-kit-4 h1 { font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem); }
.elementor-kit-4 h2 { font-size: clamp(1.777rem, 1.5517rem + 1.1265vw, 3.157rem); }
.elementor-kit-4 h3 { font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem); }
.elementor-kit-4 h4 { font-size: clamp(1.333rem, 1.2605rem + 0.3624vw, 1.777rem); }
.elementor-kit-4 h5 { font-size: clamp(1.2rem, 1.1783rem + 0.1086vw, 1.333rem); }
.elementor-kit-XXX { /* replace XXX with your own Site Settings kit ID */
--e-global-typography-XXXXXX-font-size: clamp(1.0625rem, 0.9707rem + 0.4592vw, 1.625rem); /* any custom font 1 ... replace XXXXXX with your own */
@oooh-boi
oooh-boi / A vertical header challenge in Elementor
Created October 13, 2022 15:54
Video tutorial copy-paste CSS
@media only screen and (min-width: 768px) {
selector .ob-wrapper {
width: 84px !important;
position: fixed;
top: 0;
right: 0;
min-height: 100vh;
}
selector .ob-logo {
height: 255px;
@oooh-boi
oooh-boi / ob-show-more-show-less-gsap.js
Created October 10, 2021 14:12
Show More - Show Less content in Elementor by using the GSAP
;( function() {
document.addEventListener( 'DOMContentLoaded', unfold_content );
function unfold_content() {
let close_text = "Show Less";
let the_unfolds = gsap.utils.toArray( '.ob-unfold' );
the_unfolds.forEach( ( ob, i ) => {
@oooh-boi
oooh-boi / elementor-tips-tricks.php
Created March 28, 2021 11:28 — forked from iqbalrony/elementor-tips-tricks.php
Elementor coding tips tricks. (Exclude & Include example for elementor group control)
<?php
/*
* Exclude & Include in group control
*/
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'item_background',
'label' => __( 'Background', 'happy-addons-pro' ),
'types' => [ 'classic', 'gradient' ],