Script integration

Hello everyone,

I found a lovely script that would fit my upcoming forum, but I cannot really make it work.
It's supposed to be like this. :S
I managed to make it appear somehow, but I'd like to place the color changer part to the banner place (yellow part). I suppose the ".branding" thing should be added somewhere... but where?
And last but not least the balloons don't want to fly. But I'd like them to fly. Any tips to make them move?  
Could anyone help me, please?

punbb http://graphicballoon.huhohi.com/


Edit: After logging out they cannor be seen, but they are there when I'm logged in. :O

Did you use the same code from what the creator of the script used?

Well... yes.  
It was divided nicely so I just put them to their places.
CSS to CSS
HTML to overall_header
JS - JS on the homepage

The wrong appear is due to the wrong placing in the HTML I assume. Let's say, I can solve that somehow... maybe.  But I don't understand why the script is not working properly, so why the balloons don't fly. 

Can you please post the codes here?

Hi @Mimóza,

Try pasting the following HTML in the area you want the balloons to show up :

Code:

<style>@import url(http://fonts.googleapis.com/css?family=Raleway);.balloon,.balloon:active{cursor:crosshair}.intro{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:-ms-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;-webkit-align-items:center;-ms-align-items:center;align-items:center;background:#ebebec}.balloon{position:absolute;bottom:-5%;opacity:.9;border-radius:50%;width:18px;height:25px;z-index:2}.balloon:after{position:relative;background:inherit;top:18px;left:8px;display:block;content:'';height:.6rem;width:.2rem;border-radius:100%}.balloon:hover{font-size:2.1em;opacity:.7}.balloon:nth-child(1){background:#ebff14;bottom:55%;left:50%;-webkit-animation:once-a 8s 1 ease-in forwards;animation:once-a 8s 1 ease-in forwards}@-webkit-keyframes once-a{0%{bottom:55%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}@keyframes once-a{0%{bottom:55%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}.balloon:nth-child(2){background:#2714ff;bottom:35%;left:20%;-webkit-animation:once-b 8s 1 ease-in forwards;animation:once-b 8s 1 ease-in forwards}@-webkit-keyframes once-b{0%{bottom:35%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}@keyframes once-b{0%{bottom:35%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}.balloon:nth-child(3){background:#bd60ff;bottom:15%;left:30%;-webkit-animation:once-c 11s 1 ease-in forwards;animation:once-c 11s 1 ease-in forwards}@-webkit-keyframes once-c{0%{bottom:15%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-c{0%{bottom:15%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(4){background:#ff2714;bottom:5%;left:55%;-webkit-animation:once-d 14s 1 ease-in forwards;animation:once-d 14s 1 ease-in forwards}@-webkit-keyframes once-d{0%{bottom:5%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-d{0%{bottom:5%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(5){background:#14ebff;bottom:10%;left:75%;-webkit-animation:once-e 10s 1 ease-in forwards;animation:once-e 10s 1 ease-in forwards}@-webkit-keyframes once-e{0%{bottom:10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-e{0%{bottom:10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(6){background:#ff8abb;bottom:-10%;left:45%;-webkit-animation:balloon 13s 2s infinite ease-in;animation:balloon 13s 2s infinite ease-in}@-webkit-keyframes balloon{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}@keyframes balloon{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}.balloon:nth-child(7){background:#ffab35;bottom:-10%;left:20%;-webkit-animation:balloon2 15s 3.2s infinite ease-in;animation:balloon2 15s 3.2s infinite ease-in}@-webkit-keyframes balloon2{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}@keyframes balloon2{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}.balloon:nth-child(8){background:#2714ff;bottom:-10%;left:75%;-webkit-animation:balloon3 19s 10s infinite ease-in;animation:balloon3 19s 10s infinite ease-in}@-webkit-keyframes balloon3{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes balloon3{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(9){background:#ebff14;bottom:-10%;left:55%;-webkit-animation:balloon4 12s 6s infinite ease-in;animation:balloon4 12s 6s infinite ease-in}@-webkit-keyframes balloon4{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes balloon4{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(10){bacground:#bd60ff;bottom:-10%;left:65%;-webkit-animation:balloon4 12s 10s infinite ease-in;animation:balloon4 12s 10s infinite ease-in}.balloon:nth-child(11){background:#14bd22;bottom:-10%;left:85%;-webkit-animation:balloon2 12s 4s infinite ease-in;animation:balloon2 12s 4s infinite ease-in}.balloon:nth-child(12){background:#14ebff;bottom:-10%;left:10%;-webkit-animation:balloon3 14s 7s infinite ease-in;animation:balloon3 14s 7s infinite ease-in}.balloon:nth-child(13){background:#ff2714;bottom:-10%;left:30%;-webkit-animation:balloon 13s 10.5s infinite ease-in;animation:balloon 13s 10.5s infinite ease-in}.fade{opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}</style>

<section class="intro" id="intro">
    <section class="balloons-conatiner" id="balloons-container">
        <div class="balloon yellow" ></div>
        <div class="balloon blue"  ></div>
        <div class="balloon purple" ></div>
        <div class="balloon red"    ></div>
        <div class="balloon cyan"  ></div>
        <!-- infinite-->
        <div class="balloon pink"  ></div>
        <div class="balloon orange" ></div>
        <div class="balloon blue"  ></div>
        <div class="balloon yellow" ></div>
        <div class="balloon purple" ></div>
        <div class="balloon green"  ></div>           
        <div class="balloon cyan"  ></div>
        <div class="balloon red"    ></div>
    </section>
</section>

<script>function pop(n){var o=n.target;o.classList.contains("yellow")?intro.style.background="rgb(235,255,20)":o.classList.contains("blue")?intro.style.background="rgb(39,20,255)":o.classList.contains("purple")?intro.style.background="rgb(189,96,255)":o.classList.contains("red")?intro.style.background="rgb(255,39,20)":o.classList.contains("cyan")?intro.style.background="rgb(20,235,255)":o.classList.contains("pink")?intro.style.background="rgb(255,138,187)":o.classList.contains("green")?intro.style.background="rgb(20,189,34)":o.classList.contains("orange")&&(intro.style.background="rgb(255,171,53)"),o.style.display="none",n.preventDefault(),n.stopPropagation()}for(var balloonsContainer=document.getElementById("balloons-container"),balloons=balloonsContainer.childNodes,i=0;i<balloons.length;i++){var balloon=balloons[i];balloon.addEventListener("click",pop,!1)}</script>

Some small adjustments might need to be made to fix the content size. By default the container is positioned fixed, but I changed it to an absolute position. So, let me know where you place it, because you'll need to set the parent container to

Code: position:relative;

. If any problems arise, such as overlapping, try placing the HTML that's being overlapped before the last closing

Code: </section>

tag.

If you need any help let me know.

Forumedic, I put the exact same codes you can see in Editor mode on the page I linked in my first post.

But now changed the HTML to what @Ange Tuteur gave me. Thank you so much!
It is working great now!!!  But... as the code colors the background, the default yellow background color and image are gone. I assume it is because the balloon code overwrites the basic settings? How could it be corrected? Adding a new class or id to the ballon? Or?  Could you help me, please? 

Hi again,

Try adding this CSS to your stylesheet :

Code:

#branding #intro {
  background-color:#FFDF50;
  background-image:url(http://i1370.photobucket.com/albums/ag257/AppleDrink/aimforthesky.png) !important;
  background-position:bottom center !important;
  background-repeat:no-repeat !important;
  overflow:hidden;
}

I took the default background attributes from your guest message and made all of them important, except for the background color ( because it changes by the balloons ). I also hid the overflow because I noticed some of the balloons were exiting their parent container.

More than perfect! Thank you very much!!! Have a great day!!

You're welcome ! ^^

Topic archived

Have a good weekend.