ラブドールの写真を上下運動させたい。…させたくない?
こちらにご用意致しましたのはどこのご家庭にでもある普通のダブルピース写真でございます。
ぼくはこの写真だけでもご飯3杯イケるくらいアニメヘッドが大好物ですが、最近ハマっているモン娘TDXというソシャゲで、エロシーンがLive2Dで動くのを見た時ですね、
あのパラパラ漫画とはちょっと違ったぬるぬる感、とでも言うんですか?
それに……なんていうか……その…下品なんですが…フフ……勃起……しちゃいましてね………
ドール写真もぬるぬる動かしたいなぁ…なんて思ったんですよ。
お手軽にCSSで上下運動させてみた
CSS、いわゆるスタイルシートは普通のブログサービスでも普通に使える書式なので、ご存知のブロガーさんも多いかと思われます。文字に色付けたり、大きさ変えたり。
具体的には↓こんなふうにHTMLを書けば写真を上下にアニメーションさせることができます。プログラムなんて必要ありません。
興味のある方は上のコードをブログ記事に貼り付けてご自由にお使いください。
([ラブドールの写真.jpg]と書いてあるところをご自分の写真のURLへ変更するだけです)
これでも十分面白いっちゃ面白いのだけれど、もう少し臨場感がほしくない? ほしいよね?
上下をカットしてみる
写真(imgタグ)をdivタグで囲って写真を枠の中に閉じ込める感じにしてみます。
おおっ!上下カットするだけでもだいぶソレっぽくなってきました。固定枠を作ってその中に写真を閉じ込めただけなのに、画面のむこう側で上下運動しているように見えてくるから不思議です。
もうちょい本気出してみる
ここまできたら、もう少し実用性(意味深)がほしいところ。JavaScriptを使って、ランダムに擬音を配置してみます。
位置調整:
[ファイルの選択]ボタンからご自分がお持ちの写真と入れ替えることも可能です。選んだ写真はどこかへ送信されたりアップロードされることはなく、すべてはブラウザの中だけで動作しているのでご安心ください。
ただ、人物以外を動かすとすごく笑えるので、爆笑しても大丈夫な場所で試しましょう。ね?約束だよ。
素材について
擬音のフリー素材を探したのだけれど、クチュ音的なのが見つからなかったので、「はらませにゃんこ」という素敵すぎる名前のフリーフォントを使って作成しました。
尚、以前ゆれゆれボイス作ったときに購入した音声素材があるので、これ使って音も入れちゃうか!と思ったんですが、ぱんぱん!とかのクチュ音は入ってなかったので断念しました。
なんか、そのままズバリなネーミングの「クチュ音」って素材が110円で売ってるんですが………
カートに入れたところで、「いや待て。ぼくはいったいどこへ向かっているのだ。」と我に返って踏みとどまりました。
ホントにぼくはいったいなにをしているんだ















