In this tutorial, we’ll create a popup with a mouse track effect that you can add to your WordPress website using Elementor.
You’ll learn how to:
✔︎ Create a mouse track effect animation
✔︎ Use position absolute
✔︎ Set conditions and triggers
hey everyone had asked from elemental
here today we will create a cool lost in
space sign a pop-up using mouse track
effect let’s dig in in finder search for
pop-up and then you pop up and give it a
name I’m going to create my own pop-up
so let’s just close this first let’s set
up the size of the pop-up in the setting
tab under layout change the width to 600
pixel and in the height drop-down menu
choose custom then change the height to
square shape okay now let’s change the
background of the pop-up under the style
tab click on the classic background type
and choose a background image change the
position to center Center choose
no-repeat and set the size to cover cool
so all the pop-up settings already let’s
start working on the inside open a new
section with one column drag in a
heading widget and a button widget type
all the text that you need and give it
some style okay now we can start working
on the background click on the section
handle to enter its settings then under
style choose classic background and add
an image change the position to center
Center choose no-repeat and set the size
to cover now let’s go back to the Layout
tab you want the image to cover the
whole square go to the height drop-down
menu and choose min height then make
sure that the height is 600 pixel so it
will match our popup settings now let’s
start adding our planets and give them
an absolute position so we could place
them wherever we want in the composition
so the design is ready now we can move
on to the mouse effect click on one of
them then under the Advanced tab click
on motion effects and switch on the
mouse effects now click on the mouse
track editing button and change the
direction to direct and the speed to 0.3
each plant will have a different speed
so each plant will move differently from
the one next to it let’s do another one
click on the pink planet and under the
Advanced tab motion effects switch on
the mouse effects and click on the mouse
track editing button I’m going to keep
the direction here opposite and change
the speed to 0.8 now we have a cool
interaction between the planets let’s
keep doing the same thing on the other
images
so all our planets are moving but the
stars in the background aren’t let’s
give them some motion to click on the
section handle there are turret settings
then under style switch the mouse
effects to own click on the mouse track
editing button keep the direction
opposite and change the speed to 0.4 so
it won’t be too fast coupe
so our pop up is ready let’s click on
publish and set the conditions and
triggers let’s set it on the entire side
and the trigger on page load after 3
seconds click on save and close and
let’s see it in action awesome I hope
you enjoyed this tutorial don’t forget
to subscribe to our YouTube channel to
get all the latest updates and tutorials
bye
