Fullpage Animations With Javascript Tutorial

Поділитися
Вставка
  • Опубліковано 24 гру 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

  • @debabratasen6955
    @debabratasen6955 5 років тому +285

    "empty file empty as our Life"🤣🤣🤣

  • @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!

  • @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

  • @gavr1loo
    @gavr1loo 5 років тому +10

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

  • @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.

  • @ErrorDebug
    @ErrorDebug 5 років тому +13

    Finally you recorded what I am here for :)

  • @umeshagarwal4271
    @umeshagarwal4271 3 роки тому

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

  • @codedbychavez8190
    @codedbychavez8190 3 роки тому

    Excited to see this tutorial.

  • @zarghamaijaz5933
    @zarghamaijaz5933 4 роки тому +9

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

  • @sagarsingh2601
    @sagarsingh2601 5 років тому

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

  • @chrispaige873
    @chrispaige873 5 років тому +7

    My favorite teacher!

  • @---zf5qm
    @---zf5qm 5 років тому

    You're getting better every video bro

  • @lokeshnaidu1935
    @lokeshnaidu1935 3 роки тому

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

  • @VerifyBot
    @VerifyBot 5 років тому +1

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

  • @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 :)

  • @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.

  • @AkashAhmed-bb2nq
    @AkashAhmed-bb2nq 5 років тому +2

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

  • @ayoubbelouadah7195
    @ayoubbelouadah7195 5 років тому

    Eyy look who's back at the classic js tutos

  • @Frankslaboratory
    @Frankslaboratory 5 років тому +2

    Yes. JavaScript animations. My favourite thing.

  • @johnjeralddechavez4813
    @johnjeralddechavez4813 5 років тому +1

    My boy is back in coding!
    With FUN ❤

  • @janmejayshastri2892
    @janmejayshastri2892 3 роки тому

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

  • @tavleenkaur8325
    @tavleenkaur8325 3 роки тому +1

    I fUCKIN' LOOOOOVEEEE YOUR ENERGY 😂 🤣

  • @rohansaand2023
    @rohansaand2023 5 років тому

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

  • @jyscalv7008
    @jyscalv7008 5 років тому +1

    What theme are u using?

  • @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 ..

  • @VivekKumar-cj1jo
    @VivekKumar-cj1jo 4 роки тому +1

    which color theme does he use? anyone plz

  • @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 🙂🙂🙂😇😇🤗🤗

  • @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...

  • @anilgadekar3036
    @anilgadekar3036 5 років тому

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

  • @nith.p
    @nith.p 5 років тому

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

  • @dadlord689
    @dadlord689 5 років тому

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

  • @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 😅

  • @agungjanuardi9317
    @agungjanuardi9317 3 роки тому

    Great explanation, easier to understand

  • @buildwithgenai
    @buildwithgenai 4 роки тому

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

  • @agnieravinsensia4018
    @agnieravinsensia4018 2 роки тому

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

  • @bounce21190
    @bounce21190 4 роки тому

    Thanks Ed, just what I was looking for

  • @anamartin5311
    @anamartin5311 3 роки тому

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

  • @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

  • @antarracoding
    @antarracoding 5 років тому +1

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

  • @dremiq6670
    @dremiq6670 5 років тому +1

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

  • @thewebproject
    @thewebproject 5 років тому

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

  • @anastasia_kon
    @anastasia_kon 5 років тому +1

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

  • @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

  • @fibercreates
    @fibercreates 5 років тому

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

  • @charith-q8m
    @charith-q8m Рік тому

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

  • @loladinn12
    @loladinn12 5 років тому +1

    Dev ed new video? YASSSSSSSSSSSSSS

  • @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??

  • @Earthcows
    @Earthcows 5 років тому

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

  • @Mdelacruzmelo
    @Mdelacruzmelo 5 років тому

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

  • @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 :)

  • @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

  • @Amitkumar-zp3wb
    @Amitkumar-zp3wb 4 роки тому

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

  • @4v41on8
    @4v41on8 4 роки тому

    TY BRO! un saludo desde Colombia!

  • @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)

  • @karlo-o2z
    @karlo-o2z 3 роки тому +1

    tweenmax and other one does not exist anymore right?

  • @HarshRajAlwaysfree
    @HarshRajAlwaysfree 5 років тому +7

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

  • @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

  • @FerdousHassan-cx8zi
    @FerdousHassan-cx8zi 4 роки тому +1

    Which theme you are using bro???

  • @eloytekila
    @eloytekila 5 років тому

    Thanks man! i had learn to much with your videos

  • @TheDavechirag
    @TheDavechirag 5 років тому +5

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

  • @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

  • @tyjaniihassan4362
    @tyjaniihassan4362 5 років тому

    Literally the video I need

  • @itsrasterize8898
    @itsrasterize8898 5 років тому

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

  • @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.

  • @csisz_zsolt6763
    @csisz_zsolt6763 4 роки тому

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

  • @shubhamranjan4596
    @shubhamranjan4596 5 років тому

    all ur videos r amazing really helpful brother 🤘🏻

  • @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

  • @CarlosCruz85
    @CarlosCruz85 5 років тому

    Awesome and simple! Powerfull!

  • @rennesinternet3872
    @rennesinternet3872 4 роки тому

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

  • @BorNation
    @BorNation 5 років тому +1

    Did You Say You Stop Code??

  • @Wildrespect
    @Wildrespect Рік тому

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

  • @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?

  • @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

  • @thatguycheddar
    @thatguycheddar 5 років тому +1

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

  • @AliRaza-kt2bb
    @AliRaza-kt2bb 5 років тому

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

  • @mdsakibalhasan4888
    @mdsakibalhasan4888 3 роки тому

    Wow,,,,,, Nice Animation brother

  • @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.

  • @ahmedrashed5567
    @ahmedrashed5567 5 років тому +2

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

  • @FreezeHDxx
    @FreezeHDxx 3 роки тому

    Where can I get this fancy sweater?

  • @HealthHabitsHQ.
    @HealthHabitsHQ. 5 років тому +1

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

  • @Christine-lo9pe
    @Christine-lo9pe 3 роки тому +1

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

  • @ahmedsorkatti6468
    @ahmedsorkatti6468 3 роки тому

    any fullpage alternatives for commercial use?

  • @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 ...

  • @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?

  • @osmeig6025
    @osmeig6025 5 років тому

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

  • @tuxdinosaur1672
    @tuxdinosaur1672 5 років тому +1

    I love your videos :3

  • @gikt_
    @gikt_ 5 років тому +1

    hey bro, you have personal website?

  • @Xheasor
    @Xheasor 5 років тому

    Do I need a license key for this fullpage.min.js?

  • @ЮрВлад
    @ЮрВлад 5 років тому

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

  • @rajeshrout648
    @rajeshrout648 5 років тому

    Sir please make complete full responsive website tutorial with these animations tutorial. It can be a great help to the beginners

    • @alvaro_trigo
      @alvaro_trigo 5 років тому

      Just look at the "responiveWidth" and "responsiveHeight" options that fullPage.js provides as well as the class "fp-auto-height-repsonsive".
      Examples here:
      alvarotrigo.com/fullPage/examples/responsive.html
      alvarotrigo.com/fullPage/examples/autoHeightResponsive.html
      Docs:
      github.com/alvarotrigo/fullPage.js

  • @abdifatahmoh
    @abdifatahmoh 5 років тому

    Keep doing more projects like this in JS please.

  • @varshakapil8224
    @varshakapil8224 5 років тому

    Other than learnings...you are so cool...love your way...

  • @maksymshevchenko5185
    @maksymshevchenko5185 5 років тому

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

  • @RShow-e9r
    @RShow-e9r 4 роки тому

    Hello Dev Ed! I'm newbie in JS and come from TW.
    I want to know how can I keep that chair changing color?

    • @herry74
      @herry74 4 роки тому +1

      because .fromTo is from "gsap" plugin, maybe u can see this example greensock.com/1-19-0/ , hope this help

  •  5 років тому +1

    I don't see the link for the images :(