A rather geeky/technical weblog, est. 2001, by Bramus
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and …
Continue reading “ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages”
<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute …
Continue reading “scrollReveal.js – Easily reveal elements as they enter the viewport”
/* Add a basic data series with six labels and values */ var data = { labels: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], series: [{ data: [1, 2, 3, 5, 8, 13] }] }; /* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic …
OS X Yosemite introduced JavaScript for Automation. This makes it possible to access native OS X frameworks with JavaScript. The result above can be built using this code: ObjC.import(“Cocoa”); var styleMask = $.NSTitledWindowMask | $.NSClosableWindowMask | $.NSMiniaturizableWindowMask; var windowHeight = 85; var windowWidth = 600; var ctrlsHeight = 80; var minWidth = 400; var minHeight …
One of the things I miss in cPanel is a way to mass delete forwarders. With the current version of cPanel you need to click the delete link next to each forwarder. Above that you don’t actually delete that forwarder upon clicking, you are taken to a confirm page where you need to click “confirm” …
JavaScript countdown (or up) script with split-flap flip effect. Used it in a recent project and works like a charm. Only downside is that it’s px based, but that can be overcome. Be sure to also click that “Developer API” link on the site, as the main page itself does not hold all needed information …
Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline: Recalc styles Layout Paint Composite Layers If you like reading more than watching a video, a write-up is also available: Pixels are expensive …