ぶるぶるコード
このサイトが生まれる切っかけとなったVIPの企画にて、企画に参加しているサイトで共通のテーマを決めて、今日21時頃に同時更新しようという催しを行うので自分も参加させていただこう。
タイトルの通りテーマは「コード」。しかし「コード」といってもかなり幅広い意味を持つ言葉なのです。電線のことだったり暗号のことだったり音楽のコードのことだったり、同音異義語が多すぎる。
今回のテーマはどんな解釈でも自由らしいけど、コンピュータのコードがやはり最もテキストサイトらしいのでは。別のコードの話をしてもいいけど、今回は初参加だし直球でいってみる。
コンピュータのコードといってもこれまた色々あるわけです。しかし直球でいくならHTML、CSS、JavaScriptあたりの話題がベターなはず。
で、今回は当サイトで使っているJavaScriptのコードを取りあげてみる。
window.onload = function() {
var be = document.getElementsByTagName('h1')[0].getElementsByTagName('a')[0],
bes = be.style,
bh;
be.onmouseover = function() {
bh = setInterval(function() {
bes.top = Math.random() * 2 - 1 + 'px';
bes.left = Math.random() * 6 - 3 + 'px';
}, 64);
}
be.onmouseout = function() {
clearInterval(bh);
bes.top = '0';
bes.left = '0';
}
}
このコードは当サイトのアイデンティティであるぶるぶるな機能を実装できる!!!
実はぶるぶるノート公開当初にこんなWebメッセを頂いた。
タイトルにマウス乗せるとぶるぶるするなんて…。ぶるぶる
そう、察しのいい方は既に気づいている。サイトの最上部にある「ぶるぶるノート」という文字にカーソルを乗せると文字がぶるぶる震えることに。その機能を実現しているのが上記のコードである!
2行目の「document.getElementsByTagName('h1')[0].getElementsByTagName('a')[0]
」の部分で、ぶるぶるさせたいHTML要素を取得している。つまり、この部分を変更すれば別の部分をぶるぶるさせることも可能。
手軽な方法は、ぶるぶるさせたい要素にid名を付けて、「document.getElementById('id名')
」ってな感じで取得する方法でしょう。
注意点なのが、ぶるぶるさせたい要素にはCSSで「position: relative;
」というプロパティを指定しておかなければいけないということです。
具体的な使用例を挙げるとこんな感じ↓
<html>
<head>
<style type="text/css">
#blublu { position: relative; }
</style>
<script type="text/javascript">
window.onload = function() {
var be = document.getElementById('blublu'),
bes = be.style,
bh;
be.onmouseover = function() {
bh = setInterval(function() {
bes.top = Math.random() * 2 - 1 + 'px';
bes.left = Math.random() * 6 - 3 + 'px';
}, 64);
}
be.onmouseout = function() {
clearInterval(bh);
bes.top = '0';
bes.left = '0';
}
}
</script>
</head>
<body>
<p><img src="hoge.png" id="blublu"></p>
</body>
</html>
こうすることで、「hoge.png」という画像の上へカーソルを乗せるとぶるぶるさせることができます! 実際に画像をぶるぶるさせてみたのがこちら。
もともと当サイトのタイトルをぶるぶるさせるためだけに書いたので融通のきくコードではありません。
それでも自分もぶるぶるさせてみたいという方は、好きに改造でもなんでもして使っちゃってください!
……え、そんな物好きいない?