Skip to content

Instantly share code, notes, and snippets.

Avatar

Oooh Boi oooh-boi

View GitHub Profile
@oooh-boi
oooh-boi / gist:cd26df98777b2fbadf8d148653975e94
Created Mar 30, 2022
YouTube - The floating link preview
View gist:cd26df98777b2fbadf8d148653975e94
/* This is full copy-paste for the Elementotr PRO's Custom Code. In case you use "Simple custom CSS and JS" plugin,
you'll have to separate the CSS from JS, and exclude the STYLE and SCRIPT tags */
<style>
[data-hover-img] .img-floater {
position: absolute;
opacity: 0;
width: 400px;
height: 300px;
top: -310px; /* or... 150px to center it vertically */
@oooh-boi
oooh-boi / OoohBoi GSAP Teleporter
Created Dec 12, 2021
Copy-paste code into Elementor's Custom Code file or use Snippets plugin for WordPress. If you use Snippets omit the SCRIPT wrapping element.
View OoohBoi GSAP Teleporter
<script>
;( function() {
document.addEventListener( 'DOMContentLoaded', my_stuff );
function my_stuff() {
let is_mobile = false;
let hero = document.querySelector( '#hero' );
@oooh-boi
oooh-boi / ob-show-more-show-less-gsap.css
Last active Oct 13, 2021
Show More - Show Less content in Elementor by using the GSAP (css)
View ob-show-more-show-less-gsap.css
body:not(.elementor-editor-active) .ob-unfold .ob-content { overflow: hidden; height: 200px; }
body:not(.elementor-editor-active) .ob-unfold .ob-blanket { cursor: pointer; z-index: 100; }
/* If you plan to use variable initial heights... */
/*
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-300 { height: 300px; }
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-toggle { height: 0px; }
*/
/* don't forget to append these classes to your ob-content in Elementor !!! */
@oooh-boi
oooh-boi / ob-show-more-show-less-gsap.js
Created Oct 10, 2021
Show More - Show Less content in Elementor by using the GSAP
View ob-show-more-show-less-gsap.js
;( 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 ) => {
View Locomotive Scroll + ScrollTrigger
<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) {
View Simple GSAP ScrollTrigger Test
<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 / elementor-tips-tricks.php
Created Mar 28, 2021 — forked from iqbalrony/elementor-tips-tricks.php
Elementor coding tips tricks. (Exclude & Include example for elementor group control)
View elementor-tips-tricks.php
<?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' ],
@oooh-boi
oooh-boi / gist:a2e47433443125887d20aafd5cec7388
Created Jan 18, 2020
OoohBoi Video Tutorial : Full-height Image Widget in Elementor PRO
View gist:a2e47433443125887d20aafd5cec7388
/* 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%;
@oooh-boi
oooh-boi / gist:b25f29433421f353e8d365e46a9d8f71
Created Jan 16, 2020
OoohBoi Video Tutorial : Gradient Text in Elementor PRO
View gist:b25f29433421f353e8d365e46a9d8f71
/* EXAMPLE GRADIENTS */
/* To be used with Heading widget */
selector .elementor-heading-title {
background-image: linear-gradient(to right top, #ec2551, #c52a6e, #943979, #633e71, #3d3a59);
background-clip: text;
-webkit-background-clip: text;
}
/* To be used with Text Editor widget */
@oooh-boi
oooh-boi / gist:5d1f00ee8362292dba0af27700b05d74
Created Jan 7, 2020
OoohBoi Video Tutorial : Super-flexible Sections and Columns in Elementor PRO
View gist:5d1f00ee8362292dba0af27700b05d74
/* MAGICAL CSS Rule */
selector .elementor-container .elementor-row {
flex-wrap: wrap;
/* uncomment for columns alignment */
/* justify-content: center; */
}
/* Responsive Columns Alignment - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
selector .elementor-container .elementor-row {