Animated Circle and positioning on Website

[weodeo]

Hey Friends,

I want to implement the same "Scroll Down" Circle like on this site: "https://dddhotel.jp/en/"

So by mouseover the circle gets bigger and by clicking on it its Srolls to an anchor. Shouldn't be that complicated, right?

How can I realize it and how do I define the position of the circle?

Thanks for your help!
Best,
Dennis

[Richard]

Dear Dennis @weodeo

Its a nice website :)
The Scroll button itself is not a problem it can be an anchor link:

https://www.rapidtables.com/web/html/link/html-anchor-link.html

https://stackoverflow.com/questions/44070311/jquery-scroll-to-anchor-on-button-click
Some Custom Javascript can be added to make it nicer if desired.

The Circle expanding is done through CSS & 'hover':
https://www.w3schools.com/cssref/sel_hover.asp

When you hover over the Circle the CSS changes from:

• transform: scale(1);

to -

• transform: scale(4);

https://css-tricks.com/snippets/css/scale-on-hover-with-webkit-transition/
https://www.w3schools.com/cssref/css3_pr_transform.asp

Thats the basic setup i believe (apologies if im wrong)
The finer details will be the tricky part

Good Luck, i hope i have been of help and sorry that i cant go into a deeper tutorial! :)

Sincerely
Richard

[dmncn]

Wow, I love EVERYTHING of that website. The nicer pictures I’ve ever seen for a hotel.

[weodeo]

Yea it works! Thanks Richard!

and yeah its a really cool site :)

Thanks for the great support,

best
Dennis

[Richard]

Dear Dennis @weodeo

Thanks for getting back to me, Awesome to hear that you succeeded! :)
Good luck on the rest of your Lay Theme journey, thank you for using the Theme and have a wonderful day,

Best
Richard