http://www.linode.com/designcourse – Use code ‘DESIGNC19’ to get $20 credit on your new Linode account!
— FAST Tut: 01:57 – Bloopers: 31:21
— You guys did it! 1k likes in 6 hours. So, here’s the video where I show you how to take the Figma parallax prototype we designed in the previous video (linked below) and make it a reality in the browser. For this tutorial, I’m using a lightweight (3kb) solution for parallax called Laxxx.js. I’ve linked below MORE parallax tutorials I’ve created in the past, which cover a lot more ways to integrate parallax.
Laxxx.js: https://github.com/alexfoxy/laxxx
Part 1 (The design in Figma):
Codepen (This is built just for mobile, not desktop resolutions):
PREVIOUS Parallax Tutorials:
GSAP & ScrollMagic
Rellax.js Parallax
Vanilla JavaScript Parallax
Laxxx.js Parallax
Parallax.js
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS!
My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
– – – – – – – – – – – – – – – – – – – – – –
Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Original source
22 responses to “Parallax in HTML, CSS and JavaScript Tutorial – Let's make it happen!”
What do you think about my FAST Tut at 01:57? Check out my failures at 31:21. Also, this Wednesday is the UI/UX Workshop Episode 2! MAKE SURE TO SUBSCRIBE!
Awesome! New Subscriber!
When you have example Angular
I love the direction but it was kind of harsh when the intro music stopped. Maybe fade it out over the course of the intro?
The 60 second express is awesome.
I'm so excited fabuloushackers.WordPress,com did a hack transfer of $35,000 for me. ..
The foreground scroll should follow the thumb, not the background scroll like in your example.
Thanks Coursetro..Do you have a vanilla JavaScript tutorial? Would like to check it out.
Great job!
that's video I need man
Yessssss!!! This type of fast learning at the beginning is right up my alley.
I thought this was going to be with no libraries :/
you are rocking idiomatic obessionist….Congrats….Go heights…and take it further….
What is the font-family are you using in vs code?
I think I've said this before but I really like that you use libraries instead of trying to code it out yourself. In the real world, at least at an agency where you're always busy fighting tight deadlines these type of libraries are huge time savers and everyone uses them if they can.
Which playlist should I use for more design tutorials like these with vanilla js?
Thumbs up for the 60 second tutorial!
great video as usual, nice60s summary, but the background music on that is a bit loud.
This is truly a fun tutorial, please do more bloopers. It was fun 🤣🤣
nice video
I really dig the 60 second speed run for the quick overview. I vote more of this.
dude, i really neeed more o f this stuff. You don't imagine how it made my skills better at work! Awsome job
isn't there a way to do this without JS?