The iPhone 12's Product Page Inspires a Lot of Animators

After two years of lagging sales, technology giant Apple seems to have scored another major hit with the iPhone 12, which has surpassed all Samsung smartphone models to become the best-selling mobile device in the world. According to sales statistics compiled in late 2020, the iPhone 12 is on track to becoming the best-selling piece of hardware released by Apple thus far this century.

Even though the iPhone 12 is quite advanced and offers superb 5G connectivity, we should not overlook the online marketing campaign that Apple has created for this device. The campaign was clearly designed to attract "the next generation of users" and the results have been quite positive among target buyers, particularly web designers who can afford the hefty price tags of the iPhone 12. Apple knows that it can attract prospective buyers who know a thing or two about flashy web design, and this can be appreciated in the web page promoting the device.

What has caught the attention of web designers browsing the iPhone 12 page is how smoothly animations are rendered even as they scroll down the page to learn more about the device. Some designers have already figured out that the developers filmed high-quality video first and then exported the files to be made into a series of images; in other words, it is similar to a rudimentary snapshot animation. The images are actually the background of the page; the trick is to change the background as the page is scrolling, and there needs to be a JavaScript subroutine that keeps track of which image was displayed so that the right one can be displayed next.

The coding of the scrolling animations is not as complicated as it may seem; the key here is to produce high quality assets. Setting pre-rendered video as a background can be done with the right amount of CSS, JS, and HTML, but it needs to look good. Once you have superb quality of assets, everything else will fall into place because the majority of web visitors are highly visual. This is a trick that mobile game designers often resort to, and it works every time. For more information click here https://v.redd.it/8tuv5tfa4nl61.