-2

Apple's page for iPhoneX is stunning, and I would like to know how to replicate some features on the site. See the link (https://www.apple.com/iphone-xr/)

I have very little knowledge about web development. I know html and css are the most common languages used for web development. Is this the same for the Apple website?

I am particularly interested in how to create animations while scrolling, a feature I see in many websites. As the user scrolls, new images and moving text are displayed on screen.

Britney Forsyth
  • 31
  • 1
  • 2
  • 4

2 Answers2

0

The link used in the question as well as other regional websites of Apple Inc. are based on a typical HTML-CSS platform(primarily). Please note that the animations are based on js (also css). The animations look really nice as they have divided the pages into dedicated DIVs and have used plenty of effects like onHover ,mouseUP, visibilityChange, scrolling-related stuff and what not.

You can use Ctrl+Shift+I to inspect the elements on ANY wesite for that matter, that will give you the idea of what the contents of a site really are.... !!

What 'Inspect element' looks like

Community
  • 1
  • 1
master ArSuKa
  • 16
  • 2
0

This effect can be achieved in the following ways:

Sorted from the most difficult:

  1. Code it yourself using vanilla Javascript(see: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/)
  2. Code it yourself using a Javascript libraries

or without coding:

  1. Scrollsequence WordPress Plugin (see: https://wordpress.org/plugins/scrollsequence/)
Canopus
  • 565
  • 3
  • 17
DashDriven
  • 1
  • 1