Seeking very simple Parallax Scrolling help...

[Under S.]

Returning to web design after a 4-5 year absence, looks like I missed the Parallax Scrolling fad. I now need to incorporate the little bugger into what I'm building.

While I don't know Javascript per se, I've been writing HTML/CSS and adapting existing JS scripts to my needs since '98. So I Googled the subject of Parallax Scrolling and as you might imagine, there's a lot of noise out there by now. And way more functionality (and bloat) than I need for this project. Maybe someone can point me to the correct piece of code and/or tutorial to help?

I have a (fixed-size) round DIV with a bgr image that should be scrolling SLIGHTLY SLOWER than the rest of the page (when user is scrolling up or down) so as to create the illusion of depth. But I don't want the container itself to scroll more slowly. In other words, I want it to look like there was a hole punched in the site, so what's 'revealed' by the hole feels like it's an inch behind the screen. (Am I explaining this clearly enough?) And since we're scrolling vertically, the image would (of course) have to be SLIGHTLY TALLER than its containing DIV.

That's all! It doesn't need to do anything else. No automated scrolling, no delay on when the scrolling begins... I just want to be able to have a BG image scroll (vertically) at a slightly slower speed than the rest of the page. I don't even care if it can handle an image smaller than the container, since I'll make sure it overfills.

P.S.: While I'm here, could someone inform me if it's now safe to use only "border-radius" to create circles, or do we still need -moz & -webkit in the css as failsafes?

[pziecina]

Cannot help with parallax scrolling, I looked into it but dropped any thoughts of using it years ago.

As for border-radius, use the vendor prefix for webkit, and the standard, the webkit is required for older iOS and Android devices. Plus as I have been told Mac users cannot update desktop Safari beyond that supported by their OS, the use of the webkit prefix will cover those users as well.

[Under S.]

pziecina wrote:

As for border-radius, use the vendor prefix for webkit, and the standard, the webkit is required for older iOS and Android devices. Plus as I have been told Mac users cannot update desktop Safari beyond that supported by their OS, the use of the webkit prefix will cover those users as well.

If I'm understanding you correctly, -moz is now obsolete and no longer needs to be included, right? Because when I left, it took 3 lines of code to go circular. -moz, -webkit and the border-radius proper.

[pziecina]

The best place to look for what requires what is caniuse -

http://caniuse.com/#search=border-radius

As I say the only reason to use the webkit prefix, is for older mobile devices, or older desktop Safari users.

All other desktop browsers, (except IE, but including Edge) are now updated so often that compatibility is no longer the problem it was.

[Nancy OShea]

CSS border-radius has modern browser support now.  You don't need vendor prefixes for it unless you want to play it safe for older browsers.

Nancy

[Nancy OShea]

When in doubt, refer to Can I Use site for the latest browser support tables.

http://caniuse.com/#feat=border-radius

Nancy

[Nancy OShea · Accepted solution]

I have a tutorial and demo on my site. 

Bootstrap Parallax Template - http://alt-web.com/

Nancy

[Under S.]

Nancy OShea wrote:

I have a tutorial and demo on my site.

Bootstrap Parallax Template - http://alt-web.com/

Nancy

That tutorial is yours? Well, now that I know the author hangs out here, I'll go with that one. I wasn't sure it could do what I described in the OP when I landed on it in my Googling. Your re-assurance that it does what I need it to do (described in the OP) is all I needed.

[Jon Fritz]

I haven't prefixed border-radius in a while, it's pretty well supported and honestly doesn't typically matter even if it's not.

http://www.caniuse.com is a good resource for similar questions.