Pop's Studio Site Logo 2
Menu
Close
  • Facebook
  • LinkedIn
  • YouTube
  • X

HTML & CSS CODE

CSS

				
					<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@0.2.28/bundled/lenis.js"></script>

<script>
const lenis = new Lenis({
  duration: 1.2, // Scroll duration
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Easing function for smooth transitions
  direction: 'vertical', // Scroll direction: vertical or horizontal
  gestureDirection: 'vertical', // Gesture direction: vertical, horizontal, or both
  smooth: true, // Enable smooth scrolling
  mouseMultiplier: 1, // Mouse scroll speed multiplier
  smoothTouch: false, // Disable smooth scrolling for touch devices
  touchMultiplier: 2, // Touch scroll speed multiplier
  infinite: false, // Disable infinite scroll
});

// Optional: Listen to scroll events
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress });
});

// Animation frame loop function
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

Also add this if smooth scroll is laggy

<style>
    
    html  {
    scroll-behavior: auto !important; /* Disables default smooth scrolling */
}
    
    
</style>

Use this CSS code on Elementor Pro – Custom Code option. Location </body> End for best result. Also works on Elementor free in </>html widget

CSS

				
					.frostedglass {
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
}

CSS Classes: frostedglass

GLASS

CSS

				
					selector {
    animation: spin 8s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

CSS

				
					selector {
  writing-mode: vertical-lr;
}

Vertical Text

CSS

				
					.heading
{
     background: url("https://diywebsitespro.com/wp-content/uploads/2023/03/spiderman.png") repeat 30% 70%  ;

     padding-box: 100px  ;
     background-size: 100%;
     background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
     background-color: white;

     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}

CSS Classes: heading

** Image URL on – background: url(“—–“) **

Image Behind Text or Headings

HTML

				
					<style>
  h2 {}

  #glass-text {
    text-shadow: 1 1 .7px, 0 0 1.1px, 0 0 1.1px;
    filter: url(#in-and-out);
  }

  #glass-text:before,
  #glass-text:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    content: attr(data-text);
  }

  #glass-text:before {
    color: #000 ;
    text-shadow: -1px -1px 1px, 0 -1px 1px, 1px -1px 1px, 1px 0 1px, 1px 1px 1px, 0 1px 1px, -1px 1px 1px, -1px 0 1px;
  }

  #glass-text:after {
    color: rgba(234, 234, 234, .9);
    filter: url(#lightA3);
  }
</style>

<h2>
  <svg style="position: absolute; width: 0; height: 0;">
    <defs>
      <filter id="lightA3">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="B" />
        <feSpecularLighting in="B" specularExponent="128" result="S">
          <feDistantLight azimuth="225" elevation="70" />
        </feSpecularLighting>
        <feComposite in="S" in2="SourceAlpha" operator="in" result="L" />
        <feComposite in="SourceGraphic" in2="L" operator="arithmetic" k2="1" k3="1" />
      </filter>
      <filter id="in-and-out">
        <feGaussianBlur stdDeviation="4" in="SourceAlpha" />
        <feOffset result="fO" dy="5" dx="5" />
        <feComposite in2="fO" operator="xor" in="SourceGraphic" />
      </filter>
    </defs>
  </svg>

</h2>

Heading widget CSS ID: glass-text

Pest code in Elementor HTML widget

** Adjust text color for more perfect effect. ** 

Add Your Heading Text Here

CSS

				
					.pops-service-link-btn-1 .elementor-button .elementor-button-icon svg path {
    transition: all .4s;
}

.pops-service-link-btn-1 .elementor-button:hover .elementor-button-icon svg path {
    stroke: var(--e-global-color-accent);
}

.pops-service-link-btn-1.current .elementor-button .elementor-button-icon svg path {
    stroke: var(--e-global-color-accent);
}
.pops-pulse-lgrn-1 .elementor-button:hover {
    animation: pulses-lgreen 1s;
    box-shadow: 0 0 0 2em transparent;
}

@keyframes pulses-lgreen {
    0% {
        box-shadow: 0 0 0 0 #cafc01;
    }
}

In Elementor Pro:

  • Add your button widget
  • Go to Advanced > CSS Classes
  • Add: pops-service-link-btn-1 (for icon animation)
  • Or add: pops-pulse-lgrn-1 (for pulse animation)
  • Or add: pops-service-link-btn-1 pops-pulse-lgrn-1 (for both)
Click here