How To Add a Bouncing Arrow To Splash Up

In this tutorial we are going to recreate the bouncing down arrow that was seen on the  Xolani Studios website. For this example we will be using the Splash-Up section but you can apply it anywhere.

Before we begin do not that you will need to have a Pro Membership with PageLines in order to have access to the section. For those that do not have a pro section and would like to incorporate the same effect click here.

The Splash-Up section comes with 3 locations to display menus. For this tutorial we will be focusing on the footer menu to display our bouncing down arrow.

You can learn how to create scroll to anchor here.

Step 1

Go to your appearance > menus and create a new menu and call it anything you like.

For this example I named it footer scroll down.

Next you will need to click on the screen options at the top of the page and turn on your css classes.

Step 2

Open up the menu item and you will need to add a couple things.

The first thing is the font awesome icon for chevron down and add a class of bounce to the css classes box.

<i class="pl-icon pl-icon-angle-down"></i>

It should look like this afterwards.

iheart pagelines

Step 3

Now for the CSS, if you have done everything as stated when you add this last bit of css you should see the animation begin.

/*arrow bounce*/
.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

/*arrow down end*/

Alternative Method

For those clients/developers who do not have a pro subscriptions with PageLines you could received the same affect. The only difference is will have to use a text section or embed section to enter this bit of html and afterwards some additional css or custom settings within the sections will need to be added to position the bouncing arrow further down the page.

<div class="bounce"><i class="fa fa-angle-down"></i></div>

 

On a side note you can use the first method with any section that allows you to display a menu. The next best thing would be the Elements Section.

I hope you enjoyed reading this tutorial if you have any question post them below.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

8 Responses to "How To Add a Bouncing Arrow To Splash Up"
  1. Hi Aires,
    This is also great. Question: the chevron is small so I tried this <i class="fa fa-angle-down fa-2x" and I have two small chevrons, side by side, one animated the other not...the bouncing one also is linked and the still one isn't. Can you point me in the right direction in terms of CSS syntax to get this right? That is larger FA icon. Thanks.

    • There are a couple ways you can do this. The first way is to add a class to icon something like this i class="ihp-big fa fa-chevron-down" I added a class of .ihp-big and to target it you would add the css of
      .ihp-big.fa { font-size:40px!important;} notice that there is no space between the classes.

      The next option is to enable css classes in the screen options and add a class there and your css would look like so
      .my-custom-class .fa {font-size:40px!important;} in this instance there is a space between the classes.

      I hope this was helpful. Let me know if you have any problems.

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

How To Add a Bouncing Arrow To Splash Up

Published on by | 8 Comments

In this tutorial we are going to recreate the bouncing down arrow that was seen on the  Xolani Studios website. For this example we will be using the Splash-Up section but you can apply it anywhere.

Before we begin do not that you will need to have a Pro Membership with PageLines in order to have access to the section. For those that do not have a pro section and would like to incorporate the same effect click here.

The Splash-Up section comes with 3 locations to display menus. For this tutorial we will be focusing on the footer menu to display our bouncing down arrow.

You can learn how to create scroll to anchor here.

Step 1

Go to your appearance > menus and create a new menu and call it anything you like.

For this example I named it footer scroll down.

Next you will need to click on the screen options at the top of the page and turn on your css classes.

Step 2

Open up the menu item and you will need to add a couple things.

The first thing is the font awesome icon for chevron down and add a class of bounce to the css classes box.

<i class="pl-icon pl-icon-angle-down"></i>

It should look like this afterwards.

iheart pagelines

Step 3

Now for the CSS, if you have done everything as stated when you add this last bit of css you should see the animation begin.

/*arrow bounce*/
.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

/*arrow down end*/

Alternative Method

For those clients/developers who do not have a pro subscriptions with PageLines you could received the same affect. The only difference is will have to use a text section or embed section to enter this bit of html and afterwards some additional css or custom settings within the sections will need to be added to position the bouncing arrow further down the page.

<div class="bounce"><i class="fa fa-angle-down"></i></div>

 

On a side note you can use the first method with any section that allows you to display a menu. The next best thing would be the Elements Section.

I hope you enjoyed reading this tutorial if you have any question post them below.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

8 Responses to "How To Add a Bouncing Arrow To Splash Up"
  1. Hi Aires,
    This is also great. Question: the chevron is small so I tried this <i class="fa fa-angle-down fa-2x" and I have two small chevrons, side by side, one animated the other not...the bouncing one also is linked and the still one isn't. Can you point me in the right direction in terms of CSS syntax to get this right? That is larger FA icon. Thanks.

    • There are a couple ways you can do this. The first way is to add a class to icon something like this i class="ihp-big fa fa-chevron-down" I added a class of .ihp-big and to target it you would add the css of
      .ihp-big.fa { font-size:40px!important;} notice that there is no space between the classes.

      The next option is to enable css classes in the screen options and add a class there and your css would look like so
      .my-custom-class .fa {font-size:40px!important;} in this instance there is a space between the classes.

      I hope this was helpful. Let me know if you have any problems.

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match