title: Applying CSS to a moving div when it reaches certain area. Static magnifier for moving elements
body: <p>I've stumbled upon a problem of creating a very specific element. I have a ticker that shows different content - text, images and other types of content in it. What I want to do is to add a static "magnifier" so all the moving content would be scaled when it is in magnifiers area.</p>
  
  <p>Most of jquery zoom or magnification plugins that I saw never used fixed position and worked on mouse over with either using 2 images and showing bigger one inside the magnifier area or using additional css for each element. So they are pretty much no use to me.</p>
  
  <p>What I'm trying to accomplish is when any moving div reaches magnifier area - it triggers creation of a clone that overlays original div and css transformation is applied to the clone (lets say it is scaling 2x) it must also have proportional speed change so things look smooth ( for example original div is 100px wide and will slide inside magnifying area for 2 seconds so it's speed is 50px per second - his clone will be 200px wide so it must slide 100px per 1 second and etc.) . Note that all this actions are only visible in the magnifier area. When the clone div reaches the end of magnifier area it must be removed. </p>
  
  <p>I've created a fiddle to make more sense.</p>
  
  <p><a href="http://jsfiddle.net/4mTMw/770/" rel="nofollow">FIDDLE</a></p>
  
  <p>The code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='scroll'&gt;
  &lt;div class='scroll-content'&gt;
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt; 
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt;
      Text sample 1
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt;
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt;
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt;
      Text sample 2 
      &lt;img src="http://dummyimage.com/96x96/f0f0f0/626262.png&amp;text=2"&gt;&lt;/img&gt;
      Text sample 3
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  
  
  <p>CSS:</p>
  
  <pre><code>div.scroll { margin-top: 200px;
  margin-left: 100px;
  white-space:no-wrap;
  overflow:hidden;
  }
  
  div.scroll &gt; div.scroll-content {
  white-space:nowrap;
  display:inline;
  margin-top: 20px;
  margin-left: 50 px;
  width:auto;
  }
  
  #zoom { 
  position: absolute;
      top: 150px;
      left: 150px;
  height: 200px;
  width: 200px;
  border: solid; color:red;
  border-width: 3px;
  border-radius: 155px;
  }
  
  
  div.clone {
  white-space:nowrap;
  display:inline;
  margin-top: 20px;
  margin-left: 50 px;
  width:auto;
  }
  </code></pre>
  
  <p>Now the hard part - my code is missing triggers for beginning and ending so I divided into separate parts.</p>
  
  <p>jQuery:</p>
  
  <pre><code>// this scrolls original divs
  
  $(function scoll(){
  var scroll = $('div.scroll');
  scroll.each(function() {
  var mar = $(this),indent = mar.width();
  mar.scroll = function() {
      indent--;
      mar.css('text-indent',indent);
      if (indent &lt; -1 * mar.children('div.scroll-content').width()) {
          indent = mar.width();
      }
  };
  mar.data('interval',setInterval(mar.scroll,1/60));
  });
  });
  </code></pre>
  
  <p>This should clone original divs with css transformation, however I can't figure out how to set the trigger. I can't find "position" or "coordinates" specific trigger in javascript or jQuery documentation.</p>
  
  <pre><code>$(function clone(){
  var val = 2;
  $('.scroll-content').clone().addClass('clone').css({
          '-moz-transform': 'scale(' + val + ')',
  '-webkit-transform': 'scale(' + val + ')'}).appendTo('#zoom', scroll2);
  $('.clone').remove();
  });
  </code></pre>
  
  <p>This should scroll clones inside red circle</p>
  
  <pre><code>$(function scoll2(){
  var scroll = $('div#zoom');
  scroll.each(function() {
  var mar = $(this),indent = mar.width();
  mar.scroll = function() {
      indent--;
      mar.css('text-indent',indent);
      if (indent &lt; -1 * mar.children('div.clone').width()) {
          indent = mar.width();
      }
  };
  mar.data('interval',setInterval(mar.scroll,1/60));
  });
  });
  </code></pre>
  
  <p>So the main problem is setting the correct triggers for beginning and ending. </p>