Millä tekniikalla iPhone13-tuotesivu on luotu

[limpparialimpparia]

Hei!

Haluaisin yhden tuotteen verkkokaupalle landing pagen, joka toimisi samaan tapaan iPhone13-tuotesivun kanssa. En vain osaa ostaa palvelua, kun en tiedä mitä olen tilaamassa. Osaisiko täältä joku auttaa?

Tuotesivu on tässä: iPhone 13 Pro and iPhone 13 Pro Max

Eli ajatus olisi, että alaspäin skrollaamalla sivua tuote nousisi ylös sivun alhaalta ja samalla kiertyisi oikealta vasemmalle. Samalla alhaalta nousisi tekstiä kuvaan. Välillä nousisi pelkkää tekstiä eri rytmityksellä. Kun skrollaa ylöspäin, kaikki tapahtuisi päinvastoin.

Millä tekniikalla tällainen on mahdollista tehdä? Ilmeisesti tässä ei ole käytetty videota. Onnistuuko tämä millään Wordpress-teemalla? Minulla on omasta tuotteesta otettu kuvia siten, että tuotetta on joka kuvan välissä hieman kierretty.

 

[ANTI_L]

Olisko HTML5 ja javascriptiä käytössä. Ei pitäisi olla ammattilaiselle vaikeaa kun selität idean.

 

[limpparialimpparia]

Olisko HTML5 ja javascriptiä käytössä. Ei pitäisi olla ammattilaiselle vaikeaa kun selität idean.

Kiitos.

 

[Palanca]

En tiedä, mutta voisi kuvitella että Adobe XDllä voisi myös onnistua.(?)

 

[ontelo]

Yleisesti kai puhutaan parallax efektistä. Näihin löytyy useita kirjastoja ja luultavasti teemoja.

 

[Paapaa]

En tiedä, mutta voisi kuvitella että Adobe XDllä voisi myös onnistua.(?)

Hmm, toi näyttää suunnittelusoftalta, ei siis taida suoltaa mitään valmista koodia/html:ää/css:ää ulos. Tässä taidettiin kysyä nimenomaan implementointipuolta. Mutta saatan olla väärässä, en tunne Adobe XD:tä.

 

[-Cone-]

Hmm, toi näyttää suunnittelusoftalta, ei siis taida suoltaa mitään valmista koodia/html:ää/css:ää ulos. Tässä taidettiin kysyä nimenomaan implementointipuolta. Mutta saatan olla väärässä, en tunne Adobe XD:tä.

Saa XD:stä exportattua ulos HTML:ää ja CSS:ää, mutta Applön webisivut ovat HMTL5-pohjaiset ja kohtuu kustomia.

@limpparialimpparia tsekkaa vaikkapa


Noi animoinnit rullatessa on tehty todennäköisesti jollain kustomi-javascriptalla. Noita vastaavia löytyy myös ihan open sourcena. Etsi vaikkapa googlesta hakusanoin web page parallax effect tai scroll effect.

 

[goldenscan]

Greensockilla ja ScrollTrigger -lisäosalla lähtisin itse tekemään, toisena vaihtoehtona ScrollMagic. Adobe XD:llä voi suunnitella ulkoasun mutta ei sillä juuri sen pidemmälle pääse - ei tosin ole tarkoituskaan