| // easing functions http://goo.gl/5HLl8 | |
| Math.easeInOutQuad = function (t, b, c, d) { | |
| t /= d/2; | |
| if (t < 1) { | |
| return c/2*t*t + b | |
| } | |
| t--; | |
| return -c/2 * (t*(t-2) - 1) + b; | |
| }; |
useViewportScroll is a great way to create a parallax effect as the page scrolls. In some cases however, we only want to scroll when an element is in the viewport area.
So for example, if we have a "landscape" scene, and want to animate the Sun object only when it's in view, we start with our useViewportScroll implementation:
function Sun(props) {
const { scrollY, scrollYProgress } = useViewportScroll();
| ffmpeg -i 'source.mp3' -codec:a libmp3lame -ss 0 -to 16 -af "afade=t=in:st=0:d=3,afade=t=out:st=13:d=3" -map_metadata -1 -b:a 50k 'output.mp3' |
| # Output video | |
| ffmpeg -an -i source.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 output.mp4 | |
| # Output video and change width (-vf scale=720:-1) | |
| ffmpeg -an -i source.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 -vf scale=720:-1 output.mp4 | |
| #Output first frame as PNG for poster image | |
| ffmpeg -i source.mp4 -ss 00:00:00 -vframes 1 output.png |
| img, | |
| picture { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .image { | |
| display: inline-block; | |
| line-height: 0; | |
| position: relative; |
| // isAutoplaySupported(callback); | |
| // Test if HTML5 video autoplay is supported | |
| isAutoplaySupported = function(callback) { | |
| // Is the callback a function? | |
| if (typeof callback !== 'function') { | |
| console.log('isAutoplaySupported: Callback must be a function!'); | |
| return false; | |
| } | |
| // Check if sessionStorage exist for autoplaySupported, | |
| // if so we don't need to check for support again |
| /* | |
| * Example URL: http://example.com/?city=portland&state=oregon&country=usa | |
| * Example Usage: alert( getQueryString('city') ); will return portland | |
| */ | |
| function getQueryString(obj) { | |
| var string = window.location.search.substring(1); | |
| var strings = string.split('&'); | |
| for (var i=0; i < strings.length; i++) { | |
| var set = strings[i].split('='); | |
| if (set[0] == obj) { |
| /* | |
| Legal Drinking Age | |
| Created by Nathan Searles <http://nathansearles.com> | |
| Version: 1.0 | |
| Updated: July 23rd, 2012 | |
| (c) 2012 by Nathan Searles |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery Deferred</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | |
| <script> |
| var someString = "someArray"; | |
| $.someArray = | |
| [ | |
| 'Item One', | |
| 'Item Two', | |
| 'Item Three', | |
| 'Item Four', | |
| 'Item Five', | |
| 'Item Six' |