Have you ever wanted to learn how to build a parallax scrolling website, but couldn’t find a suitable online course? Do you think that to make a responsive parallax website is impossible?
Have you tried a few random tutorials but they got you nowhere?
Are you still confused which CSS properties to animate to achieve a smooth scrolling animations?
And Skrollr data attributes, OMG are they still so confusing?
Whether you are looking for a free or premium online resources when it comes to scrolling animations and animations on the web in general, you are at the right place.
Free resources
My blog is full of a free parallax demos, tutorials and tips on how to build a better parallax scrolling websites.
Even in the free demos and tutorials I am trying to provide a value and help you to get started with your parallax scrolling projects.
While you learn, I also learn. So it’s a WIN WIN situation, isn’t it?
By building these demos, tutorials, fun personal scrolling websites and projects for my clients, I have learned a lot.
And I have decided to package it all up into the Parallax Scrolling Master Class.
What is Parallax Scrolling Master Class?
It is a premium online course going through step-by-step process of building a responsive parallax scrolling website.
You will learn how to create your own scrolling animations from scratch.
No more reusing someone else’s code and hoping that it will ‘work’ with your own creative idea.
Want to see what’s inside of the class?
Signup below and you’ll get more details about the class plus exclusive videos from the making of Parallax Scrolling Master Class.
You’ll get a taste of what’s inside.
Learning by doing
The whole class is interactive, so you can download a starting files and follow me step by step.
There are no code snippets for you to copy and paste, you will need to learn the hard way, by typing.
Making a mistake is part of the learning, there is no shortcut (CTRL+C, CTRL+V). Learning doesn’t work that way.
Clarity not quantity
I must admit, Skrollr data attributes were also confusing to me at the start.
Some of the demos on this blog would probably deserve a new revision.
But doing things over and over again, I eventually got it.
I promise you will get it too.
We will deconstruct every single data attribute applied to the final project, that at the end of the class you will be very comfortable applying data attributes to your html elements based on your own unique scrolling concept.
No more confusion whether to use bottom-top, top-bottom and what is the target-anchor actually used for.
Other useful stuff you’ll learn:
- how to stay organised in your CSS stylesheet
- how to be in complete control over the timing of your animations
- how to pause an element on scroll
- how to make everything responsive
- how and why to turn animations off for mobile
- and much more.
What you’ll get:
- lifetime access to almost 3 hours of video tutorials
- all demo files available for download
- videos currently only available for online streaming (no option to download videos)
- all your questions answered at the end of the class
- all my knowledge and experience with Skrollr packaged in a cool neat way
You can read more about the class or purchase it on the product page.
Go to Parallax Scrolling Master Class
Conclusion
Whether you decide to buy or not, I still hope you’ll find some valuable information on my blog.
Thank you for helping me to shape this course to what it currently is, by answering a survey over the last couple of weeks.
If you want more FREE tips on making a parallax scrolling websites and also get a sneak peak short videos revealing what’s inside of the course, sign up below.
Giveaway
To close things off completely and to celebrate the launch of my first online course, I am giving away Parallax Scrolling Master Class to 3 lucky developers or designers.
Entering the giveaway is simple, just leave a comment about what is your favorite web app, tool or plugin and why. Good luck!
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
To be honest, I’m just a lower secondary student and quite new and still learning Web Development. But when it comes to tool, I ultimately recommend Sublime Text 2 for coding. It’s interface is simple and very clean, but it’s very powerful. The snippet shortcut comes very handy when I want to create a new document and just want to give the default syntax to it without typing from doctype, then head, then body, etc. You can change the syntax highlighting theme or even download a new theme. It’s even more powerful if you install Package Control on it, then you’ll get access to tons of ‘package’ you can freely install.
When I design, I goes Photoshop. It’s very powerful, complete, and flexible. I think almost everyone love this tool 😀
Oh, and last but not least. I love Pendule. It’s a Google Chrome extension that’s very useful for webdevs if you want to inspect your or someone webpages. The tools available in there is so complete.
I think that’s all the tool that is my favourite. Thanks 🙂
I am new to the field of web programming, and after browsing tons of tutorial about the best coding app, Sublime and Coda are definitely my favorite. They are simple and easy to use – helping you organize a clear structure!
I am still looking for some interesting JavaScript plug-ins for building a dynamic website. But I always tell myself to write one of these fascinating plug-ins with my own hands. I believe this master class will help me achieve my goal!
Happy 4th of July!
Superb! Thanks for organizing.
This would be awesome!
My favorite tool…hmmm.
Grunt is definitely one of them. Once you got it, it does all the stuff i don’t want to take care of. I don’t want to set up stuff over and over again if i wanna try new things. I makes my developer life much easier.
The (Chrome) DeveloperTools.
Now your tools, nearly everything is in there. Especially if your in performance.
I am new to the world of web programming I have found so many complicated plugins with poor tutorials. I do however enjoy working with WordPress programming. Guess the best javascript, jQuery or java plugins I have used would be a small script that allows me to use google spreadsheets and yahoo pipes to mashup the data. I recently found handlebars.js and looking forward to learning it because it can also work with google spreadsheets.
I am interested in learning how to animate and do parallax scrolling so I have begun to work with skrollar.js
I also enjoy using Adobe products such as Photoshop, Edge Animate and Dreamweaver.
I use:
Sublime Text 2
Photoshop
Git – Git for Windows – Bitbucket – Github
Yeoman – Grunt – Bower
Sublime Text 2: yes, it’s great tool for coding
Photoshop: I want become designer so I use Photoshop to create template PSD for me
Git – Git for Windows – Bitbucket – Github: The tools very helpful for everyone if they want work team or work freelancer, I not own a host and I use Github Page – Bitbucket to put project private or public to it for client – my friend to see my project
Yeoman – Grunt – Bower: I use it because I want use live reload but this tools very strong in front-end develop
Still new to coding, Have been learning for a year now, I’ve found that Font-awesome is a pretty useful tool that provides built-in light icons to use in your html. Then I also use a browser extension called Fount! It allows me to see in a couple of clicks which typefaces the website is using, II’ll be starting a blog on wef-fonts, so comes in very handy!
Thanks for the tutorials!
My favorite tool lately:
Marionette.js for web apps
Jing for screen capturing
My favorite tools to code an HTML/CSS is sublime text, it have clean UI.
For design prototype/mockup, i use photoshop. The best tool for design 😀
To help me analyze a website, my best friend is Developer tools in chrome
My favorite tool is Cinema4D. Very powerful animation program that can really make a web page stand out. I’ve combined this program with parallax already and the results are amazing. I definitely need to become better at using parallax though.
Hi Ivan, thanks for your comment and good luck in the giveaway. Could you share with us what you’ve created in Cinema4D. I am sure others are also curious what can be achieved using this tool. Cheers
Thanks for all the entries and remember, you still have a few hours to get more entries in.
Good luck!
Yes, congratulations for winner 😀
Hope is me!
Congrats to our 3 lucky winners – Victor, Denise, Praveen.
Check your inbox for a free access to Parallax Scrolling Master Class.
Thanks everyone else for entering the giveaway and good luck next time.
Thank you so much! I’m going to get into it this week, 🙂 Really looking forward to it!!
Looks like Denises entry wasn’t legit so I’ve included one more winner. Congratulations to Miranda.
bedankt !