Simple demonstration of the Proto.clip method
More info about the bundle here
Fabio Franchino abusedmedia
abusedmedia
/ Open Chrome Canary without security mode:
Created
September 28, 2016 11:22
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Open Chrome Canary without security mode: | |
| Doc: https://bugs.chromium.org/p/chromium/issues/detail?id=575690 | |
| open -a "/Applications/Google Chrome Canary.app" --args --disable-web-security --user-data-dir=$HOME/Downloads |
abusedmedia
/ adobe_calling.txt
Created
September 20, 2016 16:39
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ars.adobe.io | |
| lm.licenses.adobe.com | |
| www.adobe.com | |
| ans.oobesaas.adobe.com | |
| ffc.adobe.io | |
| ims-na1.adobelogin.com | |
| na1e-acc.services.adobe.com | |
| scss-prod-ew1-notif-9.adobesc.com | |
| scss-prod-ew1.adobesc.com | |
| polka.typekit.com |
abusedmedia
/ 01.js
Created
April 19, 2016 18:14
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var svg_path = "ui.svg" | |
| Proto.placeSVG(svg_path, init) | |
| function init(){ | |
| //$('body').removeClass('mobileready') | |
| Proto.coach('#wait', proceed) | |
abusedmedia
/ BB6CCC139D42C8B.jpg
Last active
March 10, 2016 11:48
Scoll list component with clip and momentum
More info about the bundle here
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-title" content="myapp"> | |
| <meta name="application-name" content="myapp"> |
This shows the technique to incorporate a common slider within a svg component using the wonderful library Impetus to handle momentum and rubber-band.
This example use a piece of code to create runtime the neccessary element to clip a content properly. The same thing can be set (avoiding the code) within Illustrator but at the cost of some issues and manual edits and other quirks outlined below.
To animate the masked content properly we need to tweak a little bit the svg since Illustrator export the svg without a proper structure.
Behaviors with d3.js, assets and document structure with svg generated from Illustrator/Sketch.
Test with your mobile device by clicking here