FullPage.js -- Create Modern, Scrolling Landing Pages Easily!

Подписаться 1,1 млн

Просмотров 112 тыс.

50% 1

skl.sh/designcourse24 - First 500 people to sign up will get their first 2 months free!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to take a look at FullPage.js, which is a JavaScript library for creating section-based and slide-based landing pages. It's packed with a ton of features for customization, and we're going to take a look at a few of them in a project setting.
FullPage.js is free to use for non-commercial products -- otherwise, it does cost some $ along with an array of extensions.
Check it out here:
alvarotrigo.com/fullPage/
Stock photos used in this project:
unsplash.com/photos/W3iFJ-LAzNo
unsplash.com/photos/ZzGFUVMV-ao
unsplash.com/photos/LmkaYtMpNS8
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-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!

Хобби

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 121

@DesignCourse 5 лет назад

Be sure to subscribe and click on that notification icon!

@ramisanawar9697 4 года назад

Sir. After log in fb with javascript or python or php or any other sources is it possible to speedly or rapidly scroll down into a fb group? I need to copy all posts and comments of a group at very short time.

@Sorrowone1 2 месяца назад

What a beautiful, simple and extremely useful tutorial. Thank you for providing us this video. Now, I can see a lot of changes and improvements in my job as a Frontend Developer. Thank you!

@matejrovis5525 4 года назад

You're a lifesaver man! Please don't ever stop with your content!

@immohaimenul 4 года назад

awesome tutorial man, we want more fullpage.js content. pls make those. love your work.

@ElinScreams 4 года назад

I just finished my 1st year of Frontend studies and have one more to go, and I have learned so much from your channel! Never stop! :D

@gingaduten4883 4 года назад

Ser etter samme studie selv. kan jeg spør hvilket studie du går? er det bra?

@ElinScreams 4 года назад

@@gingaduten4883 Hei! :) Jeg går 2-års Frontend på Noroff nettstudier - det er bra ja! men er alltids mer å lære utenfor skolen også, så jeg bruker mye tid på youtube og udemy. De har studiene på skolene også hvis man heller vi det :)

@aestheticallyamazing2003 5 лет назад

Love contents of this ♥️ Keep it up man 😉😊

@SantotoLeandro 5 лет назад

I would love to see a video from Scratch on how to do something like this as you mention as a posibility by the end of the video! Thanks for all the great work!

@alvaro_trigo 5 лет назад

You can also try to just read the code :) It is open sourced for everybody to learn from it: github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js

@steckrein6322 3 года назад

Still very useful after almost 2 years, thank you very much!

@alperburakpusar1051 Год назад

Are there still alternative scripts like this that do the same thing? (not like locomotivescroll)

@miguelacosta707 5 лет назад

Awesome js library and Awesome channel.

@beinyourguard 5 лет назад

Thank you man, I love this channel

@phogbinh 5 лет назад

Awesome tutorial, thank you!

@sionsebastian2501 2 года назад

Thank you for this amazing tutorial.

@noureldinmohamed2973 5 лет назад

Amazing and useful video thank you keep going

@miguelangelcruzacosta6834 5 лет назад

I really enjoy these videos

@elfridhasman4181 4 года назад

Thank You Very Much Design Course

@manassegitau2972 2 года назад

Thanks Gary, this is was so helpful. To change the color for the navigation dots there's you can add this to the css #fp-nav ul li a span, .fp-slidesNav ul li a span { background: #ffffff; /*Your preferred color*/ }

@PaulShadwell 5 лет назад

Very cool. Followed along and it all worked exactly as expected. Thanks. This has given me some great ideas for landing pages. Looking forward to a tutorial on how to do it without the Frontpage.js.

@alvaro_trigo 5 лет назад

You mean without fullPage.js? Why would you try to re-invent the wheel? :)

@PaulShadwell 5 лет назад

@@alvaro_trigo Yes of course I mean Fullpage.js. Depends on the type of wheel. ;-)

@mazdaknazemi8207 5 лет назад

man please one video for styled components in reactjs, need you break it ,thank you.

@abdumajidomonov2840 Год назад

Thank you very much and good luck👍👍👍👍👍👍👍👍

@kill3r287 5 лет назад

love your videos

@ayandeshmukh5655 5 лет назад

glad I found your channel.....

@polyglot1135 2 месяца назад

thank you so much 😍😍😍😍😍😍😍😍

@eduardkoshkelyan8670 4 года назад

Great job,thx u very much.

@lehlohonolomphuthi4 5 лет назад

Great tutorial. And if you do a course on it. Please include GSAP.

@palaashatri 5 лет назад

Thank you. 🍻❤️

@samandarodilboyev7013 3 года назад

thank you

@KAM704Prod 5 лет назад

Very god video. Thx!

@optimus6858 2 года назад

thanks a ton

@lfellidev 3 года назад

Tks man!

@platincompany7494 2 года назад

great thanks

@MilanB 5 лет назад

Is there a JS library that you didn't cover? :D

@marcelloworld1 3 года назад

Hi how can i move the navigation bar from right to bottom? I cant find in the documentation how to change the style of the nav bar.

@KingOfTheRedSkulls 4 года назад

Are we able to use bootstrap within the sections ? I only need fullpage for scrolling between pages easily, i need bootstrap to actually build the content

@bmm52824 5 лет назад

Please make a reactjs crash course :( BTW, Cool stuff man!

@TheBoab400 5 лет назад

Is there a reason for a separate js file not being created here to house the JavaScript code? Or is it just for purposes of video that the js is being saved in the .html file?

@DuyTran-ss4lu 5 лет назад

Tks a lot

@zacksaxton2529 3 года назад

Why will it not allow to scroll on to the next section when text content is placed in the div ( with content and styling )

@tonycaterev1341 4 года назад

Great Tutorial.! Is it possible to use Fullpage.js in combination with a css framework like Materialize or Bootstrap?

@alvaro_trigo 4 года назад

Of course! It i just a JS library :)

@andonyrodriguezmora9921 Год назад

how can I add images to the slides? I tried with different classes and poiting them with different images on CSS but it didn't work.

@alexandros-markovits 5 лет назад

Very cool library, i was actually looking for that functionality and also saw that that the creator has a vue specific library as well. Btw how would it be done without the lib? Like a simple custom way?

@alvaro_trigo 5 лет назад

The custom way is not as simple as it seems :) But basically , catch the mousewheel event and use translate3d CSS properties to scorrll up or down.

@alexandros-markovits 5 лет назад

@@alvaro_trigo hmm translate3d, will try it out, thanks! 😃

@void9867 4 года назад

are you allowed to use this (fullpage.js) if youre going to use it in actual website ? Hotel, store etc

@tolgabeyazoglu536 Год назад

hello, is there a solution for fullpage js when the internet is slow, the style is broken in late loading?

@clickbaitpolice9792 2 года назад

when we do this, is the entire page loaded at once? because i want to load one section at a time

@TheAditya64 5 лет назад

Gonna try this with React.

@alvaro_trigo 5 лет назад

There's an official React wrapper for it here: github.com/alvarotrigo/react-fullpage

@NandiOnTheWheels 3 года назад

Sir their is any library for Reactjs then we achieve same thing like when we are using parallex they provide somekind of animation on scrolling time Their is any library for we can scroll down component to component Direct like you created a project but I wanna make with Reactjs library with using parallex if you know please rpy me thanks for this video

@kodyar7081 4 года назад

Спасибо)

@saladforbrains2335 2 года назад

is something supposed to go in main.css and main.css.map?

@MuhammadAdnan-gx6rd 4 года назад

All good but.. problem will be on mobile screens ?

@princebabu6500 4 года назад

can you this feature in custom html/css and js and not in fullpage.js

@jitenderpondicherry5509 3 года назад

Hi... How can I add this to an angular.js project?

@amrmzkr 4 года назад

Hallo sir, what extension do you use for the vscode to get the type .class shortcut to div class thing?

@laketich 4 года назад

emmet

@Siddhant19931 4 года назад

Whenever I go to these cdn libraries the links i get are not the same as the ones shown in this video. They are incomplete, without the cdnjs.cloudfare.com and stuff. Why is that?

@adad8795 5 лет назад

Awesome

@user-sl6ou3qb9l 5 лет назад

Something's wrong with skillshare Can't sign up When I hit enter after putting my info it just restarts the page Non of the buttons work Anyone else with this problem?

@luckyandroid3568 4 года назад

is it free plugin to using in browser ?

@brainz80 5 лет назад

Thank you for the tip. One thing to note: using !important in CSS is a bad practice and should rarely be used. Most likely you could have targeted the span with something like ".fullpage-navigation span" instead.

@daidkalita461 5 лет назад

Ты просто красава , спасибо тебе

@ezyharofi8928 3 года назад

how can we add navbar in page ?

@dinoo2748 5 лет назад

Hey, Gary! I'm planning to make a website but I want to add a feature where you can change the language of the page. Should I use JavaScript that handles this or should I have separate .html files for every language or even use subfolder or subdirectories? Plz halp! :D

@sashabeep 5 лет назад

For the one page is better to use elements with lang attribute and only switch lang attribute for HTML element with one string of JS and hide all the elements with other lang using 1 css rule like html[lang="langOne"] *[lang="langTwo"]{display: none;}

@dinoo2748 5 лет назад

@@sashabeep So just hide the elements I don't want to see on one language and show all the others and vice versa. Thanks for your help! :D

5 лет назад

First + 2 Nice video!

@JamesWelbes 4 года назад

Dang, was hoping you were gonna use npm. I installed via npm but now I don't know how to actually include/implement it

@fernandocabrera6231 3 года назад

you dumbass it easy

@JamesWelbes 3 года назад

@@fernandocabrera6231 cool story, douche

@luxmailsundhar 2 года назад

How to use inside of a middle page

@vladislavivanov1546 5 лет назад

Cool

@thomaspotterdotexe 2 года назад

Is there any alternative for this plugin? This is great but I would like to use this in my commercial website but needed to pay it :(

@usynnstradler 2 года назад

its free to use

@thomaspotterdotexe 2 года назад

@@usynnstradler yeah but I think I read somewhere in the docs I need to buy a license for commercial use

@OyunProg 2 месяца назад

do you have any key ?

@christoperjohnteodosio2688 4 года назад

Hello, I have been coding along but received this error message "fullpage.js:3438 fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:". I am not sure where I went wrong. Can someone please advise?

@laketich 4 года назад

yeah, i had the same issue, have you resolved the problem?

@garrettlemieux4620 3 года назад

would anyone know why i copied everything he did and yet my h1's have a top margin that makes the image not cover completely and when i text-align the h1 center they only move to the center of the top and not the absolute center of the page?

@bennihtm 3 года назад

The browser possibly. Did you try to open it in different browsers, e.g. Chrome and Firefox.

@BlackJacketJones Год назад

How to add a menu

@frigyesvass9854 3 года назад

What is 'free for non commercial use' means? It means that I can't develop a website for somebody else using this without a license?

@andrewrico8321 5 лет назад

isn't the script tag supposed to be under the body tag?

@LtJackMorton 5 лет назад

Or should be async.It doesnt really matter in this case,because its not a huge site and not a webdev tutorial.

@alvaro_trigo 5 лет назад

Before the closing

@saladforbrains2335 2 года назад

lmao nothing works for me at all for reasons unknown to me. Everytime I try to follow a tutorial it looks incredibly easy, and nothing works on my end. Fantastic.

@franktielemans6624 5 лет назад

what happens on mobile when content exceeds 100% viewport height?

@sashabeep 5 лет назад

You should solve this by yourself :) There are some breakpoints for height and width in init section, overall, this aproach is not for sites with frequently changeable content

@alvaro_trigo 5 лет назад

Solution is quite easy. There are a few options available for these cases. You can just use the options `responsiveHeight` or `responsiveWidth` to remove the autoscroll feature. That, combined with the class `fp-auto-height-responsive` that removes the constraint of having full height sections, solves most of the cases. See this example: alvarotrigo.com/fullPage/examples/autoHeightResponsive.html Some people prefer to use the option `scrollOverflow` to create a scrollbar inside the section, but I usually do not recommend its use as it can be buggy in certain cases. alvarotrigo.com/fullPage/examples/scrolling.html And then you can even make use of the extension `responsiveSlides` to turn horizontal slides into vertical ones when in responsive mode. alvarotrigo.com/fullPage/extensions/responsive-slides.html

@Faks_Ar 5 лет назад

whats with that weird camera angle?

@deusvictim1012 5 лет назад

try use this js when height content of slide (not just h1 and background) > height window... it doesn't work good and one more test on ios not only on android...

@alvaro_trigo 5 лет назад

Glad you point it out! Actually the best way to deal with small screen devices is by making use of the responsive options that fullPage.js provides. Check the `responsiveWidth`, `responsiveHeight`, `responsiveSlides` options and `fp-auto-height-responsive` class.

@weltmeister 5 лет назад

I think there's a way to do it with just css?

@alvaro_trigo 5 лет назад

Kinda. You can use scroll-snap property of CSS but it is not 100% cross browser compatible and won't do all the magic for you. Bear in mind that fullpage is much more than just snap scrolling. It has responsive options, css state classes, callbacks, lazy loading, auto play pause media elements, bullets navigations, normalScrollElements, plenty of methods, functions and of course, extensions. And all of it cross-browser compatible up to IE 9 ;)

@weltmeister 5 лет назад

@@alvaro_trigo it's pretty clear on your website that it can do more than just scroll-snapping, but I don't like using 3rd party libraries unless it's really really necessary, and I see the scroll-snapping as just for show kind of thing, and the rest of what your lib offers is already available to me from other libs that I'm already using... I wish the best for you and the future of your library I really like it maybe I'll change my mind and use it in one of my future projects :)

@alvaro_trigo 5 лет назад

@@weltmeister sure! Use whatever best fits your needs! ;)

@BlackJacketJones Год назад

is it possible to have custom icons instead of the dots for navigation. i would like to replace the dots with svg icons i created in adobe illustrator

@lalitkumar-zm9sq 4 года назад

sir, I got an issue on full page.js. I need a continuous horizontal slider in a circular loop. I have used continuous horizontal: true, I had referred all the solutions in these links and other solutions from this link Continuous horizontal slider · Issue #124 · alvarotrigo/fullPage.js but I can't solve this issue.

@brandonharvey2507 5 лет назад

Please, someone, answer me. I'm about to design my idea in Figma. But after im finished, what is the next step to actually make it functional?

@pholladol5167 4 года назад

Mine won't work. I was about to have code like you.

@pouyapj1jan122 5 лет назад

where are the source code bro?

@alvaro_trigo 5 лет назад

Here it is :) github.com/alvarotrigo/fullPage.js

@ballerhustler1101 5 лет назад

Круто кста

@sashabeep 5 лет назад

Вся крутизна заканчивается на попытках скрестить didplay:table с флексами, нерабочей навигацией, переполнением одного из экранов, ради которого надо купить плагин за 25 баксов и других весёлых вещах

@JamesWalpole84 3 года назад

There's a plugin called easyScrollDots that does this effect with the vertical scrolling but you dont need full screen slides. github.com/Superhands89/EasyScrollDots

@turtrueweb 3 года назад

@sashabeep 5 лет назад

Fullpage is VERY outdated in markup and css which it produces. Looks like it was developed once 10 years ago for paid addons without any improvement. Author is unfriendly. Many issues on github without any support. Once i've used it i decided not to use it never.

@alvaro_trigo 5 лет назад

I'm also wondering, why do you say the CSS it produces is outdated? Can you please elaborate that? What about the HTML markup you think is outdated?

@sashabeep 5 лет назад

@@alvaro_trigo wonder that you replied, that is pretty strange, instead of many github issues and feature proprosals :) why don't you use tables in 2019, wrapping anything by table-cells is not enough, just don't forget to ditch the doctype :))))))) At the other hand, i now how difficult to maintain any public project with long lifetime and big user base and it's very hard work everyday. You should upgrade your soft skills and be more friendly to the users. Build a support team for that.

@alvaro_trigo 5 лет назад

@@sashabeep yeah I also response thousands of questions in stackoverflow, Webflow forums, twitter... so not really that strange :) RU-vid is just another bit. Tables? Do you mean "flexbox"? Because I'm pretty sure the table element is much older than the CSS property table-cell :) Are you suggesting using a table instead of the table-cell property? In any case, you can always disable the table-cell element by using `verticalCentered:false`. I've been thinking about the support person for a while, but perhaps it's better for the moment for me to keep doing that, as this way I can realise what developers demand and what they struggles are. However it is something that has been in my mind for a while!

@bharath2477 4 года назад

@@alvaro_trigo It shows this error. "fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option." Can I get a open source activation key for this.