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!
Fantastic tutorial, I was lucky enough to come across this after the likes had been reached so went back to the first one to follow along with the image editing and then hopped right into coding, I am using Angular and for anyone else using Angular I will list steps below to add it into your project. To add this to an Angular project all you need to do is the following. 1: first install lax in your project using npm as such "npm install lax.js" 2: in the component you would like to add lax to simply add this at the top below your angular core import "import lax from 'lax.js'" 3: in your components typescript file inside the ngOnInit method add the following code "lax.setup() // init const updateLax = () => { lax.update(window.scrollY) window.requestAnimationFrame(updateLax) } window.requestAnimationFrame(updateLax)" 4: add the lax class to any html element on your page and add the lax data-lax-translate-y or whatever lax feature you would like to use just like Gary does in the video and that's that you now have lax in your Angular project! :)
Yesterday I was talking with a friend about the parallax effect. Today I open up youtube and have a recommendation for a video about that... Creepy to say the least
You talk just like me as I work. "What is going on? I did the thing right?" *checks the thing* "Yes I did, what is happening?" *checks the thing again* "Oh...no I didn't. I'm an idiot." It's nice to see I'm not alone :P
*WARNING* For all those who are watching this after Nov 2020. Lax 2.0 is a completely new script and overrides the old one, so it will no longer work. So you need to download this file - github.com/alexfoxy/lax.js/releases/tag/v1.2.5 and do it manually. Plus thank me and also help others by pressing the like button!
i read a lot tutorial how to use sass no one can halp me a lot, but show me how to use sass only using VScode extension. That is helped me a lot, thank you.
Yes, you can create this with just CSS only. Just take my CSS from the code pen demo, and remove any nested rulesets, that's the only Sass feature I used.
When resizing the screen, the media queries get applied instantly which looks glitchy.. would adding animations to the containers make it smoothly transition 🤷🏾♂️
Hi Gary, thanks for this great tutorial ! i'm currently learning HTML/CSS/JS at school, it's really useful to have a channel like your's :) I have two questions : Did you made a video on theses extensions that you use to not have to refresh your browser ? Because i can see that you are working on your local server, there is maybe somethings to set ? And did you made a video to optimize the way to work or something like this ? I explored your channel but there is soooo many videos ^^' Sorry for my english, i hope i'll be understable :D
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 do show you how in the longer tutorial, but because I didn't create a desktop prototype during the Figma video and progressively enhance the UI, it looks a bit silly on desktop. It would just require adding more content and such.
He got them off Unsplash. You can also watch his Figma tutorial where he makes the mockup and gets the photos. th-cam.com/video/RT5h-lLH0QA/w-d-xo.html
literally first 3 mins you could have been speaking a different language to english. Ok as a newbie / complete dinosaur a bit of that made some sense but most of it...whoosh over the head..paused at 3:06 because of brain melt down....not so scared about the next 29 mins...
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!
Yes. But no...
@@PeterPkp123 awesome, just what I wanted to hear.
Awesooome was waiting for this...thanks
I love the quick tutorial upfront. Gives me an overview and I can decide if I want to learn that or if it's relevant to me.
I really like the idea, hope you'll always do it
Nice with the 60s summary in the beginning!
I learn a lot from you. Thank you for the time and effort you put into this! I appreciate all of it.
I really dig the 60 second speed run for the quick overview. I vote more of this.
Here we go - we "ordered" (well more or less with our likes) and you delivered. Nice job there! Lovin the new style of your vids. Cheers!
Thanks!
Really loved the 60 sec overview experiment. It saved a lot of time🤟🏻
This concept is amazing. 1min for pros at the beggining, middle for the rest and funny bloopers at the end. Why don't U have million subs?
Fantastic tutorial, I was lucky enough to come across this after the likes had been reached so went back to the first one to follow along with the image editing and then hopped right into coding, I am using Angular and for anyone else using Angular I will list steps below to add it into your project.
To add this to an Angular project all you need to do is the following.
1: first install lax in your project using npm as such "npm install lax.js"
2: in the component you would like to add lax to simply add this at the top below your angular core import "import lax from 'lax.js'"
3: in your components typescript file inside the ngOnInit method add the following code
"lax.setup() // init
const updateLax = () => {
lax.update(window.scrollY)
window.requestAnimationFrame(updateLax)
}
window.requestAnimationFrame(updateLax)"
4: add the lax class to any html element on your page and add the lax data-lax-translate-y or whatever lax feature you would like to use just like Gary does in the video and that's that you now have lax in your Angular project! :)
You're my Only One Teacher making me a Full-stack web developer... Thanks
Yesterday I was talking with a friend about the parallax effect.
Today I open up youtube and have a recommendation for a video about that...
Creepy to say the least
"Google spying you ~"
your phone is listening to you. no lie it's the truth.
that's how they push ads in your face and recommend shit.
dude, i really neeed more o f this stuff. You don't imagine how it made my skills better at work! Awsome job
You talk just like me as I work.
"What is going on? I did the thing right?"
*checks the thing*
"Yes I did, what is happening?"
*checks the thing again*
"Oh...no I didn't. I'm an idiot."
It's nice to see I'm not alone :P
that 60 second summary is pretty awesome man! You can consider your idea copied and applied 😁 Very cool
Yessssss!!! This type of fast learning at the beginning is right up my alley.
Love the 60s ❤️ best 60s ever
The 60 Second tutorial was absolutely fantastic!
I might send this project to your review on next Friday....let see your judgement lol
Nice1 Gary, thanks !
you are rocking idiomatic obessionist....Congrats....Go heights...and take it further....
Best Parallax effect is the Firewatch website, it's simply WOW
Doesn't work (parallax) on mobile though on that site :(
*WARNING* For all those who are watching this after Nov 2020.
Lax 2.0 is a completely new script and overrides the old one, so it will no longer work. So you need to download this file -
github.com/alexfoxy/lax.js/releases/tag/v1.2.5
and do it manually. Plus thank me and also help others by pressing the like button!
Lo descargue use tu codigo java le quite algunas cosas y me funciono cuando le agregue al container la clase main
Speed run is really cool
i loveed the fast tut idea
Thumbs up for the 60 second tutorial!
Amazing tutorial, subscribed!
thanks, you really helps me to get improve my web design skills
you deserve more subcriber
To make it responsive we use media fram and change the width of the image?
Thanks ,from Indonesian 🇮🇩
Amazing! Thank you
Thank you so much for your kind help!
Nice one Gary, thank you!... Am I the only one that hears "easily switch your DONAIM" in the linode ad in the beginning? lol
I wouldn't doubt it.. maybe I should add that to the bloopers
This is really cool, but i find it hard to find images for these parallex effects, does anyone know a website where i can some?
Fast tut is awesome.
You are THE MAN!!!!!!! Do you have any video where you make the parallax effect but with Vanilla JavaScript?
Check description of this video
@@DesignCourse Thanks man!! And thank you for all your hard work to help us.
Thanks Coursetro..Do you have a vanilla JavaScript tutorial? Would like to check it out.
60s tutorial = fireship channel :D
My inspiration was actually from a blender channel "lazy tutorials" ;)
Hi Gary, love the Tuts, more on Sapper/Svelte please, Animations and effects especially :)
i read a lot tutorial how to use sass no one can halp me a lot, but show me how to use sass only using VScode extension. That is helped me a lot, thank you.
haha keep the bloopers coming!!
Slick, great content!
Where are the images?
Finally! 🔥
At 10:14 there should be *:after, right?
Really awesome
Yes Finally! Can i create this without using sass but css only? Iam not full familiar with sass.
Yes, you can create this with just CSS only. Just take my CSS from the code pen demo, and remove any nested rulesets, that's the only Sass feature I used.
look at his SASS crash course, here in his TH-cam channel. ITS AMAZING. He is the best teaching things.
my hero
Great job!
Thank you!!
Awesome! New Subscriber!
He is working out
thank you for video!
It's hard to get the photos, please help!
Perfection. Thank you Gary! 🍺
Excellent
garry a tutorial like this now using gsap scrolltrigger would be awesome :)
When resizing the screen, the media queries get applied instantly which looks glitchy.. would adding animations to the containers make it smoothly transition 🤷🏾♂️
Greetings from Montserratland
java script lax not working the setup is different now
Thanks Gary
DEV + BASS = 😻😻😻
SLAAPPP LIKE
@@DesignCourse We need a french voice reveal for all your french viewers at 500k subscribe
that's video I need man
where can i find the images?
Thank you! Awesome!
great video as usual, nice60s summary, but the background music on that is a bit loud.
Hi Gary, thanks for this great tutorial ! i'm currently learning HTML/CSS/JS at school, it's really useful to have a channel like your's :) I have two questions : Did you made a video on theses extensions that you use to not have to refresh your browser ? Because i can see that you are working on your local server, there is maybe somethings to set ? And did you made a video to optimize the way to work or something like this ? I explored your channel but there is soooo many videos ^^' Sorry for my english, i hope i'll be understable :D
Why do you have "0 0" on some of the data-translate-y and then "0 1" on other instances of the data-translate-y? Great tutorial, dig the format.
Looooooove it
thanks for sharing
Hi! Doesn't work any more, probably something changed in laxxx library.
It's hot project. Thank you!
Whats the VS Code extension your using to hot reload your browser?
Live server
very good
Love ur style of vids, and jokes, awokwkwkowkwk
Thank you. From 🇳🇵
Really like the 60s Segment..
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.
Love it
Very Very thank you 🔥
wish you made it responsive for both Mobile and Desktop resolutions :( cute idea
I do show you how in the longer tutorial, but because I didn't create a desktop prototype during the Figma video and progressively enhance the UI, it looks a bit silly on desktop. It would just require adding more content and such.
Which playlist should I use for more design tutorials like these with vanilla js?
whaiiiiii, oh im latee ! i didnt click the bell , gah dahmittt
CLICK THAT BELL!!@@
If possible make tut on socket , payment getway
your example in codepen doesn't work
Can you send forest and mountain png edited photos
감사합니다.
Can you do Web Components video, please.
That's on my todo list
nice video
I want to know how to make those assets yourself. The fastest way. Is it photoshop?
If it's raster based assets (photographs and such), yes.
10:16 I think you used :before twice instead of using a :after... Am I right?
Lol, yes indeed. Talking and coding sometimes screws me up. Ugh!
isn't there a way to do this without JS?
Unfortunately not however you dont have to use lax.js to do this you can watch his other tutorials on doing this in pure JS without a library.
thanks :)
Smartphones are not yet ready for animations. #inputlag
nice work man! appreciate
where can I find the images?
He got them off Unsplash. You can also watch his Figma tutorial where he makes the mockup and gets the photos. th-cam.com/video/RT5h-lLH0QA/w-d-xo.html
But hold on there, where's your design courses for newbs?
What do you mean, for news?
Try making this work on Edge Browser :D
I'm so jaded by microsoft browsers after 20+ years
@@DesignCourse maybe it gets better in 2020 when they finally switch to chromium
이 좋은 영상을 지구반대편에서 보고있다
I thought this was going to be with no libraries :/
Please note that lax.js 2.0 is released, its totally changed, this is not working in tht. It has a completely different script.
Сделайте русские субтитры, пожайлуста :3
literally first 3 mins you could have been speaking a different language to english. Ok as a newbie / complete dinosaur a bit of that made some sense but most of it...whoosh over the head..paused at 3:06 because of brain melt down....not so scared about the next 29 mins...
lax means salmon in swedish xD