SubscribeSign In
  • How-To Tutorials
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Game Development
    • Computer Skills
  • Courses
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
  • eBooks
    Design & Illustration
    Code
    Web Design
    Photo & Video
    Business
    Music & Audio
    3D & Motion Graphics
  • Pricing
  • Envato Elements
  • Envato Studio
  • Community
  • Help
envato-tuts+
  • Envato Elements
  • Envato Studio
  • Community
  • Forum
  • Help
  • Subscribe
  • Sign In
  • How-To Tutorials
    • Design & Illustration
      • Adobe Photoshop
      • Vector
      • Adobe Illustrator
      • Illustration
      • Inspiration
      • Tools & Tips
      • Graphic Design
      • Text Effects
      • Drawing
      • News
      More Categories...Learning Guides
    • Code
      • Web Development
      • Mobile Development
      • WordPress
      • PHP
      • JavaScript
      • Flash
      • CMS
      • Android SDK
      • iOS SDK
      • News
      More Categories...Learning Guides
    • Web Design
      • CSS
      • HTML
      • UI Design
      • HTML & CSS
      • UX
      • JavaScript
      • Adobe Photoshop
      • Complete Websites
      • Workflow
      • Design Theory
      More Categories...Learning Guides
    • Photo & Video
      • Shooting
      • Video
      • Adobe Photoshop
      • Post-Processing
      • Photography
      • Photo Critique
      • How-To
      • Inspiration
      • Lighting
      • Adobe Lightroom
      More Categories...Learning Guides
    • Business
      • How-To
      • Marketing
      • Freelance
      • Presentations
      • Communication
      • Software
      • Planning
      • Small Business
      • Microsoft PowerPoint
      • Inspiration
      More Categories...Learning Guides
    • Music & Audio
      • Audio Production
      • General
      • Logic Pro
      • Workshops
      • Mixing & Mastering
      • Sound Design
      • Open Mic
      • Ableton Live
      • Reason
      • Recording
      More Categories...Learning Guides
    • 3D & Motion Graphics
      • Adobe After Effects
      • 3D
      • Motion Graphics
      • 3D Studio Max
      • Maya
      • Cinema 4D
      • Workflow
      • News
      • Visual Effects
      • Roundups
      More Categories...Learning Guides
    • Game Development
      • Programming
      • Game Design
      • Platform Agnostic
      • Business
      • 2D Games
      • News
      • Game Development
      • Unity
      • Flash
      • Unity 3D
      More Categories...Learning Guides
    • Computer Skills
      • OS X
      • How-To
      • Software
      • App Training
      • Presentations
      • Microsoft PowerPoint
      • Productivity
      • Microsoft
      • Tips & Shortcuts
      • Spreadsheets
      More Categories...Learning Guides
  • Courses
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
    • Coming Soon
  • eBooks
    • Design & Illustration
    • Code
    • Web Design
    • Photo & Video
    • Business
    • Music & Audio
    • 3D & Motion Graphics
  • Pricing
  1. Web Design
  2. Parallax Scrolling
Webdesign
Parallax Scrolling for Web Design
by Craig Campbell19 Jun 2013
Lessons:15Length:1.9 hours
Parallax ScrollingjQueryCSSHTML
Crs 75016
For full access to all 15 lessons, including source files, subscribe with Elements.

2.3 Coding the Parallax Effect

In this lesson, we finally jump into jQuery and discuss how to make our background scroll at a different rate than our content.

1.Welcome
2 lessons, 06:53

Free Lesson
1.1
Introduction
01:27

Free Lesson
1.2
Parallax Examples
05:26

2.Project 1: Simple Parallax Scrolling
3 lessons, 29:20

2.1
Our First Project
06:19

2.2
Styling the Page
10:56

2.3
Coding the Parallax Effect
12:05

3.Project 2: Complex Scrolling
9 lessons, 1:17:49

3.1
Our Second Project
03:25

3.2
Adding Images
07:13

3.3
Creating the Navigation
05:11

3.4
Styling the Page in CSS
09:55

3.5
Cleaning Up the CSS
02:55

3.6
Positioning the Elements
18:38

3.7
Scrolling the Stars
09:12

3.8
Scrolling the Images
10:01

3.9
Coding the Links
11:19

4.Conclusion
1 lesson, 02:19

4.1
Final Thoughts
02:19


Craig
Craig Campbell
Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.
craigsoup
Continue watching with Elements
Elements
Unlimited Downloads
From $29/month
Get access to over 400,000 creative assets on Envato Elements.
Market
Over 9 Million Digital Assets
Everything you need for your next creative project.
Studio
Hire a Freelancer
Choose from 2,000 professionals ready to do the work for you.
Community
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
  • Web Themes & Templates
  • WP Themes
  • HTML Templates
  • Shopify Themes
  • Bootstrap Themes
  • Free WordPress Themes
  • Video
  • After Effects Templates
  • Apple Motion Templates
  • Video Effects
  • Lower Thirds
  • Stock Footage
  • Audio
  • Royalty Free Music
  • Sound Effects
  • Best Selling Royalty Free Music
  • Logic Pro Files
  • Background Music
  • Code
  • WordPress Plugins
  • PHP Script
  • JavaScript
  • CSS Templates
  • PrestaShop Plugins
  • Graphics
  • Logo Templates
  • Business Card Templates
  • Lightroom Presets
  • Serif Fonts
  • Sans-serif Fonts
  • Photos
  • Food Stock Photos
  • Animal Stock Photos
  • Tech Stock Photos
  • Fitness Stock Photos
  • Nature Stock Photos
  • 3D Files
  • 3D Renders
  • 3D Car Models
  • 3D Shaders
  • CG Textures
  • OBJ Files
  • Websites
  • Online Store Designs
  • WordPress Website Designs
  • Personal Websites
  • Photography Websites
  • Portfolio Websites
  • Elements
  • WordPress Themes
  • Stock Images
  • Website Templates
  • Logos
  • Fonts
  • Tuts+
  • Learn Code
  • Learn Graphic Design
  • Learn Business
  • Learn Photography
  • CryptoCurrency Tutorials & Ebooks
Envato Tuts+
About Envato Tuts+
Terms of Use
Advertise
Join our Community
Teach at Envato Tuts+
Translate for Envato Tuts+
Forums
Help
FAQ
Help Center
envato-tuts+
25,789
Tutorials
1,118
Courses
22,795
Translations
  • Envato.com
  • Our products
  • Careers
  • Sitemap
© 2018 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.
  • Follow Envato Tuts+