Thursday, 24 September 2015 12:49

Hot Air Balloon

Written by

What is this?

This is my Hot Air Balloon code which adds a Bouncing Hot Air Balloon to any Joomla page to add that little bit extra character to your site. You can add this to any page by using a module or embed the code into the page itself like I have done here.  I got the original code from Joomlashine.

If you are using a Joomlashine template, it is is best to published the balloon to one of the Sticky Positions.

You will also find useful links and resources at the bottom of this page to make your own Bouncing Hot Air Balloon.

Features

  • Bounces up and down
  • Uses CSS and JS
  • A close button that stores the click/decision in a cookie, so once the balloon has been closed it stays off.
  • The Balloon is clickable
  • A small message on the basket.

The Code Blocks

Live Code - You can't see this

join us

CSS

<style type="text/css">

.qw-air-balloon {
    position: relative;
    padding-bottom: 100px;
    -webkit-animation: balloon 6s ease-in-out infinite;
    -moz-animation: balloon 6s ease-in-out infinite;
    -o-animation: balloon 6s ease-in-out infinite;
    animation: balloon 6s ease-in-out infinite;
}
.qw-air-balloon a {
    display: block;
}
.qw-air-balloon a span {
    z-index: 999;
    text-align: center;
    line-height: 54px;
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -42.5px;
    width: 85px;
    height: 54px;
    border-radius: 0 0 16px 16px;
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.6s;
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
}
.qw-air-balloon a:hover span {
    color: #ffca14;
}
.qw-air-balloon img {
    width: 100%;
}
.qw-air-balloon .ab-close {
    width: 30px;
    position: absolute;
    top: 25px;
    right: 40px;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="0")";
    filter: alpha(opacity= 0);
    opacity: 0;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}
/*.qw-air-balloon .ab-close:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
*/
.qw-air-balloon:hover .ab-close {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="100")";
    filter: alpha(opacity= 100);
    opacity: 1;
}
@-webkit-keyframes balloon {
    0%, 100%{ -webkit-transform:translateY(0);}
    30%{ -webkit-transform:translateY(-100px);}
    40%{ -webkit-transform:translateY(-95px);}
    50%{ -webkit-transform:translateY(-100px);}
    60%{ -webkit-transform:translateY(-95px);}
    70%{ -webkit-transform:translateY(-100px);}
    80%{ -webkit-transform:translateY(-95px);}
}
@-moz-keyframes balloon {
    0%, 100%{ -moz-transform:translateY(0);}
    30%{ -moz-transform:translateY(-100px);}
    40%{ -moz-transform:translateY(-95px);}
    50%{ -moz-transform:translateY(-100px);}
    60%{ -moz-transform:translateY(-95px);}
    70%{ -moz-transform:translateY(-100px);}
    80%{ -moz-transform:translateY(-95px);}
}
@-o-keyframes balloon {
    0%, 100%{ -o-transform:translateY(0);}
    30%{ -o-transform:translateY(-100px);}
    40%{ -o-transform:translateY(-95px);}
    50%{ -o-transform:translateY(-100px);}
    60%{ -o-transform:translateY(-95px);}
    70%{ -o-transform:translateY(-100px);}
    80%{ -o-transform:translateY(-95px);}
}
@keyframes balloon {
    0%, 100%{ transform:translateY(0);}
    30%{ transform:translateY(-100px);}
    40%{ transform:translateY(-95px);}
    50%{ transform:translateY(-100px);}
    60%{ transform:translateY(-95px);}
    70%{ transform:translateY(-100px);}
    80%{ transform:translateY(-95px);}
}


@media screen and (max-width: 1950px){

    .qw-air-balloon {
        max-width: 230px;
    }
    .qw-air-balloon a span {
        margin-left: -30.5px;
        width: 60px;
        height: 38px;
        line-height: 38px;
        border-radius: 0 0 10px 10px;
        font-size: 12px;
    }
    .qw-air-balloon .ab-close {
        width: 24px;
        top: 15px;
        right: 30px;
    }

}

@media screen and (max-width: 1280px){

    .qw-air-balloon .ab-close {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="100")";
        filter: alpha(opacity= 100);
        opacity: 1;
    }
    .qw-air-balloon .ab-close {
        width: 20px;
        top: 18px;
    }
}

@media screen and (max-width: 1024px){

    .qw-air-balloon {
        max-width: 200px;
    }
    .qw-air-balloon a span {
        margin-left: -26.5px;
        width: 52px;
        height: 33px;
        line-height: 33px;
        border-radius: 0 0 10px 10px;
        font-size: 11px;
    }
    .qw-air-balloon .ab-close {
        top: 10px;
    }
}

</style>

JS

<script src="/images/kb/2015/580/jquery.cookie.js"></script>

<script type="text/javascript">

    jQuery(document).ready(function(){

        jQuery(".qw-air-balloon-1 > .ab-close").click(function () {
            jQuery.cookie('ck-hide-bl-1', '1');
            jQuery(this).parent(".qw-air-balloon-1").hide();
        });

        if (jQuery.cookie('ck-hide-bl-1') != 1) {
            jQuery(".qw-air-balloon-1").removeClass("hide");
        }

    });

</script>

HTML

<div class="qw-air-balloon qw-air-balloon-1 hide">
    <a href="http://www.bbc.co.uk/" target="_blank">
        <img src="/images/kb/2015/580/hot-air-balloon.png" alt="" />
        <span>join us</span>
    </a>
    <div class="ab-close">
        <img src="/images/kb/2015/580/close.png" alt="" />
    </div>
</div>
<div class="clearbreak"></div>

What I used

Links

Balloon Tutorials

Single Balloons

Lists of Balloons

Read 2315 times Last modified on Sunday, 19 December 2021 08:27
Published in Packages
back to top