This may be hard to explain without a visual but here goes: imagine a 'normal' webpage - nothing fancy. Now imagine a main image sitting just below a header. Imaging this image only showing half of its height in it's container. Now imagine scrolling down the page - as you do so, the main image scrolls in parallax style moving within it's container revealing its other half.
I can't find an example of this, because everything I've found uses background images or other images and elements moving on top of the images. I just want one element (the main image) to appear to have some perspective. Can anyone point me to an example of this?
Don't understand why you don't want background images, but in all cases, you can use Parallax.js, which uses the attribute data-image-src to specify the image.
Take a look in this demo:
HTML:
<div class="demo" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>
jQuery:
$('.demo').parallax({imageSrc: '/path/to/image.jpg'});
As seen in: http://pixelcog.com/parallax.js/