params.json

{"name":"Gravify","tagline":"Falling with Style: A CSS3 Bouncing Effect that Mimics Gravity","body":"### The Problem\r\nA long, long time ago (in the summer of 2014), when I did everything in my stylesheet, I came across a peculiar problem. I wanted to use CSS3 to give a ball object the effect of bouncing (or \"falling with style\") in accordance with the natural laws of physics. I scoured the internet for some way to breathe gravity into this ball. After hours looking through StackOverflow and CSS docs, I had found a few options, though I remained unsatisfied. Using JavaScript and JQuery would be excessive and inefficient for such a minor task that should be easily solvable with the existing animation options in CSS3. I first tried using the ease-in/out transitions that CSS provides, and while these appeared smooth, they did not provide a feeling of natural acceleration. Many sites I visited suggested an extensive keyframe function to time each bounce. These functions appeared verbose and redundant in code, and every new bouncing object would need an entirely different function. What's more, the effect created still appeared choppy and unprofessional. \r\n\r\n\r\n\r\n\r\n### The Solution\r\nFinally, I came across someone's suggestion to try using a cubic-bezier curve, though all the sample functions I found we slightly off. Still, this was the closest I had come. I started from scratch, spending hours of trial-and-error to fine tune this versatile function, until finally, something just clicked.\r\n\r\nFirst, define your bounce animation by setting the position change for your bounce using a keyframe function:\r\n```\r\n@-webkit-keyframes bounce {\r\n  from, to {\r\n    bottom: [bottom of bounce location]px;\r\n    height: [squished height at bottom of bounce]px;\r\n  }\r\n  75% {\r\n    bottom: [top of bounce location]px;\r\n    height: [full height at top of bounce]px;\r\n  }\r\n}\r\n```\r\nNow, by adding just one CSS3 transition/timing to your stylesheet, you may give your bounce animation the effect of accelerating under a gravitational force:\r\n```\r\n#OBJECT-TO-BOUNCE {\r\n    /*duration per bounce ≈ (((top of bounce location) - (bottom of bounce location))/125)*/ \r\n    -webkit-animation: bounce [duration per bounce] cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;\r\n}\r\n```\r\n<img src=\"https://raw.githubusercontent.com/albiebrown/gravify/master/images/lamp.png\" style=\"height:80px;left:470px;\">\r\n\r\n![](https://raw.githubusercontent.com/albiebrown/gravify/master/images/gravify.png)","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}