Parallax-y background effect

I’m not sure if parallax is the right term for this effect, but I really love this simple tutorial from Codyhouse. (You definitely should check em’ out!).

So what is it? Well, as per Codyhouse:

Alternate Fixed & Scroll Backgrounds

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.

If you’ve been surfing a lot in the recent months (or years), there’s this some kind of “reveal” effect when you scroll thru a page. Here’s the demo to understand it more.

Pretty simple, huh? 🙂  Here’s how I did it. BONUS: Do also checkout the code for vertically centering a dynamic content block with the use of a pseudo ghost element. (Nope, no tables).

However, do note that this parallax technique might not work well when viewed using your phone or tablet. If you’d like to have a more advanced and bullet-proof parallax effect, you might want to see Skrollr.js.

Other examples:

http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

Using viewport units: vw, vh, vmin, vma

In this age of responsive web design, we, designers and developers, tend to use percentages instead of pixels especially when it comes to width and height for grids or containers. Fluid content should be our aim. People uses countless types of devices to access the web; we have no control over the screen size of these devices, but it doesn’t mean we have no control over how the content will be displayed.

Beyond using width and height properties, we now have the following viewport units: vw, vh, vmin, and vma. Another good news is that browser support for these are great. Still, it is advisable to provide fallback as necessary.

SAMPLE USES:

• vh – Setting height for your background image. Maybe you want your hero image be on the top half part of the screen only, no matter the screen size.

header {
background: url(https://kathleencuevas.wordpress.com/wp-content/uploads/2014/12/bigstock-happy-woman-travel-in-london-73453558.jpg) center center;
background-size: cover;
width: 100%;
height: 50vh;
}

See the Pen jEMBxZ by Kath (@kathcue) on CodePen.

• vw – Font adjustment. In the same code, the font size of H1 is 8% of the viewport width (see it adjusts when you resize your viewport):

div h1 {
  font-size: 8vw;
  margin-bottom: .4em;
  line-height: 1.3em;
  color: #f66b0c;
  text-shadow: 1px 2px 0px rgba(255,255,255,.9);
}

You can find out more about viewport units here:
http://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ 

Got ideas on where else we could use these properties? Share them in the comments!