How Apple Creates Scrolling and Zooming Effects

Key Techniques

1. Position Sticky

• Uses position: sticky; in CSS.
• As you scroll, the iPhone element sticks to the top of the page.

2. Scaling the Sticky Element

• The sticky element is scaled by default.
• A scroll listener in JavaScript updates the scale property as you scroll.

Combined Effect

• Scroll and stick: the iPhone element sticks to the top.
• Continue scrolling to create a zoom-out effect.
• Further scrolling continues the page content.

Additional Enhancements

• Apple adds fades and other effects for a more polished look.
• The same basic techniques (position sticky and scaling with scroll) can be used to create various effects.