phucbm

<div class="container">

  <main class="content">
    <section class="hero">
      <img src="https://images.unsplash.com/photo-1557672172-298e090bd0f1?w=800&h=400&fit=crop" alt="Abstract Technology" class="hero-image">
      <div class="hero-text">
        <h2>Masked Blur Effects</h2>
        <p>Combining gradients with backdrop filters</p>
      </div>
    </section>

phucbm

/**
 * Scroll Progress v0.0.2
 * https://gist.github.com/phucbm/5fef204a4412cd93d38ff1bfb9842d7b
 * Add a scroll progress variable to an element
 * Requires: ScrollSnooper
 *
 * <div data-scroll-progress="<trigger element>"
 *      data-scroll-progress-start="top bottom"
 *      data-scroll-progress-end="bottom top"
 * >

phucbm

/**
 * Mouse follower v0.0.1
 */
// Example HTML usage:
// <div id="container" data-mouse-container>
//   <div data-mouse-follower="0.2">This element will follow the mouse</div>
// </div>
//
// Alternative with referenced container:
// <div id="my-container" data-mouse-container></div>

phucbm

function getComputedCSSValue(input, element = null) {
    try {
        let calcExpression;

        // Check if we're getting a CSS variable from an element
        if (element && input.startsWith('--')) {
            calcExpression = getComputedStyle(element)
                .getPropertyValue(input)
                .trim();
        } else {

phucbm

// paste this script in the console log
const origTrigger = jQuery.fn.trigger;
jQuery.fn.trigger = function(event) {
    console.log('🔥 Event triggered:', event);
    return origTrigger.apply(this, arguments);
}

phucbm

/**
 * Magnetic button v0.0.4
 * https://gist.github.com/phucbm/536ab8b3a4b6a793601ab20254b1e9f0
 *
 * To use this script, add the `data-magnetic` attribute to any HTML element you want to have a magnetic effect.
 * You can optionally customize the behavior by adding the following data attributes:
 *
 * - `data-distance`: Defines the range within which the magnetic effect is active (in pixels). Default is 100.
 * - `data-attraction`: Controls the strength of the magnetic pull (0 = strong, 1 = weak). Default is 0.45.
 * - `data-fraction`: Controls the speed of the magnetic movement (0 = instant, 1 = slow). Default is 0.1.

phucbm

/**
 * Fetches all repositories from a GitHub organization.
 *
 * @param {Object} params - The parameters for fetching repositories.
 * @param {string} params.org - The name of the GitHub organization.
 * @param {string} params.token - The personal access token for GitHub API authentication.
 * @param {string} [params.sort="pushed"] - The sorting order of the repositories.
 * @param {Function} [params.onSuccess] - Callback function to be called on successful data fetch.
 * @param {Function} [params.onError] - Callback function to be called on error.
 * @returns {Promise<Object[]>} - A promise that resolves to an array of repository objects.

phucbm

/**
 * Scroll To Center
 * 
 * Generated by ChatGPT
 * 
 * @param element
 */
function scrollToCenter(element) {
    if (!element) return;

phucbm

/**
 * Changes the text of an element, measures its width, and then restores the original text.
 *
 * Generated by ChatGPT
 *
 * @param {HTMLElement} element - The HTML element whose text will be changed and measured.
 * @param {string} newText - The new text to set for the element.
 * @returns {number} - The width of the element with the new text.
 * @version 1.0.0
 */

phucbm

/**
 * Calculate points on circle
 * (generated by ChatGPT and customized by @phucbm)
 * https://gist.github.com/phucbm/33a575a0ca43634df2edeb4b838c8a61
 * 
 * @param numPoints
 * @param radius
 * @param startAngleInDegrees
 * @param clockwise
 * @returns {*[]}