Scroll Down arrow on a FullScreen page

[treh16]

Hi,

I can't seem to find the option to include an arrow on a Full Screen gridder to give user visual mark that some content follows.

I'm using the "Set Row Height to Browser Height" option.

Please see here: https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/06/hide-menu-until-scroll.gif

What would be the best way to implement this?

Thanks a lot!

Tom

[mm]

Hi Armin,

Me too, I would need something quite like the same, like the cover option scroll down, but only on a specific linked word or button.

Thank you in advance,
Enrico

[arminunruh]

Hey!
Please use "browser height for row height" and position a text at the bottom like here:
http://laytheme.com/documentation.html#use-browser-height-for-row-height

You can use right-click -> "space bottom" to position that text a bit :D

Then in the gridder mouseover over that text and click the "class" button.
Enter: fp-godown

This works with fullscreen slider addon v. 1.3.1 and later

[treh16]

Hi Armin,

thanks for the quick reply!

Would you help me setting up something more similar to this:

http://webdesignbird.com/blog/divi-theme-css-improvements-tips-modifications

OR

http://codepen.io/shakdaniel/pen/JoKOQx

I just need an icon pointing down, that would disappear when user scrolls down.

(By the way, I also tried your solution for Enrico, and the cursor changes however the page doesn't scroll down on click.)

Thanks a lot!

[arminunruh]

Enter this in "Custom CSS for desktop version":

.icon-scroll{
cursor: pointer;
}

.icon-scroll,
.icon-scroll:before{
  position: absolute;
  left: 50%;
}

.icon-scroll{
  width: 40px;
  height: 70px;
  margin-left: -20px;
  top: 50%;
  margin-top: -80px;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
}

.icon-scroll:before{
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}

@keyframes scroll {
  0% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(46px);
    }
}

In your project, insert a text element like here: http://laytheme.com/documentation.html#use-browser-height-for-row-height
Don't write anything into the text, but open the code editor with the "<>" button and enter: <div class='icon-scroll'><div/>

Then in the gridder mouseover over that text and click the "class" button.
Enter: fp-godown

[treh16]

Hi Armin,

the script is not really reacting. Could you have a quick look pls here:

http://plane-site.com/projects/woha/

Thx!

Tom

[treh16]

@arminunruh Thanks! Am I missing something? After following your steps,

• the .on click just doesn't react. The jQuery.fn.fullpage.moveSectionDown(); doesn't get executed.
• the msOnLeave as well.

Does it work on your side?

[ArneRobot]

@arminunruh Hello.

This works well for me. Is there also a function the other way round? I use this to hide the project-arrows and the main menu when I scroll down inside a magnetic fullscreen slide. But I need to show those elements again when I slide up back to the page head. Any way to do that?

Thank you!
Arne

[arminunruh]

@treh16 @mm

I just did a fullscreen slider update 1.3.1. Please update to that version. Then give your element in the gridder a class of "fp-godown" (without ""). You can get rid of the class "fullpage-godown" that you entered before.

Go to "lay options" -> "custom css & html" -> "custom head content"

Then add:

<script>
jQuery(window).on('fpOnLeave', function(event, data){
    console.log('event', event);
    console.log('data', data);
    if(data.index == 1){
        jQuery(".fp-godown").fadeOut();
    }
    //in case you want to fade it in when coming back to first slide
    if(data.nextIndex == 1){
        jQuery(".fp-godown").fadeIn();
    }    
});
</script>

@ArneRobot
Please see the example here :)

[ArneRobot]

@arminunruh Thanks a lot Armin! That worked like a charme!

[treh16]

@arminunruh Now I see why it's not working! I don't have a Full Screen Slider! Anyway around to do it without that add-on?

Thanks a lot!

[arminunruh]

^^

with jquery you can animate scroll like this. This needs a class of "clickme" on your element:

<script>
jQuery(document).on("click", ".clickme", function(){
jQuery("html, body").animate({ scrollTop: window.innerHeight }, 600);
})
</script>