Menu
I would like to know what an efficient way is to animate positions of images (or background images) in relation to the mouse. Take Github, for example:
https://github.com/thispagedoesntexist
This is one hella sexy 404 page.
I want to make an impact on my users, and this surely does so in my opinion.
Questions
1) How can this be done?
2) Just CSS? CSS & JS?
3) Lastly, any libraries for stuff like this?
796
The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .
You can give background-position up to four values in modern browsers: If you declare one value, that value is the horizontal offset. The browser sets the vertical offset to center . When you declare two values, the first value is the horizontal offset and the second value is the vertical offset.
Syntax: background-position: value; Note: The background-image is placed default to the top-left corner of an element with a repetition on both horizontally & vertically.
This was made with a jQuery plugin called Plax.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
