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


Multiple Background Layers



Extended Load Time

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




Exploratory Experiences




Exploratory Experiences




All the Parallax Things




Basic Parallax




Our Demo Site!




Starter Files



  • index.html
  • css
    • style.css
    • fontawesome.min.css
  • images
    • stock photos
  • fonts
    • fontawesome-webfont.ttf
  • js
    • 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


  • 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

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>

style.css

the background- family

background-color
background-size
background-image
background-position
background-repeat
background-attachment
background-origin
background-clip
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


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>

                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);
                        });
                    });
                });






                Questions?





                Stay in touch!

                @ahoefinger
                alexandra.hoefinger@gmail.com

                WITS

                By ahoefinger

                WITS

                • 1,588
                Loading comments...