Websites für Geezers erstellen

Der folgende Beitrag ist ein Gastbeitrag von Michael Buchmiller und Mark Kearns. Als Michael das letzte Mal bei uns war, schrieb er über die Umsetzung einer verrückten Idee, Decoder-Brillen im Web zu verwenden. Jetzt ist Michael mit Mark (Hand Carved Graphics) zurück, um weitere unterhaltsame Ideen aus einem kürzlich von ihnen durchgeführten Projekt vorzustellen.

Lassen Sie mich gleich zu Beginn sagen, dass dies nicht der Artikel für Sie ist, wenn Sie nach praktischen Anwendungen von CSS suchen, die auf jede Website angewendet werden und die Benutzerfreundlichkeit verbessern könnten. Wenn Sie nach kreativen Code-Implementierungen für komödiantische Effekte und möglicherweise nach Inspiration für Ihr nächstes lächerliches Projekt suchen, dann sind Sie hier willkommen.

Wir haben kürzlich an einer Website für die Coverband Geezer gearbeitet (www.getoffofmylawn.com). Und ja, es ist eine Gruppe von Typen, die sich als alte Männer verkleiden, Werther's Originals verteilen und rocken, während sie Covers und Mash-ups von Songs von Weezer, Beastie Boys und vielen anderen spielen. Ich bin im Allgemeinen kein Fan von Coverbands, aber was sie tun, transzendiert das Genre, und für sie mache ich eine Ausnahme.

Sicher, sie brauchten eine Website, um ihre Konzerte und Neuigkeiten zu posten, aber mehr als das, sie wollten etwas, das ihre Art von Humor widerspiegelte und den Geist der Band einfing. Sie wollten etwas Übertriebenes. Und das haben sie bekommen. Neben der allgemeinen Ästhetik der Jahrhundertwende gab es drei besonders bemerkenswerte Funktionen, die wir hier behandeln werden

1. „Zum Anzeigen in Großdruck klicken“
2. Ihr stolpernder Tumblr-Link
3. (Mein persönlicher Favorit...) eine Seite mit unscharfem Text, genannt „Geezer-Vision“

Zum Anzeigen in Großdruck klicken

Sie wissen, wie manche Websites es Besuchern ermöglichen, die Größe des HTML-Textes des Körpers für eine bessere Benutzerfreundlichkeit zu steuern? Das ist es nicht. Stattdessen bläst das Klicken auf den Link den Haupttext aus komödiantischen Gründen wild auf.

Dies wurde durch jQuery-Onclick-Listener erreicht, die die Klasse des Elements und die Inline-CSS-Eigenschaften ändern.

$(".click-large-print, .decreaseFont").click(function() {
  var type= $(this).val();
  var curFontSize = $('.content').css('font-size');

  if ($(this).hasClass('click-large-print')) {
    $('.content').css('font-size', '2.8em');
    $('#click-large-print').text('Click to view in small print')
    $('#click-large-print').removeClass('click-large-print')
    $('#click-large-print').toggleClass('click-small-print')
  } else {
    $('.content').css('font-size', '0.8em');
    $('#click-large-print').text('Click to view in large print')
    $('#click-large-print').toggleClass('click-large-print')
  }

});

Die Klassen „click-large-print“ und „click-small-print“ sind leer und dienen nur als Identifikatoren für jQuery.

Keine weltbewegende Idee oder Implementierung, aber sie sorgt für Lacher. Außerdem wärmen wir uns gerade erst auf.

ICH BIN GESTOLPERT UND KANN NICHT AUFSTEHEN

Wenn Sie in den letzten 30 Jahren Fernsehen geschaut haben, sind Sie wahrscheinlich mit den allgegenwärtigen Werbespots für medizinische Notrufsysteme vertraut, die sich an Senioren richten, und mit Frau Fletchers Ausspruch: „Ich bin hingefallen und kann nicht aufstehen.“ Falls Sie das nicht kennen, schadet es nicht, einen kurzen Blick auf den klassischen Spot zu werfen.

Die schauspielerischen Nachstellungen in schlechtem Stil kombiniert mit der unvorstellbaren Sendezeit haben den Slogan in unser kollektives Gedächtnis eingebrannt.

Es gab nie eine Frage, ob wir dies irgendwie in die Website einbauen würden, sondern nur, wie wir es tun würden. Wir diskutierten über ein Foto eines gestürzten Senioren im Hover-Zustand, aber das schien zu erwartet. Also haben wir die Idee mit einem Link zum passend benannten Tumblr gemischt. Wenn Sie auf das Tumblr-Symbol klicken, dreht sich die gesamte Website mit CSS-Transform-Eigenschaften um 90 Grad und „fällt“ um. Es gibt eine leichte Verzögerung, bevor der Besucher zur Tumblr-Seite der Band mit dem Titel „I've Tumbld and I Can't Get Up“ weitergeleitet wird.

var tumblrbutton = document.getElementById('tumblr-button');
  tumblrbutton.addEventListener('click', function() {

  // Apply the "rotate" class to the body
  $("body").toggleClass("rotate");

  // This delays opening the Tumblr link for 1.5 seconds
  setTimeout(function() {
    window.location.href = "http://www.username.tumblr.com";
  }, 1500); 

}, false);

body {
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

body.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Der Code, um eine Website zu drehen, ist nichts Neues, aber dies ist das erste Mal, dass ich einen lohnenswerten Grund dafür gefunden habe. Um sicherzustellen, dass das Symbol nicht unbemerkt blieb, haben wir dem GIF eine kleine Animation hinzugefügt, um Aufmerksamkeit zu erregen.

Nebenbei bemerkt: Ja, die Band hat diesen Link an die Leute von Tumblr geschickt, und ja, sie fanden es urkomisch.

Gib mir meine Lesebrille, Sonny

Vor einiger Zeit schrieb ich einen Artikel für CSS-Tricks.com, in dem ich erklärte, wie ich AnythingZoomer umfunktioniert hatte, um als Satz von Retro-Decoder-Brillen zu fungieren, anstatt als Möglichkeit, ein Foto zu vergrößern. Während wir an der Geezer-Website arbeiteten, schwirrte das immer noch in meinen Gedanken herum. Das Konzept dafür war dieses Mal, die Geschichtsseite mit unscharfem Text zu füllen, und die Besucher müssten virtuelle Lesebrillen verwenden, um etwas erkennen zu können.

Sehen Sie es in Aktion unter http://getoffofmylawn.com/pages/history.

Unscharfer Text

Der erste Schritt war herauszufinden, wie man HTML-Text unscharf erscheinen lässt. Dies wurde mit einem CSS-Textschatten erreicht, aber anstatt den Schatten schwarz und versetzt zu machen, ist er in einer Farbe sehr nahe an der Textfarbe und direkt dahinter, was ihm eine Art Glühen verleiht.

.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}

Wird meine Sehkraft schlechter? Sie wird immer unschärfer.

Wir haben das zum Laufen gebracht, aber als wir damit herumgespielt haben, dachten wir... wissen Sie, was das lustiger machen würde? Wenn der Text auf der Seite langsam immer unschärfer wird. Grausam und im Stil von Kaufman? Zweifellos. Aber für Geezers Zielgruppe dachten wir, sie würden den Gag zu schätzen wissen. Das haben wir mit weiteren CSS-Transform-Eigenschaften erreicht, die von jQuery ausgelöst werden.

// Change the class to the final blur state to initiate the transition
$(".small p").toggleClass("active");

./* Default class pre-blur within CSS transition properties */
.small p { 
  -webkit-transition:color 9s ease-in, text-shadow 9s ease-in;
  -moz-transition:color 9s ease-in, text-shadow 9s ease-in;
  -o-transition:color 9s ease-in, text-shadow 9s ease-in;
  -ms-transition:color 9s ease-in, text-shadow 9s ease-in;
  transition:color 9s ease-in, text-shadow 9s ease-in; 
  font-size: 16px;
  width: 630px;
  color: #af9572;
  text-shadow: 0 0 1px #4d250f;
}

/* Final class with full blur */
.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}

Alles mit AnythingZoomer zusammenbinden

Nachdem der Text nun vollständig unlesbar ist, haben wir AnythingZoomer als Lesebrille verwendet, um die scharfe Version des Textes anzuzeigen. Es wurde entwickelt, um kleinen Text mit vergrößertem, großem Text zu transformieren, wenn Sie mit der Maus darüber fahren, und funktioniert sowohl mit Bildern (wie im Decoder-Brillen-Projekt) als auch mit HTML-Text. Anstatt von klein zu groß zu gehen, gehen wir hier von unscharf zu scharf.

<script src="/js/jquery.anythingzoomer.min.js"></script>
<script> 
  var zoomertimer;
  $(document).ready(function() {

    // timer to delay the start of the blur effect
    setTimeout(function() {
      $(".small p").toggleClass("active");
    }, 10000);

    // timer and function to delay anythingZoomer from cloning the zoom area BEFORE the full blur is reached but allow for mouse-over override
    zoomertimer = setTimeout(function() { zoomer(); }, 24000);
    $(document).one('mouseenter mouseleave', "#zoom", function() { 
      if (zoomertimer) {
        zoomer();
        clearTimeout(zoomertimer);
        zoomertimer = null;
      }
    });
  });

  function zoomer() { 
    $("#zoom").anythingZoomer({
      clone: true
    }); 
  }
</script>

/* Default class pre-blur within CSS transition properties */
.small p { 
  -webkit-transition: color 9s ease-in, text-shadow 9s ease-in;
  -moz-transition: color 9s ease-in, text-shadow 9s ease-in;
  -o-transition: color 9s ease-in, text-shadow 9s ease-in;
  -ms-transition: color 9s ease-in, text-shadow 9s ease-in;
  transition: color 9s ease-in, text-shadow 9s ease-in; 
  font-size: 16px;
  width: 630px;
  color: #af9572;
  text-shadow: 0 0 1px #4d250f;
}

/* Final class with full blur */
.small p.active {
  color: #bca47f;
  text-shadow: 0 0 6px #4d250f;
}
.zoom { display: block; margin: 0 auto; }
.large p { font-size: 16px; width: 630px; }
.large { margin-top: 75px; margin-left: 175px; }

Wir testen bereits die Geduld der Besucher mit dieser Seite, so wie sie ist. Deshalb haben wir dafür gesorgt, dass diese Instanz von AnythingZoomer die Breite unseres Inhalts abdeckt, um es einfach zu machen, die Seite zu überfliegen, ohne zu viel mit der Maus hin und her fahren zu müssen, um den Text zu entschlüsseln.

Andere Implementierungsideen

Haben Sie kein Projekt, bei dem Sie absichtlich unscharfen Text leicht lesbar machen müssen? Wer hat das schon? Aber nicht alles ist verloren. Wenn Sie das Konzept nehmen und es auf verschiedene Weise anwenden, finden Sie möglicherweise einige andere unterhaltsame Anwendungen.

Archäologen, grabt ihr?

Was wäre, wenn der Text zunächst nicht unscharf wäre, sondern in einer fremden Schriftart gerendert würde? Benutzer könnten ägyptische Hieroglyphen übersetzen, indem sie einfach mit der Maus darüber fahren.

Verschwörungstheoretiker, vereinigt euch

Wenn der anfängliche Textzustand die gleiche Farbe wie der Hintergrund der Seite hätte, könnte er unsichtbar sein, bis Sie mit der Maus darüber fahren, um eine geheime Nachricht zu enthüllen.

Danke, dass Sie darüber gelesen haben, wie wir eine Website für Geezers erstellt haben!