# 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](https://makedreamwebsite.com/3d-make-a-360-degree-image-rotation-effect-in-elementor-website/)

## 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](https://makedreamwebsite.com/elementor-animated-circle-background-effect/)