anchors + sliding = animation effects

Auguste
72 Posts
Auguste posted this 29 May 2019

Hello,

By placing anchors on different sections of page I would like to have the possibility to have sliding when I click on the menu like that :

http://preview.themeforest.net/item/edina-personal-portfolio-template/full_screen_preview/22647502

anchors + sliding = animation effects

:-)

Hello, By placing anchors on different sections of page I would like to have the possibility to have sliding when I click on the menu like that : http://preview.themeforest.net/item/edina-personal-portfolio-template/full_screen_preview/22647502 anchors + sliding = animation effects :-)

Last edited 29 May 2019 by Auguste

Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 30 May 2019

Hi Christophe,

There is no such possibility in the application, I'll add it to our wishlist.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Christophe, There is no such possibility in the application, I'll add it to our wishlist. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Auguste
72 Posts
Auguste posted this 30 May 2019

All other competitors already have this feature for a long time...
I think it should be implemented in version 2 of NicePage :-)
Thanks Hella

All other competitors already have this feature for a long time... I think it should be implemented in version 2 of NicePage :-) Thanks Hella
Support Team
Support Team posted this 30 May 2019

Hi Christophe,

Thank you for your comments. We added this request to our wish list.
Unfortunately, I cannot say whether this feature will be implemented or not and when.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Christophe, Thank you for your comments. We added this request to our wish list. Unfortunately, I cannot say whether this feature will be implemented or not and when. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Auguste
72 Posts
Auguste posted this 30 May 2019

Thanks Olivia ;-)

Thanks Olivia ;-)
Support Team
Support Team posted this 30 May 2019

Hi Christophe,

You are welcome. Feel free to contact us on any other occasion.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Christophe, You are welcome. Feel free to contact us on any other occasion. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
STP
1 Posts
STP posted this 09 June 2019

anchors + sliding = animation effects

Hi Christophe,
I was also looking for how to achieve this effect, and I've found a temporary workaround,
even if the implementation in Nicepage directly would be a much better solution with controls and such.

Anyway, here is the solution:
after you export to HTML,
add this line of code between the HEAD tags

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){


    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if

});
});

</script>

Hopefully this helps you too.

Cheers,
Federico

> anchors + sliding = animation effects Hi Christophe, I was also looking for how to achieve this effect, and I've found a temporary workaround, even if the implementation in Nicepage directly would be a much better solution with controls and such. Anyway, here is the solution: after you export to HTML, add this line of code between the HEAD tags <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> Hopefully this helps you too. Cheers, Federico

Last edited 09 June 2019 by STP

Support Team
Support Team posted this 11 June 2019

Hi,

Just a small input. You can add this code under the Theme >> Site Settings >> HTML >> Additional Head HTML tab and the code will be exported with the theme so no need to edit the exported files afterward.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Just a small input. You can add this code under the Theme >> Site Settings >> HTML >> Additional Head HTML tab and the code will be exported with the theme so no need to edit the exported files afterward. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Auguste
72 Posts
Auguste posted this 11 June 2019

Thanks a lot :-)

Thanks a lot :-)
Auguste
72 Posts
Auguste posted this 11 June 2019

I have tried several times to copy the code into "the Theme >> Site Settings >> HTML >> Additional Head HTML tab".
It does not work. Nicepage does not keep the code in "the Theme >> Site Settings >> HTML >> Additional Head HTML tab". When I open again "the Theme >> Site Settings >> HTML >> Additional Head HTML tab" the code is gone!

I have tried several times to copy the code into "the Theme >> Site Settings >> HTML >> Additional Head HTML tab". It does not work. Nicepage does not keep the code in "the Theme >> Site Settings >> HTML >> Additional Head HTML tab". When I open again "the Theme >> Site Settings >> HTML >> Additional Head HTML tab" the code is gone!
Support Team
Support Team posted this 11 June 2019

Hi Christophe,

The problem is in the commented part, exclude it and the code will be accepted. Like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Christophe, The problem is in the commented part, exclude it and the code will be accepted. Like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Auguste
72 Posts
Auguste posted this 11 June 2019

Thanks Hella ;-)

Thanks Hella ;-)
You must log in or register to leave comments