DESIGN

I'm not deceived Diving Designer !

> >

1000" class="post-1000 post type-post status-publish format-standard has-post-thumbnail hentry category-web category-design"
jquery_tmn

2014/

7

17

Thu

左から右へ雲とかの画像がループして流れていく方法

ループさせる画像の作り方とHTML・JAVA・CSSのソース付き(あと紅ショウガも)

このエントリーをはてなブックマークに追加

ヒサカワダヨー! ということで。
 
今回は、PC版のうちのブログのヘッダに流れている、ループする流れる雲のようなものを作っていきましょう。
デモとかいりませんね。この画面の上のほうにあるやつです。

ループさせる画像を作ろう~能書き編

さて、まずは「ループさせる雲の画像そのもの」の作り方ですね。
雲でなければ簡単なんですよ。レンガとか、銀河とか、TENGAとかなら。
 
しかし雲の場合、雲と雲の重なる部分が途切れてしまう。
背景画像を作るときを思い出してみてください。
ループさせた時に境目が発生してしまうので、これは多少の小細工をしなければなりませんね。
 

成功させるためには、まず、脳内でのイメージ作りが大切です。
いわゆる「勝てるイメージ」というやつです。
ここの能書きが長いから、久川は技術屋として大成しないのだと思います。
 
自分は『ソナチネ』のメインテーマを聴きながら、この雲がうねるように動くイメージを浮かべていました。
皆さんは、ムーディ勝山の「右から左へ受け流すの歌」を聴きながら作ってください。
ほかに自分だけのループソングをお持ちの方は、それでも構いません。

ループさせる画像を作ろう~実践編

では、始めましょう。
 
今回は『株式会社ComD』さんの「写真からシームレスなパターンを作る」を参考にさせて頂きました。
 

鬼のようにバージョンが古いけど気にしないで。

 
[フィルタ] → [その他] → [スクロール] の順に選びます。
 

はんぶんこー。范文虎ったら・はんぶんこー。

 
画面のように、右方向へスクロールさせます。
400px なのは、画像サイズが 800px だから。
真ん中に持ってきておいたほうが、加工しやすいでしょ。
 

クリーン・バンディットいいですよね。あっ、雑談です。

 
心霊写真作成機能、もといコピースタンプツールで、真ん中の継ぎ目を消していきます。きれいに加工できたら完成です。
このファイル名を、仮に「Sonatina.png」さんとでもしておきますかね。

続いてソースに移ります

さて、画像ができあがったら今度はコーディングです。
 
ベースは『webOpixel』さんの「jQueryで背景画像をアニメーションで無限ループさせる」を使わせて頂きました。
 

HTML
<div id="Sonatina">ほげほげ</div>
JAVA
var snt = jQuery.noConflict();

snt(document).ready(function () {

	var scrollSpeed = 0.5;
	var imgWidth = 800; // 横幅
	var posX = 0;
	setInterval(function(){

		if (posX >= imgWidth) posX= 0;
		posX += scrollSpeed;
		snt('#Sonatina').css("background-position",posX+"px 0px");

	}, 1);

});
CSS
#Sonatina { width: 100%; height: 200px;
	    background: #666666 url(Sonatina.png) repeat-x;
	    opacity: 0.8;
	    filter: alpha(opacity=80);
	    -moz-opacity: 0.8; }

 
CSSの半透明の部分は、お好みで。
画像を作る段階で、透過PNGにしておいてもいいかも知れません。

なぜ雲だったのか

なぜ雲を流したかったのかと言いますと。
 
『ソナチネ』のラストシーンとか、『池袋ウエストゲートパーク』の加藤あいのラストカットとか、海辺の曇天が大好きなんです。
「幻想的」という言葉を聞くと、オーロラでも腐海でも幻想水滸伝でもなく(もちろん悠久幻想曲でもない)、海辺の曇天が真っ先に浮かぶ内陸県人でして。
 
海辺っていいですよね。水平線は低くて、そこから上は遙か空。ビルも何もない空。宇宙を感じます。
山を覆う緑の木々は地球の自然に依存しており、その荘厳さは神々の手によるものと俺に想像させますが、海はそんな人格神の存在すら超越して、宇宙と直結している感がある。
 
そしてその海の空も、夏休みの子供をはしゃがせるだけの青空より、大人のビターな気持ちにしてくれる雲がいい。
たまに海が見たくなると、秋や冬のあえて天気のすぐれない日を選ぶぐらいですから。

ざわ…ざわ…ざわ…

そこへきて、昔からアニメGIFを使ったサイトが好きなんです。
10年ほど前に更新は停まっていますが、今も活躍中のイラストレーター・ヤスダスズヒトさんのページを食い入るように見ていた高校時分を思い出します。今でも当時のものが見れますね。ナビゲーション部分にギザギザがついていて、これが動くんだ。当時はすごく垢抜けて感じたなあ。
 
んで、せっかくなので今回は、あの頃の感動をうちのブログにも取り入れてやろう、と。そんな試みでした。
 
うちのブログはいろいろ調整しているうちに、雲というより木星の大赤斑になってしまった感がなきにしもあらずですが、まあ俺なりに心がザワザワする感じを表現できたので、いいんじゃないかなあと納得しています。

終わりに

個人的に「このギミックは絶対に使いたかった!」という演出であり、デザインそのものがこのギミックありきで進んだ事情、変数やクラス名を「ソナチネ」としてしまったぐらいなので、えらく気に入っています。
 
が、マシンスペックの弱い環境だと、ファンのうなりが止まらねえさということもありうるので、よっぽど使いたい場面がない限り、慎重に採用したほうがいいかも知れませんね。
 
・なぜループさせたいのか
・本当にループでなければいけないのか
・それは家族を犠牲にしてまでもやるべきことなのか
 
よく自分に問いかけてから、Photoshopを起動させるようにしましょう。

Author ウェブデザイナー久川智夫

ぜひこの記事をシェアしてください!

このエントリーをはてなブックマークに追加

ぜひコメントをお寄せください!(メールアドレスは公開されません)

この記事のトラックバック用URL