Advanced Elementor Code

[3D] Make a 360 Degree Image Rotation Effect in Elementor Website | WordPress 3D Object/Model Viewer

<style>
model-viewer{
    width:100%;
    height: 100vh;
}
@media (max-width: 1024px) {
model-viewer{
    height:600px;
}
}
@media (max-width: 767px) {
model-viewer{
    height:350px;
}
}
</style>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> 

<model-viewer
    src="ADD_YOUR_GLTF_FILE"
    shadow-intensity="1"
    disable-zoom
    camera-controls
    auto-rotate
>
</model-viewer>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

How To %[https://www.youtube.com/watch?v=EmiiBvFgnys]

Tutorial Source

Elementor Animated Circle Background Effect

CSS code snippet on the Container:

selector{
    --radius: 300px;
    --heading-blur: 10px;
    --text-delay: 1.2s;
}
selector{
    --x: 50%;
    --y: 50%;
}
selector .focus-overlay{
    clip-path: circle(0 at var(--x) var(--y));
    transition: all 0.2s linear;
}
selector.hover .focus-overlay{
    clip-path: circle(var(--radius) at var(--x) var(--y));
}


/* Heading Animtion */

selector .elementor-widget-heading{
    filter: blur(var(--heading-blur));
    transition: all 2s ease-in-out;
    opacity: 0.75;
}
selector.animated .elementor-widget-heading{
    filter: blur(0);
    opacity: 1;
}


/* Text and Button Animtion */

selector .elementor-widget-text-editor,
selector .elementor-widget-button{
    transform: translateY(30px);
    transition: all 1s ease-in-out var(--text-delay);
    opacity: 0;
    animation: none;
}
selector.animated .elementor-widget-text-editor,
selector.animated .elementor-widget-button{
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 767px){
selector > *{
    clip-path: none !important;
}
}

JavaScript code snippet:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){

$(".focus-section").on('mousemove', function(e){
   var parentOffset = $(this).offset(),
   x = e.pageX - parentOffset.left,
   y = e.pageY - parentOffset.top

   $(this).addClass('hover')

   $('.focus-section').css({
       '--x': x + 'px',
       '--y': y + 'px',

   })
})

$(".focus-section").on('mouseleave', function(){
  $(this).removeClass('hover')
})

})
</script>

Tutorial Source