$30 off During Our Annual Pro Sale. View Details »

When jQuery and CSS3 Collide

Avatar for Louis Lazaris Louis Lazaris
March 02, 2013
Programming
6
4.4k

When jQuery and CSS3 Collide

Some tips, techniques, and resources to help our tools work well together, with a specific focus on CSS3 transitions and animation.

Avatar for Louis Lazaris

Louis Lazaris

March 02, 2013
Tweet

More Decks by Louis Lazaris

See All by Louis Lazaris
DOM Features You Didn't Know Existed
Avatar for Louis Lazaris impressivewebs
5
1k
Front-end Tools: Sifting Through the Madness
Avatar for Louis Lazaris impressivewebs
3
5k

Other Decks in Programming

See All in Programming
Integrating WordPress and Symfony
Avatar for Alexandre Salomé alexandresalome
0
130
20 years of Symfony, what's next?

Avatar for Fabien Potencier fabpot
2
320
CSC305 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
290
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
Avatar for suna-big sunabig
0
140
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
220
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
710
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
5
1.7k
これだけで丸わかり！LangChain v1.0 アップデートまとめ
Avatar for os1ma os1ma
6
1.4k
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
8
19k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
640
Google Antigravity and Vibe Coding: Agentic Development Guide
Avatar for MIKIO KUBO mickey_kubo
2
140
ゲームの物理 剛体編
Avatar for Fadis fadis
0
220

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
990
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k

Transcript

  1. When jQuery & CSS3 Collide by Louis Lazaris

  2. Who is This Guy?

  3. www.impressivewebs.com

  4. None

  5. I’ve Helped With...

  6. I Write...

  7. I Build...

  8. How I Feel

  9. The Front-end

  10. They Work Together

  11. Nobody wants this...

  12. Or This...

  13. Certainly Not This...

  14. But Together...

  15. Two Technologies

  16. Take-Away Concepts > Think Modular

  17. Take-Away Concepts > Think Modular > Learn the Subtleties

  18. Animation in jQuery > Uses .animate() > Or .fadeIn(), .slideUp(),

    etc

  19. Animation in jQuery

  20. Animation in jQuery

  21. Often Unnecessary?

  22. Often Unnecessary?

  23. The Alternative

  24. The CSS

  25. One Benefit of .animate()

  26. Use ‘transitionend’

  27. With Modernizr.prefixed()

  28. ‘transitionend’ on MDN

  29. Use ‘animationend’

  30. With Modernizr.prefixed()

  31. ‘animationend’ on MDN

  32. Web Animations 1.0

  33. Web Animations 1.0

  34. Defining App States

  35. Fresh Counting Done <html class="fresh"> htmlElement.className = 'counting'; htmlElement.className =

    'done'; Defining App States

  36. Defining App States

  37. None
  38. None

  39. Using Animate.css

  40. Using Animate.css

  41. Using Animate.css

  42. Options... > Use Existing Tools/Libraries > Build Your Own Reusable

    Modules

  43. Benefits? > Modular > Easier to Maintain

  44. Using CSS3 Transitions and Animations More Often...?

  45. How Are CSS3 Transitions Triggered?

  46. A Simple Transition

  47. What Triggers It?

  48. What Triggers It?

  49. This (kind of) means... Event  State Change State Change

     Transition

  50. How Does State Change? > :hover > :active > :focus

  51. How Does State Change? > :checked > :disabled > @media

  52. None

  53. Different Transitions on/off

  54. Different Transitions on/off

  55. Different Transitions on/off

  56. Different Transitions on/off

  57. Different Transitions on/off

  58. More Transition Subtleties...

  59. None
  60. None
  61. None
  62. None

  63. 1 Floated Boxes

  64. Increase Width & Height?

  65. 1 Causes Reflow

  66. Scale Transform?

  67. 1 1 Does Not Cause Reflow

  68. None

  69. Things That Are Out of the Flow... > Text shadows

    > Box shadows > display: none

  70. > position: absolute > position: fixed Things That Are Out

    of the Flow...

  71. > position: absolute > position: fixed > “position: relative” offsets

    Things That Are Out of the Flow...

  72. 1 Floated Boxes

  73. “position: relative” offsets 1

  74. > Outlines > Transform offsets (scale, skew, rotate, translate) Things

    That Are Out of the Flow...

  75. > Know your tools > Use them effectively What Does

    it Mean?

  76. Performance is King

  77. Jank Busters (video/slides)

  78. Ariya Hidayat (video/slides)

  79. Link Dump http://tinyurl.com/jquery-toronto

  80. Thank You! @ImpressiveWebs