Create automatic scrolling with fullPage.js

How to automatically scroll through fullPage.js sections.
alvarotrigo.com/fullPage/
Documentation & Plugin Download:
github.com/alvarotrigo/fullPa...
Wordpress Theme:
alvarotrigo.com/fullPage/utils...
Frecuently Answer Questions:
github.com/alvarotrigo/fullPa...
Donations:
www.paypal.com/cgi-bin/webscr...

Пікірлер: 41

  • @macropodus
    @macropodus9 жыл бұрын

    Great plugin (wp-plugin)! Thank You!

  • @alvaro_trigo

    @alvaro_trigo

    9 жыл бұрын

    macropodus Thanks, glad it helps!

  • @jonathanpwheat
    @jonathanpwheat7 жыл бұрын

    Thanks! This is a great script. I know this is an old video, but I just implemented this for a scrolling conference schedule and added a pause button. I added to the button to the screen like this (I'm using font awesome for the icon) : Then added a click handler to it to change states / icon when clicked : $('#pause_button').click(function() { var button_state = $(this).attr('state'); if (button_state == "play") { $(this).removeClass('fa-pause'); $(this).addClass('fa-play'); $(this).attr('state', 'pause'); } else { $(this).removeClass('fa-play'); $(this).addClass('fa-pause'); $(this).attr('state', 'play'); } }); Then modified your interval code to obey that button state : afterRender: function () { window.setInterval(function(){ var button_state = $('#pause_button').attr('state'); if ( button_state == "play") { $.fn.fullpage.moveSectionDown(); } }, 20000); I enabled keyboardScrolling: true, so I can pause it and manually control the schedule if I need to. This will be displayed on a large monitor behind the registration desk at the conference.

  • @alvaro_trigo

    @alvaro_trigo

    7 жыл бұрын

    Looking good!

  • @davishoang3919
    @davishoang39198 жыл бұрын

    love it, thanks bro :D

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    +Davis Hoang You're welcome!

  • @leeyeelean
    @leeyeelean8 жыл бұрын

    Thank you!!!

  • @ivanorantoniobolson9277
    @ivanorantoniobolson92779 жыл бұрын

    hey! could you explain a bit about how the menu works, im new at css and JS things, I want to change the menu position but i found some difficult because the menu moves itself through the sections

  • @neckskull
    @neckskull Жыл бұрын

    Hola Alvaro, no entiendo js alguna manera de autoatizar el scroll o alguna plantilla? gracias.

  • @KinTuza
    @KinTuza9 жыл бұрын

    Thank you:)

  • @alvaro_trigo

    @alvaro_trigo

    9 жыл бұрын

    ‎George Jung you're welcome!

  • @yasirjafar6794
    @yasirjafar67947 жыл бұрын

    thnx for the contribution bro rep++

  • @alvaro_trigo

    @alvaro_trigo

    7 жыл бұрын

    No problem! ;)

  • @stagster2483
    @stagster24838 жыл бұрын

    It is possible to use structure like this? With normal content and fullpage content after and normal again? with 5 or more sections

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    Nop.

  • @FrOdOosk
    @FrOdOosk5 жыл бұрын

    Hola Alvaro primero que nada me encanta el plugin, muy buen trabajo. Si soy freelancer y estoy desarrollando un sitio para un cliente necesito pagar la licencia?

  • @alvaro_trigo

    @alvaro_trigo

    5 жыл бұрын

    Si. Necesitas una licencia.

  • @maggiecreatives1751
    @maggiecreatives17519 жыл бұрын

    works, except when i click on menu item right before it changes slides - it breaks the slider and images disappear -- how can I fix this? Thanks!

  • @alvaro_trigo

    @alvaro_trigo

    9 жыл бұрын

    Maggie Creatives Please create a new question in stackoverflow.com/ about it.

  • @GlenPiggott
    @GlenPiggott8 жыл бұрын

    Is it possible to have the automatic scrolling start from the second section onwards, so the first one is a 'holding section' until the visitor goes to section 2? Thank you

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    +Glen Piggott yep, use the afterLoad callback instead of afterRender and use a condition to filter by the 2nd section to wrap your code.

  • @GlenPiggott

    @GlenPiggott

    8 жыл бұрын

    +Álvaro Trigo Wow, thanks for the quick reply. I've used the following which seems to work great, until it goes round again and then it gets all confused... $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], anchors: ['home', 'story1', 'story2', 'story3', 'story4'], continuousVertical: true, afterLoad: function(anchorLink){ var loadedSection = $(this); if(anchorLink == 'story1'){ setInterval (function(){ $.fn.fullpage.moveSectionDown(); }, 5000); } } }); });

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    +Glen Piggott this is not the place to ask for those kind of questions. Please ask in stackoverflow.com/ with the fullpage.js tag.

  • @Retro_80s_Guy
    @Retro_80s_Guy6 жыл бұрын

    I am doing a code for a slider. The slider is on the second page (section), is there anything that has to be done to the code to account for this? I have added the code to make the slider autoplay using the moveSlideRight....but it does nothing. The slider just sits there. I cannot figure what I have done wrong. Here is my script: var myFullpage = new fullpage('#fullpage', { sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], anchors: ['Home', 'Menu', 'Contact', '4thpage', 'lastPage'], menu: '#menu', loopBottom: true, afterRender: function () { setInterval(function () { $.fn.fullpage.moveSlideRight(); }, 2000); } });

  • @angelvilchez3676
    @angelvilchez36768 жыл бұрын

    Buenas, ,muy buen trabajo con la lubreria. Tengo una pregunta... Es compatible esta libreria con temas famosos como Divi? Gracias

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    +Angel Vilchez No se que es Divi ni lo que entiendes por "compatible". Tendrás que probarlo tu mismo. Pero recuerda que no es un plugin de wordpress, sino de jQuery.

  • @angelvilchez3676

    @angelvilchez3676

    8 жыл бұрын

    +Álvaro Trigo Divi es un builder... Quizás más exacto sería apreguntar si puedo implementar fullpage.js en wordpress para utilizarlo en layouts y de qué forma? Gracias

  • @alvaro_trigo

    @alvaro_trigo

    8 жыл бұрын

    +Angel Vilchez +Angel Vilchez Claro que es posible, como? No se. Yo te recomendaría usar fullpane que ya lo tiene integrado. Link in la descripción

  • @cahyoadinugroho3091
    @cahyoadinugroho30913 жыл бұрын

    How to create like that,,if applied for auto scroll tabel,,,??

  • @alvaro_trigo

    @alvaro_trigo

    3 жыл бұрын

    I don't understand the question. Can you please elaborate it?

  • @camilofernandez5082
    @camilofernandez50824 жыл бұрын

    It's possible to stop autoscrolling on hover in some element?

  • @alvaro_trigo

    @alvaro_trigo

    4 жыл бұрын

    Sure! See the `normalScrollElements` option. Demo here: codepen.io/alvarotrigo/pen/RmVazM Or even the `setAllowScrolling(false). Demo here: codepen.io/alvarotrigo/pen/EjeNdq

  • @TheScratur3
    @TheScratur39 жыл бұрын

    what if you want to execute a js animation after loading the second section for example?

  • @alvaro_trigo

    @alvaro_trigo

    9 жыл бұрын

    scratur YO Check out this: kzread.info/dash/bejne/o513uLKpeZzSY7A.html

  • @TheScratur3

    @TheScratur3

    9 жыл бұрын

    Álvaro Trigo Thank you! looks simple :) i'd like to use wow.js for the bounce effect and use fullpage.js at the same time... is it possible?

  • @alvaro_trigo

    @alvaro_trigo

    9 жыл бұрын

    scratur YO Only possible if you use `scrollBar:true` or `autoScrolling:false`

  • @TheScratur3

    @TheScratur3

    9 жыл бұрын

    i'd like to have the scrollbar hidden tho :/ that's whay i chose your plugin.

  • @TheScratur3

    @TheScratur3

    9 жыл бұрын

    Álvaro Trigo ^