Discover the best full-page websites created by professional designers. Get inspired and start planning your perfect full-page web design today!

Simple Snap Scroll interaction's with FullPage.js

Inspiration: https://bit.ly/3PgejOR
FullPage.js: https://alvarotrigo.com/fullPage/

Made with Client-first by Finsweet

Simple Snap Scroll with FullPage.js

Parallax Menu

Bobby Rowe is a resource for brands and agencies looking for creative production talent, and an asset for talent looking to work with brands and agencies. 

A lot of fun at lunch but extremely serious over e-mail.

Designed 🎨 by Kendall Gregory, instagram.com/kendallgregory
Developed 👾 in Webflow by Josh Jacobs, webflow.com/joshwork

thickandthin.co

Bobby Rowe

Here's an example of using Webflow scroll interactions with Full Page JS by adding scrollBar:true to the custom code.

Full guide can be found here - https://www.digitalmast.co.uk/tutorials/full-page-js-interactions

fullPage JS Interactions

fullpage-js-interactions

Johnny Gu

If you clone and like this project, please leave me a "like", that will be a big encouragement for me to share more, thanks :)

Build with Fullpage.js integrate slider and tabs according to my design. Try to develop the potential of my webflow skill. I have learnt a lot in webflow community. Hope this cloneable project will give some inspiration to you as well:)
Play as you want ( the UI/UX design part is original from me, please don't use for a commercial purpose)



I am available for new projects. If you need help on projects just contact me: 
design@johnnygu.com

AStudio

AStudio full page website (in process)

Make fullpage.js work in Webflow in 4 steps. Fullpage.js allows you to add a scticky scroll to your site.

✓ fullpage.js Webflow template

Fullpage.js Webflow Integration Template

A collection of my favourite albums and singles of 2018, inspired by Drew Roper

2018 Music Review

Replicated from Sidney's old Typed.Js project on webflow. There is also code for fullscreen scrolling in the custom code.

Typed & Fullpage JS

Typed & Fullpage Scrolling JS

Fullpage.js

Full Page js speed

Want to make a full-screen slider with fullpage.js?
Here I'm giving away a basic template you can use as the starting point for your website. 

Full tutorial on youtube:
https://www.youtube.com/watch?v=1KF1_5A7Mes

Written blog post:
https://alvarotrigo.com/blog/how-to-use-fullpage-in-webflow-create-full-screen-slider/

For a license you can get one here:
https://alvarotrigo.com/fullPage/pricing/

And use it in the licenseKey option in the fullpage.js initialization.

fullPage.js base

Fullpage.js basic example

Using PagePiling with Webflow is simple.

- Start by creating a DIV with ID 'pagepiling'
- Within the DIV create several sections with the class 'section'
- Make these sections height:100vh
- Add this code inside <head> tag
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.css" />

- Add this code before <body> tag
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.6/jquery.pagepiling.min.js"></script>
<script>
$(document).ready(function() {
	$('#pagepiling').pagepiling();
});
</script>

You can customize this more, eg with anchors, scrolling speeds and menu navigation by looking at the GitHub here https://github.com/alvarotrigo/pagePiling.js/

PagePiling with Webflow (FullPage JS free alternative)

PagePiling with Webflow (FullPage JS Free Alternative) Cloneable

Airpod Pro Made in Webflow -- Follow me for more cloneable projects

Air pod pro website rebuild by Mustafa

Airpod Pro Made in Webflow by Mustafa

🏆 Best UI Design – CSSDA
🏆 Best UX Design – CSSDA
🏆 Best Innovation – CSSDA
🏆 Special Kudos – CSSDA

For the visual merchandising firm Alvico we were entrusted with doing a complete rebranding of their company (except for the logo). Along with the new branding we created a onepage website using tools like fullpage scroll, IX2 and a lot of custom code to create a unique feel and a memorable webpresence.

Alvico

ALVICO Vils AG

Thanks Tim for the Inspiration - check out his patreon! https://www.patreon.com/timothyricks

Swiper

Swiper Inception Prototype

Folding page as per:

https://tympanus.net/codrops/2020/01/14/3d-folding-technique/

FoldingPageExample

foldingpageexample

[NOTE: The interaction doesn't appear in the project preview frame. Open in the Webflow designer or view the live site to check it out!]

A quick project using Spline (spline.design) to create an interactive and embeddable 3D background. Enjoy!

3D Interactive Background

3D Interactive Background [Click + Drag]

Here I'm giving away a basic example using fullPage.js to create horizontal fullscreen slides for your site.

Feel free to clone it and use as the starting point for your site!

You can get a fullpage license from here:
https://alvarotrigo.com/fullPage/pricing/

And use it in the `licenseKey` option in the fullpage.js initialization.

fullPage.js with horizontal slides

fullPage.js - Horizontal Slides

This is a Storytelling site experiment I did with the content of my actual recent client. The site includes a lot of scroll animations and interactive storytelling concept. I hope you enjoy this. cheers! 


PS: sorry I haven't made it cloneable : ( please ask your queries in the comments.

Discover Full Page websites built by the Webflow community

Discover Full Page websites built by the Webflow community