<?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>phreekz &#187; fx.scroll</title>
	<atom:link href="http://www.phreekz.de/wordpress/tag/fx-scroll/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.phreekz.de/wordpress</link>
	<description>thinktank mindmachine</description>
	<lastBuildDate>Thu, 26 Jan 2012 21:24:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Mootools FX-Scroll unter v1.21</title>
		<link>http://www.phreekz.de/wordpress/2009/01/mootools-fx-scroll-unter-v1-21/</link>
		<comments>http://www.phreekz.de/wordpress/2009/01/mootools-fx-scroll-unter-v1-21/#comments</comments>
		<pubDate>Mon, 26 Jan 2009 10:33:45 +0000</pubDate>
		<dc:creator>chmee</dc:creator>
				<category><![CDATA[PC & Coding]]></category>
		<category><![CDATA[Video & Audio]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[fx.scroll]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://www.phreekz.de/wordpress/?p=256</guid>
		<description><![CDATA[<<p>Leider gibt es auf der Demos-Seite von mootools nur eine ältere Version zum Umgang mit FX.Scroll. Dies sollte dann wohl überall funktionieren, Sourcecode mit JS und CSS:</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li>&nbsp;</li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>mootools 1.21 Scroll - phreekz<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span></li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;mootools_121.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;more_121.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>// <span style="color: #404040;">&lt;![CDATA[</span></li><li>&nbsp;</li><li><span style="color: #404040;">window.addEvent('domready', function() {</span></li><li>&nbsp;</li><li><span style="color: #404040;">&nbsp;&nbsp;var fx = new Fx.Scroll($('main'), {duration: 2000});</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toBottom();</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok2').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toTop();</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok3').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toElement('mid');</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">});</span></li><li><span style="color: #404040;">// ]]&gt;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;- <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll Down<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> - <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok3&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll to div mid<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> - <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok2&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll Top<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> -</li><li>&nbsp;</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;main&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;overflow: hidden; width: 200px; height: 150px; background-color: #cccccc;&quot;</span>&gt;</span>HDMI wurde von der Industrie zielgerichtet für den Bereich der privat genutzten Unterhaltungselektronik (engl. „home entertainment“) eingeführt. Da hier immer mehr digitale Komponenten eingesetzt werden und auch der Nutzinhalt mittlerweile vorwiegend in digitalisierter Form vorliegt (z. B. DVD, DVB usw.), wurden die Schwächen der bisher unvermeidlichen Digital-Analog- und Analog-Digital-Wandlungen immer offensichtlicher.</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;mid&quot;</span>&gt;</span>Lange Zeit<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li>hatte sich die Filmindustrie jedoch jeder Bestrebung widersetzt, Videodaten digital auszugeben. Man fürchtete nämlich, dass jeder Kopierschutz über kurz oder lang überwunden werden könnte. Mit dem Kopierschutz HDCP 1.1 (High-bandwidth Digital Content Protection), der in der HDMI-Spezifikation vorgesehen ist und in praktisch jedem auf dem Markt befindlichen HDMI-fähigen Gerät zum Einsatz kommt, scheinen diese Bedenken nun nicht mehr zu bestehen.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<div>
<ul>
<li>Namenskonventionen (id&#8217;s, class&#8217;es) einhalten, keine Unterstriche, keine Zahl am Anfang..</li>
<li>der Hauptlayer muss natürlich mit <span style="color: #bfffff;">overflow:hidden</span> begrenzt werden.</li>
<li> FX.Scroll wurde in die more-Lib ausgegliedert</li>
</ul>
<p>mfg chmee</p></div>
 <p><a href="http://www.phreekz.de/wordpress/?flattrss_redirect&amp;id=256&amp;md5=e8a8ffc9327a43db4341cf45935debcc" title="Flattr" target="_blank"><img src="http://www.phreekz.de/wordpress/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></description>
			<content:encoded><![CDATA[<p>Leider gibt es auf der Demos-Seite von mootools nur eine ältere Version zum Umgang mit FX.Scroll. Dies sollte dann wohl überall funktionieren, Sourcecode mit JS und CSS:</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li>&nbsp;</li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>mootools 1.21 Scroll - phreekz<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span></li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;mootools_121.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;&nbsp; <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;more_121.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>// <span style="color: #404040;">&lt;![CDATA[</span></li><li>&nbsp;</li><li><span style="color: #404040;">window.addEvent('domready', function() {</span></li><li>&nbsp;</li><li><span style="color: #404040;">&nbsp;&nbsp;var fx = new Fx.Scroll($('main'), {duration: 2000});</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toBottom();</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok2').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toTop();</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">&nbsp;&nbsp;$('ok3').addEvent('click', function() {</span></li><li><span style="color: #404040;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fx.toElement('mid');</span></li><li><span style="color: #404040;">&nbsp;&nbsp; });</span></li><li><span style="color: #404040;">});</span></li><li><span style="color: #404040;">// ]]&gt;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li><li>&nbsp;</li><li>&nbsp;&nbsp;- <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll Down<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> - <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok3&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll to div mid<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> - <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ok2&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>scroll Top<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> -</li><li>&nbsp;</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;main&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;overflow: hidden; width: 200px; height: 150px; background-color: #cccccc;&quot;</span>&gt;</span>HDMI wurde von der Industrie zielgerichtet für den Bereich der privat genutzten Unterhaltungselektronik (engl. „home entertainment“) eingeführt. Da hier immer mehr digitale Komponenten eingesetzt werden und auch der Nutzinhalt mittlerweile vorwiegend in digitalisierter Form vorliegt (z. B. DVD, DVB usw.), wurden die Schwächen der bisher unvermeidlichen Digital-Analog- und Analog-Digital-Wandlungen immer offensichtlicher.</li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;mid&quot;</span>&gt;</span>Lange Zeit<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li>hatte sich die Filmindustrie jedoch jeder Bestrebung widersetzt, Videodaten digital auszugeben. Man fürchtete nämlich, dass jeder Kopierschutz über kurz oder lang überwunden werden könnte. Mit dem Kopierschutz HDCP 1.1 (High-bandwidth Digital Content Protection), der in der HDMI-Spezifikation vorgesehen ist und in praktisch jedem auf dem Markt befindlichen HDMI-fähigen Gerät zum Einsatz kommt, scheinen diese Bedenken nun nicht mehr zu bestehen.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--></p>
<div>
<ul>
<li>Namenskonventionen (id&#8217;s, class&#8217;es) einhalten, keine Unterstriche, keine Zahl am Anfang..</li>
<li>der Hauptlayer muss natürlich mit <span style="color: #bfffff;">overflow:hidden</span> begrenzt werden.</li>
<li> FX.Scroll wurde in die more-Lib ausgegliedert</li>
</ul>
<p>mfg chmee</p></div>
 <p><a href="http://www.phreekz.de/wordpress/?flattrss_redirect&amp;id=256&amp;md5=e8a8ffc9327a43db4341cf45935debcc" title="Flattr" target="_blank"><img src="http://www.phreekz.de/wordpress/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.phreekz.de/wordpress/2009/01/mootools-fx-scroll-unter-v1-21/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<atom:link rel="payment" href="http://www.phreekz.de/wordpress/?flattrss_redirect&amp;id=256&amp;md5=e8a8ffc9327a43db4341cf45935debcc" type="text/html" />"
	</item>
	</channel>
</rss>

