Menu
I've come across a number of parallaxing tutorials (this one in particular I'm looking at now: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/); however, they all seem to involve a background image in a <div> that's fixed. Is is possible to achieve a similar parallax effect if my image is in a <img> tag?
720
If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the <img /> tag plus alt attribute. For everything else there's CSS background images. The other time to use CSS background images is when doing image-replacement of text eg.
The img could also use object-fit: cover; to replicate a background image with background-size: cover; . You can play with the absolute positioning properties top , right , bottom , left . In combination with setting the min-width and max-width to 100% instead of the width and height .
To make a parallax effect, every element is moving at a different pace and time. That is how we achieve the illusion of depth, even though we are scrolling in 2D. The rule of thumb moves the “furthest” objects the least, like how it looks in the real world.
Provided you use the same attributes then yeah sure it can
An example of this can be seen here: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
194
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
