为老家伙打造网站

以下是 Michael Buchmiller 和 Mark Kearns 的客座文章。上次我们邀请 Michael 撰写文章时，他写了关于他执行的一个疯狂想法，即 在网络上使用解码眼镜。现在，Michael 和 Mark（Hand Carved Graphics）一起回来，分享他们最近完成的一个项目中的一些更有趣的想法。

首先我要说的是，如果您正在寻找适用于任何网站并能提高可用性的 CSS 实用应用，那么这篇文章不适合您。如果您正在寻找创意的代码实现以达到喜剧效果，并可能为您的下一个荒谬项目提供灵感，那么欢迎。

我们最近为翻唱乐队 Geezer 制作了一个网站（www.getoffofmylawn.com）。是的，这是一群装扮成老人的家伙，他们分发 Werther's Originals 糖果，并在演奏 Weezer、Beastie Boys 和许多其他乐队的翻唱和混音歌曲时摇动麦克风。我通常不喜欢翻唱乐队，但他们的表演超越了流派，我愿意为他们破例。

当然，他们需要一个网站来发布他们的演唱会和新闻，但更重要的是，他们想要一些反映他们幽默品牌并捕捉乐队精神的东西。他们想要一些夸张的东西。而他们如愿以偿。除了总体上世纪初的美学风格外，这里还有三个值得注意的特色我们将在这里介绍。

1. “点击查看大号字体”
2. 他们翻滚的 Tumblr 链接
3. （我个人最喜欢的……）一个名为“Geezer-Vision”的模糊文本页面

点击查看大号字体

您知道有些网站允许访问者控制主体 HTML 文本的大小以提高可用性吗？这与之不同。相反，点击链接会将正文内容夸大到不成比例，以达到喜剧效果。

它是使用 jQuery onclick 监听器实现的，这些监听器更改元素的类和内联 CSS 属性。

$(".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')
  }

});

“click-large-print”和“click-small-print”类为空，仅作为 jQuery 的标识符。

这不是一个惊天动地的想法或实现，但它很有趣。另外，我们才刚刚开始热身。

我摔倒了，起不来了

如果您在过去 30 年中的某个时候看过电视，那么您很有可能熟悉针对老年人和弗莱彻太太的流行医疗警报服务广告，以及她的口号“我摔倒了，起不来了”。如果您碰巧不知道，快速浏览一下经典广告并不会有什么坏处。

拙劣的重演加上难以想象的播出时间，将这句口号深深地烙印在我们集体的记忆中。

我们是否会尝试以某种方式将它融入网站，这从来都不是问题，而是我们该如何做到这一点。我们讨论过是否要使用老年人摔倒的照片作为悬停状态，但这似乎太常见了。因此，我们将其与一个名为 Tumblr 的链接的想法混合在一起。当您点击 Tumblr 图标时，整个网站会使用 CSS Transform 属性旋转 90 度并“翻倒”。在访问者被重定向到乐队的名为“我摔倒了，起不来了”的 Tumblr 页面之前，会有一段短暂的延迟。

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);
}

使网站旋转的代码并不是什么新鲜事物，但这是我第一次找到一个值得使用它的理由。为了确保图标不会被忽视，我们在 GIF 中添加了一些动画以吸引一些注意力。

顺便说一句，是的，乐队已将此链接发送给 Tumblr 的工作人员，是的，他们确实觉得它很有趣。

递给我我的老花镜，小子

前段时间，我在 CSS-Tricks.com 上发表了一篇文章，解释了我如何重新利用 AnythingZoomer 作为一套 复古解码眼镜，而不是作为放大照片的方法。当我们在制作 Geezer 网站时，它仍然在我的脑海中挥之不去。这次的想法是在 历史页面 上填充模糊文本，访问者必须使用虚拟老花镜才能看清任何内容。

请在 http://getoffofmylawn.com/pages/history 上查看其运行效果。

模糊文本

第一步是弄清楚如何使 HTML 文本看起来模糊。这是通过 CSS 文本阴影实现的，但它不是使阴影变黑并偏移，而是使用非常接近文本颜色的颜色并将其置于文本后面，从而使其产生一种发光效果。

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

我的视力下降了吗？越来越模糊了。

我们实现了这一点，但在我们玩弄它的过程中，我们想……你知道什么会让它更有趣吗？如果文本在您位于页面上的时候慢慢变得越来越模糊。残忍且卡夫曼式？毫无疑问。但对于 Geezer 的目标受众，我们认为他们会欣赏这个恶作剧。我们使用 jQuery 触发的更多 CSS Transform 属性实现了这一点。

// 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;
}

使用 AnythingZoomer 将所有内容整合在一起

现在文本完全无法阅读，我们使用 AnythingZoomer 充当一副老花镜，并显示文本的清晰版本。它旨在将您悬停在其上的小文本转换为放大的大文本，并且适用于图像（如解码眼镜项目）和 HTML 文本。在这里，我们不是从小变大，而是从模糊变清晰。

<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; }

这个页面已经足够考验访问者的耐心了，因此我们确保此 AnythingZoomer 实例跨越我们内容的宽度，以便轻松地向下扫描页面，而无需用鼠标来回移动太多来解读文本。

其他实现思路

没有需要使故意模糊的文本易于阅读的项目？谁会有呢？但并非一无是处。如果您采用这个概念并以不同的方式应用它，您也许可以找到一些其他有趣的应用。

考古学家，你挖吗？

如果文本最初不是模糊的，而是以某种外语字体呈现会怎么样？您可以让用户只需将鼠标悬停在上面即可翻译古埃及文字。

阴谋论者联合起来

如果初始文本状态设置为与页面背景相同的颜色，则它在您将鼠标悬停在其上以显示秘密消息之前将是不可见的。

感谢您阅读我们如何为 Geezer 制作网站的文章！