The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Decorate your forum for Halloween

View previous topic View next topic Go down

Decorate your forum for Halloween

Post by Ange Tuteur on October 31st 2014, 8:14 pm

Happy Halloweeeen !!

To help decorate your forums for Halloween, the Forumotion team has put together a few spoooky decorations !

Installation


Administration Panel > Modules > JavaScript codes management make sure JavaScript code management is enabled and create a new script.

1. ) Insert the title of the script ( You can choose )
2. ) Choose the area you want the decoration to show ( All pages, homepage.. )
3. ) Paste the code into the textarea then submit





Scripts

Paste any of the scripts below into the textarea.



Scrolling spider :

Creep your members out with a terrifying spider that will come down from its web when you scroll. Clicking the spider will return it to the web.



Code:
$(function() {
  // Happy Halloween from Forumotion !
  var web = document.createElement('IMG'), spider = document.createElement('IMG'), actif = false, y_thn = window.pageYOffset;
  web.src = 'http://i39.servimg.com/u/f39/18/21/60/73/web110.png';
  spider.src = 'http://i39.servimg.com/u/f39/18/21/60/73/spider12.png';
  web.setAttribute('style','position:fixed;top:0;right:0;');
  spider.setAttribute('style','position:fixed;top:-485px;right:0;cursor:pointer;');
  document.body.appendChild(web);
  document.body.appendChild(spider);
  
  spider.onclick = function() {
    if (actif === true) return;
    actif = true;
    _spInt = window.setInterval(function() {
      if (getY(spider) <= -485) {
        if (getY(spider) < -485) spider.style.top = '-485px';
        window.clearInterval(_spInt);
        return actif = false;
      }
      spider.style.top = getY(spider) - 10 + 'px';
    },15);
  };
  window.onscroll = function() {
    if (actif === true) return;
    var y_now = window.pageYOffset;
    if (y_now > y_thn) {
      spider.style.top = getY(spider) + 15 + 'px';
      if (getY(spider) > 0) spider.style.top = 0;
      y_thn = y_now;
    }
    if (y_now < y_thn) {
      spider.style.top = getY(spider) - 15 + 'px';
      if (getY(spider) < -485) spider.style.top = '-485px';
      y_thn = y_now;
    }
  };
  function getY(el) { return Number(el.style.top.replace(/px/,'')) }
});



Running monsters :

Monsters associated with Halloween will occasionally try to spook you by running across the top of your screen. You can change the image URLs in the script to display different monsters, and adjust the speed at which they move.



Code:
Math.floor(Math.random() * 5) === 4 && $(function() {
  // Happy Halloween from Forumotion !
  // If you wish, you may change the images below
  var image1 = 'http://i41.servimg.com/u/f41/11/31/90/02/ghost10.png',
      image2 = 'http://i47.servimg.com/u/f47/15/17/71/53/vamp10.png',
      image3 = 'http://i45.servimg.com/u/f45/16/95/56/96/cheshi10.png',
      image4 = 'http://i45.servimg.com/u/f45/16/95/56/96/pumpki11.png',
      image5 = 'http://i45.servimg.com/u/f45/16/95/56/96/scream10.png',
      speed = 40, // speed at which the image moves

  i = document.createElement('IMG'), r = Math.floor(Math.random() * 5);
  if (r === 0) i.src = image1; if (r === 1) i.src = image2; if (r === 2) i.src = image3; if (r === 3) i.src = image4; if (r === 4) i.src = image5;
  i.setAttribute('style','position:fixed;left:0;top:0;width:30px;z-index:99999;');
  document.body.appendChild(i);
  window.setTimeout(function() {
    var c = 0;
    _intHW = window.setInterval(function() {
      if (c >= 105) {
        window.clearInterval(_intHW);
        return document.body.removeChild(i);
      }
      c += 1;
      i.style.left = Number(i.style.left.replace(/px|%/,'')) + 1 + '%';
    },speed);
  },2000);
});



Terrifyingly random cursor :

Monsters have taken over your cursor ! Your cursor will randomly change to different Halloween monsters when navigating your forum.



Code:
(function() {
  // Happy Halloween from Forumotion !
  // You may change the cursor images below
  var type = 'random',
      cursor1 = 'http://i39.servimg.com/u/f39/18/21/60/73/curseu10.png',
      cursor2 = 'http://i39.servimg.com/u/f39/18/21/60/73/curseu11.png',
      cursor3 = 'http://i39.servimg.com/u/f39/18/21/60/73/curseu12.png',
      cursor4 = 'http://i39.servimg.com/u/f39/18/21/60/73/curseu13.png',
      cursor5 = 'http://i39.servimg.com/u/f39/18/21/60/73/curseu14.png',
      r = Math.floor(Math.random()*5), t = type.toLowerCase();

      if (r === 0 && t === 'random' || t === 'cursor1') setCursor(cursor1);
      if (r === 1 && t === 'random' || t === 'cursor2') setCursor(cursor2);
      if (r === 2 && t === 'random' || t === 'cursor3') setCursor(cursor3);
      if (r === 3 && t === 'random' || t === 'cursor4') setCursor(cursor4);
      if (r === 4 && t === 'random' || t === 'cursor5') setCursor(cursor5);

  function setCursor(cursor) {
    var s = document.createElement('STYLE');
    s.type = 'text/css';
    s.innerHTML = 'body, *:hover {cursor:url('+cursor+'),auto !important}';
    document.head.appendChild(s);
  }
})();
Note : Internet Explorer does not support .png as a cursor. You will need to use .cur images.



Spooky Ghost :

Prepare to have your forum haunted by a ghost !! While browsing your forum there's a chance a ghost may jump out to scare you ! Clicking the ghost will banish it.

Evidence of the evil spirit below :


Code:
$(function() {
  // Happy Halloween from Forumotion !
  var ghost = document.createElement('IMG'), actif = false;
  ghost.src = 'http://i39.servimg.com/u/f39/18/21/60/73/ghost10.png';
  ghost.setAttribute('style','position:fixed;top:0%;left:0%;z-index:99999;display:none;');
  document.body.appendChild(ghost);
  
  ghost.onclick = function() { ghost.style.display = 'none' };
  window.setInterval('_spook_ghost()', 1000);
  _spook_ghost = function() {
    if (random(5) === 4 && actif === false) {
      actif = true;
      ghost.style.left = random(76) + '%';
      ghost.style.top = random(76) + '%';
      ghost.style.width = '48px';
      ghost.style.opacity = '1';
  ghost.style.display = '';
      _animation_ghost = window.setInterval(function() {
        if (Number(ghost.style.opacity) <= 0) {
          ghost.style.display = 'none';
          window.clearInterval(_animation_ghost);
          return actif = false;
        }
        ghost.style.width = Number(ghost.style.width.replace(/px/,'')) + 10 + 'px';
        ghost.style.opacity = Number(ghost.style.opacity) - 0.01;
      },1);
    }
  };
  function random(val) { return Math.floor(Math.random() * val) };
});



Skeleton lights :

Spruce up your homepage with some lights for Halloween. The skulls will light up and sway back and forth.



Code:
$(function() {
  // Happy Halloween from Forumotion !
  // If you wish, you may change the images below
  var lightOff = 'http://i39.servimg.com/u/f39/18/21/60/73/skull10.png',
      lightOn1 = 'http://i39.servimg.com/u/f39/18/21/60/73/skull_10.png',
      lightOn2 = 'http://i39.servimg.com/u/f39/18/21/60/73/skull_11.png',
  wire = document.createElement('IMG'), d = document.createElement('DIV'), lights = 0, rotate = 'positive', o = 0, o_thn = o, o_thn_reg = new RegExp('hallowLight-'+o), p = 0, p_thn = p, p_thn_reg = new RegExp('hallowLight-'+p);
  wire.src = 'http://i39.servimg.com/u/f39/18/21/60/73/wire10.png';
  wire.setAttribute('style','position:absolute;left:0;top:0;transform:rotate(0deg)');
  d.innerHTML = '<img src="'+lightOff+'"><img src="'+lightOn1+'"><img src="'+lightOn2+'">';
  d.style.display = 'none';
  document.body.appendChild(wire);
  document.body.appendChild(d);
  
  newLight(10,70), newLight(80,80), newLight(155,85), newLight(235,75), newLight(320,45), newLight(400,0);
  window.setInterval(function() {
    if (o === 6) o = 0;
    if (p === 6) p = 0;
    if (o_thn === 6) { o_thn = 0; o_thn_reg = new RegExp('hallowLight-'+o_thn); }
    if (p_thn === 6) { p_thn = 0; p_thn_reg = new RegExp('hallowLight-'+p_thn); }
    var img = document.getElementsByTagName('IMG'), light_o = new RegExp('hallowLight-'+o), light_p = new RegExp('hallowLight-'+p);
    for (i=0; i<img.length; i++) {
      if (p_thn != p && p_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        p_thn += 1;
        p_thn_reg = new RegExp('hallowLight-'+p_thn);
      }
      if (light_p.test(img[i].className)) {
        if (Math.abs(o - p) === 2 || Math.abs(o - p) === 3) {
          img[i].src = lightOn2;
          p += 1;
        }
      }
      if (o_thn != o && o_thn_reg.test(img[i].className)) {
        img[i].src = lightOff;
        o_thn += 1;
        o_thn_reg = new RegExp('hallowLight-'+o_thn);
      }
      if (light_o.test(img[i].className)) {
        img[i].src = lightOn1;
        o += 1;
      }
    }
  },750);
  
  window.setInterval(function() {
    var img = document.getElementsByTagName('IMG');
    for (i=0; i<img.length; i++) {
      if (/hallowLight/.test(img[i].className)) {
        var val = Number(img[i].style.transform.replace(/rotate\((-\d+|\d+)deg\)/,'$1'));
        if (val <= -10) rotate = 'positive';
        else if (val >= 10) rotate = 'negative';
        
        if (rotate === 'positive') {
          val += + 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
        if (rotate === 'negative') {
          val += - 1;
          img[i].style.transform = 'rotate('+val+'deg)';
        }
      }
    }
    if (document.body.style.marginTop != '145px') document.body.style.marginTop = '145px';
  },100);

  function newLight(x, y) {
    var l = document.createElement('IMG');
    l.src = lightOff;
    l.className = 'hallowLight-'+lights;
    l.setAttribute('style','position:absolute;left:'+x+'px;top:'+y+'px;');
    document.body.appendChild(l);
    lights += 1;
  }
});



Note : You can display more than one decoration script. If you have any problem please open a topic in the support section.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Decorate your forum for Halloween

Post by Kr0pr0X on February 5th 2015, 5:01 am

loved this thread, my forum worn this decorations on halloween!!! Very good

Kr0pr0X
New Member

Male Posts : 12
Reputation : 2
Language : English; Español; Deutsche
Location : behind my PC screen

http://malkavians-lunatics.forumotion.pro/

Back to top Go down

Re: Decorate your forum for Halloween

Post by Neno on February 5th 2015, 11:30 pm

Loaded it for this YEAR KOOL!

Neno
New Member

Posts : 24
Reputation : 1
Language : english

http://nenosplace.forumandco.com/forum.htm

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum