Scratch-Off Reveal with HTML5 Canvas I’ve previously demonstrated several “sliding” before-and-after comparators for images and video that track mouse movement from side to side. More precise “scratch-off” interfaces can be useful for comparing particular kinds of images, such as photos taken at different times in history, or comparing a sketch against a final product. Other examples I’ve found of this technique are rather complicated and over-coded, or have framework dependencies; by comparison, the code for this technique is relatively straightforward, and written in pure JavaScript. In effect, the result is the same as my “scribble” SVG reveal technique, but interactive, rather than playing automatically. For this example, I’ve used Calgary’s Center Street bridge, which recently celebrated its 100th anniversary, with photographs taken 70 years apart, in 1943 and 2013. Images and Markup The comparison images must be the same size, or at least the same aspect ratio. The Script Compatibility
20 Scroll Animation Plugins You Must Start Using Flip Keep your website up to date by using these outstanding scroll animation plugins which follow the web design trends of 2017. Make your website interactive by using various animation effects that trigger when you scroll. These effects will definitely make your website more appealing and keep your users engaged. You can have scrolling animation that uses the vertical or horizontal space. No matter which technique you choose, be careful no to exaggerate with the effects since these might be a little tiring and can make your website load slower. This is an amazing scrolling effect that you can quickly incorporate in your designs. This is a creative scroll effect that, when using the mouse-wheel, your layout will move from right to left, in a horizontal position. This is an amazing scroll animation plugin that you can use right away. This is a very creative jQuery scroll effect that demonstrates that, with the right technique, you can do just about anything. ScrollReveal.js