Fullpage Animations With Javascript Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 386

  • @developedbyed
    @developedbyed  5 ปีที่แล้ว +83

    Code and Images ---> www.patreon.com/posts/30541351

    • @serioussam9400
      @serioussam9400 5 ปีที่แล้ว +7

      you literally copy pasted fullpage.min.js, app.js ,fullpagemin.css .....Didn't understand a thing about scroll and how to make that work..
      Why don't you post another video on it(as a complementary).

    • @myanh2299
      @myanh2299 5 ปีที่แล้ว

      Thank u

    • @rennesinternet3872
      @rennesinternet3872 4 ปีที่แล้ว

      Many thanks Ed :

    • @hunterss3017
      @hunterss3017 4 ปีที่แล้ว

      is there any way to show nav dots name without hoivering on it ?

    • @saraharslan1435
      @saraharslan1435 4 ปีที่แล้ว

      But it is nottt responsive

  • @martin-1965
    @martin-1965 5 ปีที่แล้ว +3

    Another excellent half hour spent in your company learning how easy something seemingly complex can be with a little bit of know how and a sense of humour :)

  • @randerins
    @randerins 5 ปีที่แล้ว +8

    You make programming WAY more fun. Thanks a LOT for your tutorials!

  • @debabratasen6955
    @debabratasen6955 5 ปีที่แล้ว +285

    "empty file empty as our Life"🤣🤣🤣

  • @gavr1loo
    @gavr1loo 5 ปีที่แล้ว +10

    Man, i haven't laughed and enjoyed learning to program like this in a while...thanks!

  • @scythe_ghoul
    @scythe_ghoul 3 ปีที่แล้ว

    The only person who makes stuying as fun as watching a enterainment video love you

  • @hassantariq8847
    @hassantariq8847 5 ปีที่แล้ว +30

    PewDiePie of Coding !!!!!!!
    Respect

    • @Jvst0nTime
      @Jvst0nTime 3 ปีที่แล้ว +5

      except that pewdiepie isn't good at anything.

    • @bragiodinsen4604
      @bragiodinsen4604 3 ปีที่แล้ว

      pewdiepies cool older brother

  • @ErrorDebug
    @ErrorDebug 5 ปีที่แล้ว +13

    Finally you recorded what I am here for :)

  • @gratien25
    @gratien25 5 ปีที่แล้ว

    Hey Dev Ed. The way you start your video is awesome. people who need to learn but also need to smile should watch your course.

  • @avishkarnartawadekar2936
    @avishkarnartawadekar2936 5 ปีที่แล้ว +7

    I was searching for a perfect video from a while and I got it

    • @frogsama666
      @frogsama666 5 ปีที่แล้ว +1

      Same here lol. This guy seems to know how to read people's mind of something. Exactly what I was looking for 1 month ago.
      I had to use some Javascript plugins full of bugs.

  • @klesar84
    @klesar84 5 ปีที่แล้ว +3

    I love so much ur html css and what is the most important JS tutorials, they are so great and helpful in learning new technics. Just continue with that our georgeus teacher :)

  • @umeshagarwal4271
    @umeshagarwal4271 3 ปีที่แล้ว

    I have seen so many youtube tutorials but I am always delighted to see your videos 👍

  • @chrispaige873
    @chrispaige873 5 ปีที่แล้ว +7

    My favorite teacher!

  • @sagarsingh2601
    @sagarsingh2601 5 ปีที่แล้ว

    Truely love the way you code and explain little things for us....thanx for everthing Mr.dev

  • @bruce7012
    @bruce7012 5 ปีที่แล้ว +3

    I was searching for the exact same thing yesterday, and today you uploaded it! What a legend
    Thanks a bunch

  • @codedbychavez8190
    @codedbychavez8190 3 ปีที่แล้ว

    Excited to see this tutorial.

  • @johnjeralddechavez4813
    @johnjeralddechavez4813 5 ปีที่แล้ว +1

    My boy is back in coding!
    With FUN ❤

  • @lokeshnaidu1935
    @lokeshnaidu1935 3 ปีที่แล้ว

    He's the life saver for all front end developers❤️😎

  • @ayoubbelouadah7195
    @ayoubbelouadah7195 5 ปีที่แล้ว

    Eyy look who's back at the classic js tutos

  • @randomjane8731
    @randomjane8731 4 ปีที่แล้ว

    I just love your videos! Especially your commentary on the tags 😂 also your accent helps me sleep so thank you :)

    • @guyfawkes6930
      @guyfawkes6930 3 ปีที่แล้ว

      wtf hahaha do you play his videos and listen to his voice while trying to sleep??

  • @zarghamaijaz5933
    @zarghamaijaz5933 4 ปีที่แล้ว +9

    i love how this dude always looks happy.
    Him: as empty as our lives.
    Me: 😟

  • @Earthcows
    @Earthcows 5 ปีที่แล้ว

    Thank you for explaining everything so well as you go along. It really helps a beginner like me.

  • @VerifyBot
    @VerifyBot 5 ปีที่แล้ว +1

    I really like your motivation on the videos like seriously you're awesome

  • @Frankslaboratory
    @Frankslaboratory 5 ปีที่แล้ว +2

    Yes. JavaScript animations. My favourite thing.

  • @---zf5qm
    @---zf5qm 5 ปีที่แล้ว

    You're getting better every video bro

  • @AkashAhmed-bb2nq
    @AkashAhmed-bb2nq 5 ปีที่แล้ว +2

    We need more animation effect with pure JavaScript. Thanks for all

  • @jihaye9805
    @jihaye9805 3 ปีที่แล้ว

    OMG I've been looking for this thing for so long .. and you saved me 😂Thank god

    • @jihaye9805
      @jihaye9805 3 ปีที่แล้ว

      it doesn't work at all .... hahaha 😅

  • @dapydoe
    @dapydoe 2 ปีที่แล้ว

    good job Ed..just in 8:00 i think that the chair is not in the middle bcs you write transform: translate(-50%, -70%); in place of transform: translate(-70% , -50%) and it s not a question of shadow ..

  • @rohansaand2023
    @rohansaand2023 5 ปีที่แล้ว

    Loved the video Ed. Javascript animations video by you are my favorites.

  • @yolo-mb4cy
    @yolo-mb4cy 5 ปีที่แล้ว +9

    14:55 cant you just do text-align center?

    • @front-enddev5917
      @front-enddev5917 5 ปีที่แล้ว

      no because the background will occupy all not only the "h1" it will be from the left of the page to the right

  • @buildwithgenai
    @buildwithgenai 4 ปีที่แล้ว

    Love you man, I get boosted up whenever I see you

  • @dadlord689
    @dadlord689 5 ปีที่แล้ว

    I just like this guy. He can make you like to code. Great person.

  • @anamartin5311
    @anamartin5311 3 ปีที่แล้ว

    so useful! I'm starting to learn and really appreciaty your videos, greetings from Spain :)

  • @anastasia_kon
    @anastasia_kon 5 ปีที่แล้ว +1

    Gonna eat while watching this. Thank you for your humor btw!

  • @thewebproject
    @thewebproject 5 ปีที่แล้ว

    Hello ed, great tutorial. Always fun to watch. I can’t wait for your new video.

  • @loladinn12
    @loladinn12 5 ปีที่แล้ว +1

    Dev ed new video? YASSSSSSSSSSSSSS

  • @williamwalker4494
    @williamwalker4494 4 ปีที่แล้ว

    Javascript: Oh yes please... Should call this " Funpage Animations with Javascript" Thank you for this tutorial! from one of your gorgeous friends on the internet...

  • @robinware77
    @robinware77 5 ปีที่แล้ว +1

    Did you know that you can select multiple rows with the alt key, for example when making classes to the chairs, you can select one line, press alt, select the next line press alt and you have 3 blinking lines then you can type in class="chair" just once for 3 different img tags.

  • @nith.p
    @nith.p 5 ปีที่แล้ว

    I started my channel 10 days before him but my channel is nothing compare to his. Good job man.

  • @watanuki2367
    @watanuki2367 3 ปีที่แล้ว

    in 16:48 what's the difference between using [ -webkit-text-fill-color ] vs [ color ]? as they seem to have the same effect

  • @dremiq6670
    @dremiq6670 5 ปีที่แล้ว +1

    16:41 you can just use color: transparent; and it will still work :)

  • @anilgadekar3036
    @anilgadekar3036 5 ปีที่แล้ว

    I really enjoying this tutorial buddy... I am always waiting for new updating videos

  • @FedeRacun
    @FedeRacun 5 ปีที่แล้ว +16

    Venia escuchandote en ingles muy tranquilo hasta que tiraste un "perfecto" y me quede como: -....¿que?- Saludos desde Argentina, me encantan tus videos

    • @gvstv_
      @gvstv_ 4 ปีที่แล้ว

      me pasó igual

    • @alejomakevids
      @alejomakevids 3 ปีที่แล้ว +1

      Saludos a Nargentina we xd

  • @tyjaniihassan4362
    @tyjaniihassan4362 5 ปีที่แล้ว

    Literally the video I need

  • @Mdelacruzmelo
    @Mdelacruzmelo 5 ปีที่แล้ว

    Hahahaha, the best intro to tutorial bro! You are the funniest profesor!

  • @bounce21190
    @bounce21190 4 ปีที่แล้ว

    Thanks Ed, just what I was looking for

  • @janmejayshastri2892
    @janmejayshastri2892 3 ปีที่แล้ว

    Love your tutorials mann!!! Thanks a lot for this!!

  • @techtips4019
    @techtips4019 5 ปีที่แล้ว +47

    Hello my gorgeous friend on the Internet.

    • @pythonwolf3817
      @pythonwolf3817 3 ปีที่แล้ว +1

      hello my gorgeous friend on the internet 1 year ago 🙂

    • @oxcymultimedia6482
      @oxcymultimedia6482 2 ปีที่แล้ว

      @@pythonwolf3817 hello my gorgeous friend on the internet 5 months ago 🙂

    • @pythonwolf3817
      @pythonwolf3817 2 ปีที่แล้ว

      @@oxcymultimedia6482 🙂🙂🙂😇😇🤗🤗

  • @TheLollercaster
    @TheLollercaster 5 ปีที่แล้ว

    I always wanted to learn this! I am glad I stumbled on this video, I will play with it and see how it goes :)

  • @itsrasterize8898
    @itsrasterize8898 5 ปีที่แล้ว

    Great videos as always hope for more front end dev and python tutorials.

  • @Amitkumar-zp3wb
    @Amitkumar-zp3wb 4 ปีที่แล้ว

    Exactly what I was looking for... Thanks D v Ed.

  • @fvgoya
    @fvgoya 5 ปีที่แล้ว +19

    Nice tutorial as always!!! But will also nice to see this with "pure JavaScript", I mean, without library made from others.

  • @amarnathmukherjee3900
    @amarnathmukherjee3900 5 ปีที่แล้ว

    Thanks for this topic . I really want to learn javascript . Thanks for attending this topic

    • @nes3n16
      @nes3n16 5 ปีที่แล้ว

      this is JavaScript though, totally different from Java

  • @JC-yy5nf
    @JC-yy5nf 4 ปีที่แล้ว +1

    tweenMax from GSAP doesn't seem to be listed on the site anymore. here is the link if anyone has been looking for it: cdnjs. cloudflare . com/ ajax/libs/gsap/2.1.3/TweenMax.min.js

  • @AliRaza-kt2bb
    @AliRaza-kt2bb 5 ปีที่แล้ว

    20:32 Hey Ed, why not Toggle Word Wrap?

  • @adarshkumar3518
    @adarshkumar3518 5 ปีที่แล้ว +2

    Sit back and relax? I will probably be scratching my head after you write

    • @adarshkumar3518
      @adarshkumar3518 5 ปีที่แล้ว +1

      Which you didn't write. You wrote everything all at once.

    • @mimiabdo7463
      @mimiabdo7463 5 ปีที่แล้ว

      @@adarshkumar3518 lol

  • @agungjanuardi9317
    @agungjanuardi9317 3 ปีที่แล้ว

    Great explanation, easier to understand

  • @antarracoding
    @antarracoding 5 ปีที่แล้ว +1

    who's here thinks this guys is like PewDiePie, haha, everyday watching this channel. so helpful for me, thanks Man.

  • @ahmedrashed5567
    @ahmedrashed5567 5 ปีที่แล้ว +2

    thanks so much
    for take care about beginner :)
    god bless you

  • @tavleenkaur8325
    @tavleenkaur8325 3 ปีที่แล้ว +1

    I fUCKIN' LOOOOOVEEEE YOUR ENERGY 😂 🤣

  • @fibercreates
    @fibercreates 5 ปีที่แล้ว

    You can use shift + arrow keys to highlight letter by letter then shift + ctrl + arrow keys highlights word by word

  • @thatguycheddar
    @thatguycheddar 5 ปีที่แล้ว +1

    Thanks for another dope tutorial!!. cant see the link for the images though

  • @rennesinternet3872
    @rennesinternet3872 4 ปีที่แล้ว

    learn while laughing ... if my teachers had your talent 30 years ago, I would be ... a cowboy now! thanks for all ;)

  • @joaquimpaul7548
    @joaquimpaul7548 5 ปีที่แล้ว +1

    I love this dude he is funny and creative to...downtown from Nairobi,Kenya

  • @agnieravinsensia4018
    @agnieravinsensia4018 2 ปีที่แล้ว

    thanks for the lesson it's really help for a student like me

  • @shubhamranjan4596
    @shubhamranjan4596 5 ปีที่แล้ว

    all ur videos r amazing really helpful brother 🤘🏻

  • @HarshRajAlwaysfree
    @HarshRajAlwaysfree 5 ปีที่แล้ว +7

    I wish u made everything important from scratch like that fullpage animation u downloaded :(

  • @csisz_zsolt6763
    @csisz_zsolt6763 4 ปีที่แล้ว

    This is awesome, glad I found your channel :))

  • @TheDavechirag
    @TheDavechirag 5 ปีที่แล้ว +5

    "We have empty files, as our life!" 😆🤣😂 Man o man!!!

  • @Dropsen1
    @Dropsen1 4 ปีที่แล้ว

    +Dev Ed Hi, by specyfing index by typing === '1' can I select for example index 0 and index 3? And second question, how to loop animaton with chairs?

  • @crossfire423
    @crossfire423 5 ปีที่แล้ว

    29:33 i have exactly same like here a code but images don't change, i still have only the one picture any solutions?

    • @crossfire423
      @crossfire423 5 ปีที่แล้ว

      and what do you thing about css code like this for "s1"
      .s1{
      background-image: url(img/banner.jpg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      }
      i newbie so please don't kill me if i doing something wrong but i thing this is best option cuz we don't loose image on small device.

  • @tjomtek1079
    @tjomtek1079 4 ปีที่แล้ว

    Hello , nice vids but the background makes its difficult to see your code that you type , could that be changed to a white background ...

  • @geekcode3079
    @geekcode3079 5 ปีที่แล้ว

    Love this kinda videos , make of this kind 😍🔥

  • @DominiQe9
    @DominiQe9 5 ปีที่แล้ว

    Gr8 video dude. Can u give a tip, how to make it work using that lambda(?) expression to add a navigation on top?

  • @maksymshevchenko5185
    @maksymshevchenko5185 5 ปีที่แล้ว

    Hey, Ed! Will you make second part of sub projects review?

  • @michongoma7598
    @michongoma7598 5 ปีที่แล้ว +1

    Thanks, these are the best!

  • @eloytekila
    @eloytekila 5 ปีที่แล้ว

    Thanks man! i had learn to much with your videos

  • @Wildrespect
    @Wildrespect ปีที่แล้ว

    I can’t find the images on the the link you pasted below

  • @HealthHabitsHQ.
    @HealthHabitsHQ. 5 ปีที่แล้ว +1

    hey Dev Ed love all of Ur video, would you recommend any other channels to learn js?

  • @sedoid
    @sedoid 5 ปีที่แล้ว +1

    Dude, you're awesome!!

  • @CarlosCruz85
    @CarlosCruz85 5 ปีที่แล้ว

    Awesome and simple! Powerfull!

  • @yk-mp7bk
    @yk-mp7bk 5 ปีที่แล้ว +1

    You are great man. Today i see your video. Recommended from You tube algorithm. I subscribe your channel and this is my 3rd video. Awesome. Love from India.

  • @alphateamcompany
    @alphateamcompany 5 ปีที่แล้ว

    15:9 why not we use text-align: center, to make it center?

    • @vishalproclan1891
      @vishalproclan1891 5 ปีที่แล้ว

      ALPHA Team company because h1 is absolute and not used as block element.

  • @osmeig6025
    @osmeig6025 5 ปีที่แล้ว

    Good tutorial! What theme do you use in the VSCode?

  • @FerdousHassan-cx8zi
    @FerdousHassan-cx8zi 4 ปีที่แล้ว +1

    Which theme you are using bro???

  • @Christine-lo9pe
    @Christine-lo9pe 3 ปีที่แล้ว +1

    I search for gsap cdn but i am not able to find TweenMax .

  • @charith-q8m
    @charith-q8m ปีที่แล้ว

    Let's hit one million at the end of the year

  • @Qors1314
    @Qors1314 5 ปีที่แล้ว +1

    Hey Ed! Could you possibly do a tut on media query? =D

  • @josephmanni7491
    @josephmanni7491 2 ปีที่แล้ว

    Is there any way to make the animations play only once? Basically I don’t want them to play when I scroll back up

  • @richardme123
    @richardme123 5 ปีที่แล้ว

    Can you make a video on the "gsap scroll to"? Thank you loving your content

  • @wilsonfaustino
    @wilsonfaustino 5 ปีที่แล้ว

    Man, I love your tutorial videos. Keep publishing them, please.
    Ps. I do not hate everything, but I do get upset when a webpage messes around with my scroll bar.
    Ps2. You could teach us how to get around with those annoying webpages.
    P3. Thank you and greetings from Brazil.

  • @victorcezeja2054
    @victorcezeja2054 2 ปีที่แล้ว

    Good day sir, i try going to the link below for the images and codes but its not opening, please how do i access the images?

  • @greenbyte6120
    @greenbyte6120 5 ปีที่แล้ว

    How to smoothly loop trough the color changing chair?

  • @laurellet.7390
    @laurellet.7390 2 ปีที่แล้ว

    Thanks Ed, great video as always!
    I'm using the onLeave for my current project, but when I try to make a second animation in the following section (destination.index == 2) it gives me back an error saying that "I cannot tween a null target".
    Does anyone know how to fix it?

  • @ЮрВлад
    @ЮрВлад 5 ปีที่แล้ว

    helllo, dear fan of Pew and 9gag. Thank you for the great video!

  • @heipadegdingamlesei
    @heipadegdingamlesei 4 ปีที่แล้ว

    ed I wanted you to know I would normally download the code and be off within 30 seconds but since you're so cool I see the whole thing to not miss any puns (Y)

  • @jugallabung
    @jugallabung 4 ปีที่แล้ว

    Hey there I was just wondering if we can do the same animation without using library (important!)

  • @sinashohrat2353
    @sinashohrat2353 5 ปีที่แล้ว

    We love animation and javascript =D

  • @4v41on8
    @4v41on8 4 ปีที่แล้ว

    TY BRO! un saludo desde Colombia!

  • @vic-pm3rm
    @vic-pm3rm 4 ปีที่แล้ว

    when you recieve a $110,000 contract in your gmail, 0:14 🤣