WITS

Creating a Basic

Parallax Website

April 12, 2014

Alexandra Hoefinger

@ahoefinger

slid.es/ahoefinger/wits

What we'll cover

the origins of parallax scrolling
the range of its techniques and style
the architecture of a parallax page
image quality and dimensions
CSS 'background- family' properties
animations using natural language via a JS plugin
any questions you have!

You can download the demo site files and

the starter files here:

https://github.com/ahoefinger/parallax-basics

What is Parallax?

"Parallax is a displacement or difference in the

apparent position of an object viewed along

two different lines of sight, and is measured

by the angle or semi-angle of inclination between

those two lines."

Origins in Analog Animation

Phenakistoscope + Zoetrope from mid 1800's

Origins on Screen

Origins on the Web

http://silverbackapp.com/

Multiple Background Layers

Extended Load Time

http://journey.lifeofpimovie.com/#!/

User Experience

The intended user experience of a site like Life of Pi is exploratory

The user is not there to buy, to register, or to look up information, but rather to marvel, and have fun

He or she is probably not in a rush, therefore load timers are acceptable

Exploratory Experiences

https://www.apple.com/mac-pro/

Exploratory Experiences

http://kitkat.com/android/#/home

Exploratory Experiences

http://darknessbecomesyou.com

All the Parallax Things

http://www.pinterest.com/lilgast8/scrollingparallax-website/

Basic Parallax

http://brokentwill.co.uk

Our Demo Site!

http://alexandrahoefinger.com/origins-of-color/index.html

Starter Files

index.html
css

style.css
fontawesome.min.css

images

stock photos

fonts

fontawesome-webfont.ttf

scrollreveal.js

Let's check out index.html in the browser and walk through the markup and styles in the text editor!

index.html

title tag, viewport tag for mobile devices, font link, and stylesheet link are included in the <head>

alternating foreground and background slides are each a section with an odd/even class and an individual id

images folder

Images in starter-file folder are all copyright/license free, from Unsplash
The full width images are .jpg's cropped to 1400px width
They're also compressed via Image Optim

Lost and Taken and Subtle Patterns also provide free background textures and images

Pixlr is a free online photo editor where you can crop and resize images

style.css

box-sizing: border-box

Includes padding and border in width + height of content, unlike the traditional box-model below:

width: 100px;padding: 20px;border: 5px;

width of box is 100px

box-sizing: content-box (default)

box-sizing: border-box

width of box is 150px

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

style.css

@import

@import url('fontawesome.min.css');

<i class="fa fa-star-o"></i>

i {
  font-size: 500px;
}

<i class="fa fa-star-o fa-2x fa-spin"></i>

http://fortawesome.github.io/Font-Awesome/

style.css

the background- family

background-color

background-size

background-image

background-position

background-repeat

background-attachment

background-origin

background-clip

background

https://developer.mozilla.org/en-US/search?q=background

style.css

background-color

.slide-odd {
  background-color: FireBrick;
}

sets the background color of the element
hex codes, rgba values, or css colors can be used

http://www.147colors.com/grid/

style.css

background-image + background-repeat

#slide-1 {
  background-image: url(../images/tile1.jpg);
}

if the image's dimensions are smaller than the slot it's filling, the image will repeat left to right, top to bottom, by default

try setting an odd slide's background image to a tile from the images folder to see this in action
set an additional rule to control the repeating if you'd like

#slide-1 {
  background-image: url(../images/tile1.jpg);
  background-repeat: no-repeat;
}

style.css

background-attachment

.slide-odd {
  background-attachment: fixed;
}

sets the background image to scroll or stay stuck in one place within the viewport

this rule is essential to our foreground/background parallax effect

style.css

background-size

keywords:

.slide-odd {
  background-size: cover;
  height: 700px;
}

proportionally covers the whole bg, regardless of screen dimensions

one numerical value:

.slide-odd {
background-size: 50%;
}

sets width to 50% and height to auto

two numerical values:

.slide-odd {
  background-size: 3em 25%;
}

first value sets width, second value sets height

%, em, rem, px format can be combined

style.css

background-position

directional values:

#slide-1 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background position: top right;
}


#slide-2 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background position: top;
}

one or two values can be used
if only one is used, the second defaults to 'center'

style.css

background-position

numerical values:

#slide-1 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background position: 25% 50%;
}
#slide-2 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background position: 30px 100px;
}

the first value is horizontal, the second value is vertical
if only one is specified, the other defaults to 50%

style.css

background-position

directional + numerical values:

#slide-1 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background-position: 100px top;
}

if the first value is a numerical value and the second is a vertical directional value, the first will refer to width and the second height

#slide-2 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background-position: right 200px;
}

if the first value is a horizontal directional value and the second is a numerical value, the first will refer to width and the second height

style.css

background-position

directional + numerical values:

#slide-1 {
    background-image: url(images/photo1.jpg);
    background-repeat: no-repeat;
    background-position: right 175px bottom 10px;
}

if there are four values, the numbers represent the distance from the directional border
so in this example, the image would be 175px away from the right edge of the window, and 10px away from the bottom

style.css

background-origin + background-clip

#slide-1 {
  background-image: url(../images/tile1.jpg);
  background-position: center left;
  background-origin: content-box;
}

determines what the background-position property should be relative to
used in combination with background-image and background-position
is ignored with background-attachment: fixed

#slide-1 {
  background-image: url(../images/tile1.jpg);
  background-clip: border-box;
}

determines whether the background extends beyond the border

style.css

background

"The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values."

Any combination of the background- properties can be included
Order does not matter, except if both background-position and background-size are included

In this case, the order should be: bg-position/bg-size

#slide-1 {

  background: url(../images/tile1.jpg) no-repeat 10px 20px/50px 50px;
}

style.css

z-index

.slide-odd {
  z-index: 1;
}

.slide-even {
  z-index: 2;
}

z-indexing refers to the order of layers
higher numbers are on the top
to achieve our foreground/background style, we should set odd slides to a lower z-index than even slides

scrollReveal.js

An open-source JavaScript plugin for easy animations
Uses natural language data attributes in html
A quick alternative to CSS3 animations

<div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div>


<div data-scroll-reveal="enter from the bottom after 1s"> Bar </div>


<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px"> Baz </div>

https://github.com/julianlloyd/scrollReveal.js

scrollReveal.js

initialize by including these script tags before the closing body tag in index.html

  <script src='js/scrollReveal.js'></script>
  <script>
      window.scrollReveal = new scrollReveal();
  </script>

construct a declarative statement for your animation
add it to the tag of whatever element you'd like to animate, in the form of a data attribute

<section class="slide-odd" id="slide-1">
    <header>
        	<h1 data-scroll-reveal="enter top and move 80px over 2s">This is the Header!</h1>
   </header>
   <h2>This is the first slide</h2>
</section>

Parallax Plugins

Stellar.js

provides the ability to control the scroll speed of background layers

Skroller.js

responds to the position of the element in the viewport

Parallax.js

offsets layer depth in reaction to motion in mobile devices or cursor on desktop

jquery.parallax

creates absolutely positioned layers that move in response to the mouse

ScrollMagic

triggers animations on scroll

Parallax without Plugins

can be accomplished with HTML5 data attributes and
jQuery's .scroll() and .scrollTop() methods

<div class="fw-container slide-odd" id="slide-1" data-scroll-speed="10">

$(document).ready(function() {
    $('.slide-odd').each(function() {
        var $window = $(window);
        var $slide = $(this);
        $window.scroll(function() {
            var verticalPosition = -($window.scrollTop() / $slide.data('scroll-speed'));
            var bgPositionValue = '50% ' + verticalPosition + 'px';
            $slide.css('background-position', bgPositionValue);
        });
    });
});

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

Questions?

Stay in touch!

@ahoefinger

alexandra.hoefinger@gmail.com