enjoyCSS.points["10qR_0"] = {"0":{"transform":{"perspective":{"z":"0"},"perspective-origin":{"z":"0_%","y":"50_%","x":"50_%"},"origin":{"z":"0_%","y":"50_%","x":"50_%"},"skew":{"z":"0_deg","y":"0_deg","x":"0_deg"},"translate":{"z":"0_px","y":"0_px","x":"0_px"},"scale":{"z":"1","y":"1","x":"1"},"rotate":{"z":"0_deg","y":"0_deg","x":"0_deg"}},"transition":{"points":[{"_":"e1388780718896PnlL","property":"all","delay":"0_ms","duration":"200_ms","timing":[0.42,0,0.58,1]}]},"background":{"points":[{"_":"e1388781822964EAfp","color":"rgba(252,252,252,1)","type":"color"}]},"box-shadow":{"points":[{"_":"e1388780305643CGyO","color":"rgba(0,0,0,0.2)","spread":"0_px","blur":"2_px","y":"2_px","x":"2_px","type":"inset"}]},"border-radius":{"bottom":{"right":{"horizontal":"3_px","vertical":"-"},"left":{"horizontal":"3_px","vertical":"-"}},"top":{"right":{"horizontal":"3_px","vertical":"-"},"left":{"horizontal":"3_px","vertical":"-"}}},"border":{"left":{"style":"solid","color":"#b7b7b7","width":"1_px"},"bottom":{"style":"solid","color":"#b7b7b7","width":"1_px"},"right":{"style":"solid","color":"#b7b7b7","width":"1_px"},"top":{"style":"solid","color":"#b7b7b7","width":"1_px"}},"padding":{"left":"20_px","bottom":"10_px","right":"20_px","top":"10_px"},"margin":{"left":"0_px","bottom":"0_px","right":"0_px","top":"0_px"},"positioning":{"left":"auto","bottom":"auto","right":"auto","top":"auto"},"text-shadow":{"points":[{"x":"1_px","y":"1_px","blur":"0_px","color":"rgba(255,255,255,0.66)","text_color":"black","_":"e1388780897961aDvP"}]},"text":{"white-space":"normal","word-spacing":"0_px","letter-spacing":"0_px","text-overflow":"clip","text-indent":"0_px","text-align":"left","text-transform":"none","text-decoration":"none","font-variant":"normal","font-style":"normal","font-weight":"normal","color":"rgba(0,142,198,1)","line-height":"normal","font-size":"16_px","font-family":{"type":"defaults","family":"Times New Roman"}},"cursor":"default","overflow":"visible","box-sizing":"content-box","position":"static","z-index":"auto","float":"none","display":"inline-block","height":"auto","width":"auto","__state_pseudo":"","__state_name":"normal"},"__settings":{"location_hash":"","nodeTypeStates":{"button":{"hover":false},"block":{"hover":false},"input":{"hover":false}},"background":{"color":"rgba(255,255,255,1)","type":"color"},"hideDefault":true,"selector":".enjoy-css","className":"enjoy-css","nodeType":"input","text":"<h1>Pure CSS Ticker (No-JS)</h1>\n<h2>A smooth horizontal news like ticker using CSS transform on infinite loop</h2>\n\n<div class=\"ticker-wrap\">\n<div class=\"ticker\">\n  <div class=\"ticker__item\">Letterpress chambray brunch.</div>\n  <div class=\"ticker__item\">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>\n  <div class=\"ticker__item\">Ugh PBR&B kale chips Echo Park.</div>\n  <div class=\"ticker__item\">Gluten-free mumblecore chambray mixtape food truck. </div>\n  <!--<div class=\"ticker__item\">Authentic bitters seitan pug single-origin coffee whatever.</div>\n  <div class=\"ticker__item\">Letterpress chambray brunch.</div>\n  <div class=\"ticker__item\">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>\n  <div class=\"ticker__item\">Ugh PBR&B kale chips Echo Park.</div>\n  <div class=\"ticker__item\">Gluten-free mumblecore chambray mixtape food truck. </div>\n  <div class=\"ticker__item\">Authentic bitters seitan pug single-origin coffee whatever.</div>-->\n</div>\n</div>\n\n<p>So, annoyingly, most JS solutions don't do horizontal tickers on an infinite loop, nor do they render all that smoothly.</p>\n<p>The difficulty with CSS was getting the animation to transform the entire items 100% yet include an offset that was only the width of the browser (and not the items full width).</p>\n<p>Setting the start of the animation to anything less than zero (e.g. -100%) is unreliable as it is based on the items width, and may not offset the full width of the browser or creates too large an offset</p>\n<p>Padding left on the wrapper allows us the correct initial offset, but you still get a 'jump' as it then loops too soon. (The full text does not travel off-screen)</p>\n<p>This is where adding display:inline-block to the item parent, where the natural behaviour of the element exists as inline, gives an opportunity to add padding-right 100% here. The padding is taken from the parent (as its treated as inline) which usefully is the wrapper width.</p>\n<p><b>Magically*</b> we now have perfect 100% offset, a true 100% translate (width of items) and enough padding in the element to ensure all items leave the screen before it repeats! (width of browser)</p>\n<p>*Why this works: The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. <br>Uses `box-sizing: content-box`<br>\nPadding is calculated on the width of the containing box.<br>\nSo as both the ticker and the items are formatted as nested inline, the padding must be calculated by the ticker wrap.</p>\n\n<p>Ticker content c/o <a href=\"http://hipsum.co/\">Hipsum.co</a></p>\n"}}