BETA

Harlem Shake στον browser σας

Εικόνα constantinos

Harlem Shake

Τελευταία υπάρχει μια μόδα που ονομάζεται Harlem Shake, όπου ένας τύπος ντυμένος παράξενα, αρχίζει να χορεύει μέσα σε ένα πλήθος και ξαφνικά όλοι ακολουθούν τον ρυθμό του.
Οκ, πρόκειται για μια χαζομάρα, δεν διαφωνούμε και γι' αυτό άλλωστε έχουν κυκλοφορήσει και ένα σωρό σατυρικές εκδοχές του. Εμείς λοιπόν, για να το ξεφτιλίσουμε ακόμα πιο πολύ, θα δούμε πως μπορούμε να κάνουμε τον browser μας να χορεύει Harlem Shake!

Πιο, πριν, αν δεν γνωρίζετε, πάρτε μια γεύση για το τι ακριβώς είναι:

Για να το δείτε στον browser σας, θα πρέπει να κάνετε τα παρακατω (δεν έχει σημασία, το λειτουργικό σύστημα που βρισκόσαστε):
Δείτε το osarena σε HarlemShake, ώστε να καταλάβετε.

-FIREFOX:

Πηγαίνετε σε μια σελίδα (πολύ καλά θα δείξει, αν κάνετε αναζήτηση στο Google serach, για εικόνες. Δεξί κλικ σε κάποιο σημείο στον browser σας και επιλεξτε:

Έλεγχος αντικειμένου (Inspect Element)

Θα σας ανοίξει ένα πεδίο, με τον κώδικα της σελιδας:

Inspect Element

Κάπου στο δεξί μέρος, έχει ένα κουμπάκι (καρτέλα): Console. Εκεί μέσα, κάντε επικόλληση, τον παρακατω κώδικα:

javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="
";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="https://dl.dropbox.com/u/57197495/harlem_shake.ogg";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

[box]Προσοχή, μην έχετε δυνατά την μουσική η τα ακουστικά και τρομάξετε[/box]

CHROME/CHROMIUM:

Ομοίως και εδώ, πηγαίνετε σε μια σελίδα (πχ Facebook) και επιλεξτε το ίδιο με το παραπάνω, δηλαδή:

Έλεγχος αντικειμένου (Inspect Element)

Στο παράθυρο που θα σας ανοίξει, επιλεξτε την καρτέλα: Console και εκεί μέσα κάντε επικόλληση τον παρακατω κώδικα:

javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="

If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.

";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

Το αποτέλεσμα θα είναι κάπως έτσι:

Αρκεί να κλείσετε αυτό το παραθυράκι και όλα θα επανέλθουν στο φυσιολογικό. Στην πολύ σπάνια περιπτωση που δεν γίνει, απλά σβήστε αυτόν τον κώδικα κάντε επανεκκίνηση στον browser σας.

[οι κώδικες υπάρχουν και εδώ]

  • Σχόλια

3 Comments:

  1. Εικόνα MinO
    MinOMar 06, 2013 01:37 ΠΜ

    Τα σπάει λέμε... :)

  2. Εικόνα troikas
    troikas (χωρίς επαλήθευση)Mar 06, 2013 03:15 ΠΜ

    Είχα την εντύπωση ότι έκανε πλάκα ο Constantinos ότι θα κάνει άρθρο άλλα τελικά το έκανε.
    Εμένα βγάζει λάθος: SyntaxError: illegal character :(

  3. Εικόνα maimunation
    maimunation (χωρίς επαλήθευση)Μάιος 17, 2013 08:49 ΠΜ

    Παιδιά, κάτι παίζει με τον κώδικα και λέει για σφάλμα σύνταξης. Εδώ είναι ένα καλό και ευκολο tutorial
    http://www.youtube.com/watch?v=tkYcI8EX7gA

Scroll to Top