The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront
•Descargar como PPTX, PDF•
0 recomendaciones•1,626 vistas
![Inherent Challenges for Users ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (15)
Destacado
Destacado (8)
Similar a The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront
Similar a The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront (20)
Más de AspDotNetStorefront
Más de AspDotNetStorefront (10)
Último
Último (20)
The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront
- 1. Design of Motion Jesse Hodges - AspDotNetStorefront
- 5. Direct
- 6. Easy to get wrong
- 8. In Process
- 9. Stuck on IE6
- 11. A really nice way to code it "right"
- 12. Very powerful when writing controls
- 13. Hand Crafted
- 14. Less obtrusive
- 16. InsertAjax loads an external page and replaces the the innerHtml of an element with the result
- 18. The above xml package demonstrates how to use the allow engine attribute (which defaults to false). After setting the attribute to true your package will be available to the xml package engine methods, e-packagename.aspx and x-packagename.aspx. To include the skin use e-packagename.aspx. To run the package without the skin use x-packagename.aspx.
- 20. The above function, updateMiniCart, will insert the AJAX response into the target div, vMiniCart. This method should be called when the item is added to the cart. The random number appended to the request URL keeps IE6 from caching the AJAX response.
- 22. The more direct you can be with your users, the better.
- 23. Let us show the item moving to the cart.Movement Demo
- 24. MoveElementToElement This function should be called when initiating the AJAX call. It clones the element being passed in (the product image), positions the clone absolutely, animates the clone moving to the cart, and then removes the clone.
- 26. Find a balance
- 27. Let the user chooseLightbox Demo
- 28. For this example we will use a jQuery plugin called ColorBox. The above html will be created for each product on the category page. It is a link to the product page using x-dash so that it does not include the skin. We also pass “isquickview” on the query string so that we can toggle elements on the product page if the product is being viewed from quickview. We then tell ColorBox to open all links with the class “productquickview” in a lightbox. In order to use the product xml package in this way we must set it’s “allowengine” attribute to true. This will allow us to call x-product.ajaxproduct.aspx?productid=42&isquickview=true.
- 31. CSS Attributes
- 32. -webkit
- 33. -moz
- 34. The technology is ready, most development stratagies are not.HTML5 Demo
- 35. The 8 lines of css above use CSS 3 to animate the cart dropping down when the user hovers over the minicart. –webkit-transition takes 3 parameters: attribute to animate (height), duration (1s), and transition type (ease-in-out). Note that mozilla based browsers have a similar attribute named –moz-transition. The example above has a hard coded height per row. Unfortunately transitions do not yet support percent correctly.
- 38. Drawing
- 39. Drag and Drop