fullPage.js — fullscreen scrolling website with Paroller.js

-

 

Official

Github document

Step1:

import the library with npm or CDN

npm install fullpage.js

or

<script src=”https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity=”sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

CSS:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity=”sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />

step2:

HTML

sections should be inside the “fullpage”, and the slide is under the section for slider effect.

“.active” is the one showing now.

step3:

CSS

sticky menu styles

Just a picture for each page.

step4:

js

For this demo, using vanilla js.

set up the new full page with options and events.

sectionsColor: different color background setup for each page

menu: the id of menu. directly link to anchors.

anchors: Defines the anchor links (#example) to be shown on the URL for each section.

navigation:navigation bar,small circles

navigationPosition: can be at left or right

navigationTooltips: Defines the tooltips to show for the navigation circles in case they are being used.

slidesNavigation:small circles on the slider page

slidesNavPosition:the position of small circles on the slide page,top or bottom.

scrollSpeed: Speed in milliseconds for the scrolling transitions.

fitToSection: Determines whether or not to fit sections to the viewport or not. When set to true the current active section will always fill the whole viewport.

fitToSectionDelay:(default 1000). If fitToSection is set to true, this delays the fitting by the configured milliseconds.

afterRender: after rendering action event. here I combined paroller.js to give the text some animations.

All options for fullpage.js:

I am using paroller.js on text. you can ignore it from here.

if you want to know more about it. Try it out! Paroller.js official

import paroller.js with npm or CDN under jQuery environment.

npm install paroller.js

or

<script src=”https://cdnjs.cloudflare.com/ajax/libs/paroller.js/1.4.7/jquery.paroller.min.js" integrity=”sha512-/YNPbFUTvpH1Ecv9UkU6plNvm+MwskxOr6/IR/58Kb0gO0DCN2h7OTNC2GCq6E4RgOYUbZkEPg8tXO5lZ3Kx+A==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

this is a lightweight parallax scrolling way.

Full code below:

👉Follow me for more useful web development content! love sharing🥰

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I like CDN fo
Read more

Thoughts about Progressive Web App

-
Image
  Browser London On my way to step into a senior web developer, I find out the most important thing is thinking like a pro, which means optimization and proficiency are the priority not only the coding processing. I’ve gotten interested in the Progressive Web App which is created in 2015 by Google. And the idea of a PWA is invented by Steve Jobs in 2007. cleverTap When talking about App, you may relate the apps in Apple or Android app store. This is kind of in the middle between the web and a real full-size App. What are the good parts of PWA? Progressive:  A PWA works in most modern web browsers with the power of progressive enhancement principles. Connectivity Independent:  It can run offline, even in the absence of a stable internet connection it works smoothly due to service workers. App-like Experience:  Though they are not real apps they offer the same level of user experience as native mobile apps with app-like navigation and interactions. Responsive:  PWAs work on every device
Read more

Meet Mantine: A TS-Based Open-Source React Components Library

-
Image
  Photo by  Kelly Sikkema  on  Unsplash Tailwind? Material? Chakra? You must hear a lot about the different kinds of UI choices for your projects. The better the experience and performance, the more popular it will be. Developers keep building awesome UIs for users who can be more productive and have an improved experience. This is so we can save more time to create new generational masterpieces. In this regard, I found the UI named Mantine which was published in 2021 and which keeps releasing new functions for now. Mantine is a React components library focused on providing a great user and developer experience and that comes with native dark theme support. GitHub - mantinedev/mantine: React components library with native dark theme support React components library with native dark theme support - GitHub - mantinedev/mantine: React components library with… github.com In 2021, the number of users kept increasing. bestofjs bestofjs The UI can work with different frameworks such as Next.j
Read more