Fullpage.js scroll effect

Publishing help General
1

Is it possible to implement the single scroll navigation like this?

3 Likes
2

Yeah itā€™s pretty straightforward to do this in Webflow using custom attributes and custom code. Iā€™m looking at the documentation and you can add data-anchor="slide1" in the section settings

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

Then for you can add data-index="3" the same way to some text or a Div Block for the nav.

From documentation:
<span class="toSlide" data-index="3">Click here to go to slide 3</span>

1 Like
3

That makes sense for a horizontal slider. Im really trying to have the sections slide into place with the minimal scroll effect. Once the visitor scrolls even a little, the section slides into place, similar to http://www.apple.com/iphone-5s/.

I just did some searching and it looks like the fullPage.js is the way to do it.

Hereā€™s the public link to the site I would like to add the effect, https://webflow.com/design/brianingle?preview=b72a172b6e5578d39fff2506ed53462f

Thanks!

4

Totally. I was just showing you how to set it up using custom attributes. It looks like the scrolling effect is part of the js file. Just follow the instructions in the documentation here: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple and you should be able to get it to work.

autoScrolling: (default true) Defines whether to use the
ā€œautomaticā€ scrolling or the ā€œnormalā€ one. It also has affects the way
the sections fit in the browser/device window in tablets and mobile
phones.

5

Is there a certain way to add the .js file? Or is this only possible to accomplish outside of webflow. I tried copy pasting into the custom head section, but cannot get the most basic version to work.

https://webflow.com/design/briantest?preview=4fe428d42ad194e857d41b450b8e1e84

6

I was able to get most of it to work in webflow! I am just having trouble making the menu items active when the corresponding section is in view.

Hereā€™s the public link - https://webflow.com/design/brianingle?preview=b72a172b6e5578d39fff2506ed53462f

Any help would be great, Im new to coding and webflow has helped me learn very quickly! Awesome product.

7

Awesome! Read about the menu and active property in the Options section of the documentation to set up the ā€œactiveā€ links:

menu: (default false) A selector can be used to specify the menu to
link with the slides. This way the scrolling of the slides will
activate the corresponding element in the menu using the class active.
This wonā€™t generate a menu but will just add the active class to the
element in the given menu with the corresponding anchor links. In
order to link the elements of the menu with the slides, an HTML 5
data-tag (data-menuanchor) will be needed to use with the same anchor
links as used within the sections.

8

So nice between you two, but on site mentioned, http://brianingle.webflow.com/, scrolling DOES NOT WORK. Like on my own, http://hackathonbridge.webflow.com/, https://webflow.com/design/hackathonbridge?preview=c2a3ec305de0cb52756b73ac3afe502c

Doc structure is proper:

<div id="fullpage">
  <div class="section">
  ...

, function in head is:

$(document).ready(function(){
  $('#fullpage').fullpage();

ā€¦and all Iā€™ve got is vertical scrollbar disappeared - and this error:

Uncaught TypeError: undefined is not a function

(it concerns $(ā€˜#fullpageā€™).fullpage())

Any thoughts?

9

Sorry, I had to disable FullPage.js and work further. What a pity. But if any of you would have any ideas - donā€™t hesitate to share.

10

Move the jQuery code to the second field in Custom Code called before </body>.

11

I am also having the same problem as mmasti. I am running on CodeKit, which loads the latest jQuery library (2.1.1). The instructions in fullpage.js suggest jQuery 1.9.1, but I tested against that and I can reproduce the problem. I also tested this without CodeKit and I can reproduce the problem. Here is the markup:

<link rel="stylesheet" href="/bower_components/fullpage.js/jquery.fullPage.css" />
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/fullpage.js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#fullpage').fullpage();
	});
</script>

And the HTML:

<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div></div>
12

From the docs ā€” easing: (default easeInQuart) Defines the transition effect to use for the vertical and horizontal scrolling. It requires the file vendors/jquery.easings.min.js or jQuery UI for using some of its transitions. Other libraries could be used instead.

Set easing to false. If it doesnā€™t help then open the ticket.

13

Iā€™m so sorry, but I donā€™t have idea how I add external code and implement in my site (in webflow, of course).

I wanna just implement the single scroll navigation in my site :confused:

15

@Marcus_Vinicius_Nobr

Hereā€™s a running demoā€¦ so you can compare it to what the Webflow Preview will provide:
http://businesswebsites.info/wf/fp/

The two will look a little different.

Also

Fullpage will not run properly on Webflows servers

  • you will need to export your website.

Create a Project
Create a DIVā€¦ class it as ā€œpagewrapā€
Create 5 DIVā€™s within pagewrapā€¦ class then as ā€œsectionā€
(NOTE: theses are not ā€œWebflow Sectionsā€)

(NOTE: the Height of each section s 100VH not 100PX or 100%.)
ā€” manually type 100vh into the Height field

Insert a Container into each DIV (class: section)

Insert a Paragraph and a Text Field into each DIV (class: section)

1859Ɨ448 195 KB

Interactions:

Create an initialization interaction for the paragraphs. The INIT will move the paragraphs left 200 pixels.

238Ɨ593 13.8 KB

Create 1 interaction for each DIV class:section

  • on scroll (target the specific paragraph)
    ā€“ Scroll In: move paragraph to origin
    ā€“ Scroll Out: move paragraph left 200 pixels

238Ɨ661 45.2 KB

Also:

  • Select Custom Code of a New Project
    Replace ā€œ[YOUR-DOMAIN.COM]ā€ā€¦ with your domain name.

  • Enter this into ā€œHead Codeā€

<link rel="style sheet" type="text/css"

href ="http://[YOUR-DOMAIN.COM]/jquery.fullPage.css" />

  • Enter this into Footer Code

    <script type="text/javascript">
	$(document).ready(function() {
		$('.pagewrap').fullpage({
			'verticalCentered': true,
			'css3': true,
			'navigation': true,
			'navigationPosition': 'right',
			});
	});
</script>
1 Like
16

Hello, Iā€™m quite newā€¦
I succed to make fullpagejs work perfectly on my pageā€¦ but it interfer with with native webflow interrection onscrollā€¦ Basely, it makes the native ā€œcurrentā€ statue not working anymoreā€¦ means that webflow doesnā€™t recognise anymore the shown elementsā€¦

I dont kows if im clear in my explanations

If someone know something about how to fix-it, it will be great and really useful.
Thnak you.

17

Hi @slimbl, Could you update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow
Regard, Dave

18

Hey Dave, thank you for your interest. I Finally created a discussion about my issue. here below the link for this discussion.

There is there, i hope, the details about what you asked for.

Tahnk you for your help.
Best regards