☰

Scratch Userscript

Changes the background to a cool pattern, has a parallax effect on the background, adds a border to the forum (so text is visible against the background), scrolling more than 600px will make page content rotate in 3d, and transitions out on page unloads.

Version au 01/10/2014. Voir la dernière version.

// ==UserScript==
// @name         Scratch Userscript
// @namespace    http://scratch.mit.edu/discuss/topic/54714/
// @version      0.1
// @description  Changes the background to a cool pattern, has a parallax effect on the background, adds a border to the forum (so text is visible against the background), scrolling more than 600px will make page content rotate in 3d, and transitions out on page unloads.
// @author       MegaApuTurkUltra
// @match        http://scratch.mit.edu/*
// @grant        none
// ==/UserScript==

$(document).ready(function(){
$("#pagewrapper").css({'background':'url(http://i.imgur.com/ra8F49A.jpg)',"background-size":"100% auto","background-repeat": "repeat-y"}).css('perspective', '800px');
$("#content").css({'transform-style': 'preserve-3d', 'transition': 'transform 0.5s', 'backface-visibility': 'hidden'});
$("#topnav").css("z-index", "9999999");
$("#djangobbindex").css({'background':'rgba(255, 255, 255, 0.8)', 'padding':'10px', 'border-radius':'10px'});

var t, l = (new Date()).getTime(), scrolling = false;
initialAmt = 0;
$(window).scroll(function(){
    $("#pagewrapper").css('background-position-y', ($(document).scrollTop()*10/11)+'px');
    $("#content").css('transform-origin', (($(document).width()/2))+"px "+($(document).scrollTop()+$(window).height()/2)+"px");
    diff = Math.abs($(document).scrollTop()-initialAmt);
    if(diff>600)$("#content").css('transform', 'rotateX(-5deg) translateZ(-50px) translateY(50px)');
    var now = (new Date()).getTime();
    if(now - l > 400 && !scrolling ){
        $(this).trigger('scrollStart');
        l = now;
    }
    clearTimeout(t);
    t = setTimeout(function(){
        if (scrolling)
            $(window).trigger('scrollEnd');
    }, 300);
});

$(window).bind('scrollStart', function(){
    scrolling = true;
    initialAmt = $(document).scrollTop();
});

$(window).bind('scrollEnd', function(){
    scrolling = false;
    initialAmt = $(document).scrollTop();
    $("#content").css('transform', 'none');
});
window.onbeforeunload=function(){
   $("#content").css('transform', 'translateZ(-50px)').animate({'opacity':'0'}, 700);
};
});