<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>transform | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/transform/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Tue, 30 Oct 2018 15:54:30 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>サインポール風アニメーションjQueryプラグイン</title>
		<link>https://uda2.com/blog/barbersignpole/</link>
					<comments>https://uda2.com/blog/barbersignpole/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Tue, 14 Apr 2015 12:25:15 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[jQuery プラグイン]]></category>
		<category><![CDATA[transform]]></category>
		<guid isPermaLink="false">http://uda2.com/blog/?p=1882</guid>

					<description><![CDATA[<p>首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。 デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的</p>
The post <a href="https://uda2.com/blog/barbersignpole/">サインポール風アニメーションjQueryプラグイン</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></description>
										<content:encoded><![CDATA[<p>首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。<br />
<a href="http://www4.nhk.or.jp/umeboshi/" target="_blank">デザインの梅干</a>によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。</p>
<p>そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。<br />
<a href="http://uda2.com/github/barbersignpole.html" target="_blank">4本のサインポールの動きサンプル</a><br />
<span id="more-1882"></span><br />
仕組みは正方形のオブジェクトを入れ、それにCSSのlinear-gradientで斜めのストライプを作って、それをtransformでアニメーションしています。</p>
<p>今回はjQueryプラグイン化し、久々にGithubにアップしました。<br />
<a href="https://github.com/uda2/barbersignpole" target="_blank">uda2/barbersignpole</a><br />
グラデーションの模様は好きなデザインに指定できます。値は色とパーセントです。<br />
方向はvectに数値を入力することで設定します。テンキーを基準に7が左上、9が右上、3が右下、1が左下になります。<br />
speedは一連のアニメーションの時間（秒）です。</p>
<p>まず、グラデーションですが普通に色を並べるとストライプにならないので色を指定すると次の色を0.005％後に指定する事でグラデーションを抑止しストライプにしています。<br />
アニメーションはCSSのグラデーションは背景画像なのでシンプルに背景画像位置（background-position）をいじっても再現できるのですが重いので、正方形のオブジェクトを追加してそれをtransformで移動しています。<br />
一見冗長に見えますがタスクマネージャー読みで3倍ぐらい高速になります。</p>
<p>※現時点のGoogleChromeは斜めのグラデーションが汚く細かい線が再現されないです。</p>The post <a href="https://uda2.com/blog/barbersignpole/">サインポール風アニメーションjQueryプラグイン</a> first appeared on <a href="https://uda2.com/blog">ウダ2Blog</a>.]]></content:encoded>
					
					<wfw:commentRss>https://uda2.com/blog/barbersignpole/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
