インターネットは皆の物だから、自分のブログを好きな見た目にするのも、他人のブログを好きな見た目で読むのも、勝手にできていいはずだと思う。俺たちのインターネットを取り戻したい。
ブログの背景,ぐにゃぐにゃ動くようにした.パーリンノイズっていうのを使うとぐにゃぐにゃ動かせておもしろい.アカデミー科学技術賞狙える勢いでぐにゃぐにゃ動く.
/* * はてなブログの背景を記事内の画像にしてぐにゃぐにゃさせる 背景がぐにゃぐにゃになります ** 使い方 以下をコピーして 詳細設定→head要素に貼り付け <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://hitode909.github.io/hatenablog-unofficial-modules/haikei-gunyagunya.js"></script> perlin noiseの生成に https://github.com/josephg/noisejs を使っています */
$(function () { var check = function () { var src = $('.entry-content img:visible:first').attr('src'); if (!src) return false; $('body').css('background', 'url(' + src + ')'); return true; }; if (!check()) { var timer = setInterval(function () { if (check()) { clearInterval(timer); } }, 1000); } var $style = $('<style>'); $style.html([ '#container-inner, .entry-list {', 'background: rgba(255, 255, 255, 0.9);', '}', 'body {', 'transition: background-position 0.2s ease-in-out 0, background-size 0.2s ease-in-out 0;', '}' ].join("\n")); $('body').append($style); }); noise.seed(Math.random()); var count = 0.0; var role = function () { $('body').css('background-position', '' + noise.perlin2(count, count * 2) * 100 + 'px ' + noise.perlin2(count * 2, count * 3) * 100 + 'px'); $('body').css('background-size', '' + ((noise.perlin2(count / 2.0, count) * 250) + 260) + 'px ' + ((noise.perlin2(count / 3.0, count / 2.0) * 250) + 260) + 'px'); count += 0.05; }; role(); setInterval(role, 100);
This is a simple library for 2d & 3d perlin noise and simplex noise in javascript. Noise is pretty.
noise.seed(Math.random()); for (var x = 0; x < canvas.width; x++) { for (var y = 0; y < canvas.height; y++) { // noise.simplex2 and noise.perlin2 return values between -1 and 1. var value = noise.simplex2(x / 100, y / 100); image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas. } }
- http://let.hatelabo.jp/taizooo/let/hLHVusHb4vcF ( fork from http://let.hatelabo.jp/furyu-tei/let/hLHVt4H41cYI )
/* * @title hitodenize vakzine * @description パーリンノイズでぐにゃぐにゃしている背景(http://hitode909.hatenablog.com/entry/2014/04/23/203032)をとりあえず落ち着かせる ( fork from http://let.hatelabo.jp/furyu-tei/let/hLHVt4H41cYI ) * @include http://*.hatenablog.com/* * @license MIT License * @javascript_url */ // https://twitter.com/furyutei/status/463979473772085248 (function (w, d) { w.$ = w.jQuery = function (f) { f = function () {}; f.css = f.each = f; return f } })(window, document)
w.$ = w.jQuery = function (f) { f = function () {}; f.css = f.each = f; return f } これが何をしているのかわからない。
背景動かすのに使っているjQueryの関数を無効化しています(実はその部分だけでも背景は止まります)。単にdiv#containerの背景で上書きしただけだと、100ms毎に背景を動かす処理が走って重いので。