Full Parallax for iOS CSS only

full-parallax-for-ios-css-only.markdown

Full Parallax for iOS CSS only

This is a demos of a web-page which recreates the popular parallax look in a way that is compatible with iOS. The images are given position:sticky; and are hidden behind the solid sections as they scroll. The images then stick to the top of the page and are revealed as the user continues to scroll. The main limitation is that the solid panels need to be a full screen height to hide the next image.

A Pen by tehmasta on CodePen.

License.

index.html

<div class="parallax-image1 sticky page-title">
</div>
<div class="section-header page-title">
  <div class="header-text">
    <h1>Full Parallax for iOS</h1>
    <h3>Displays properly on iPhone and iPad</h3>
  </div>
</div>
<div class="section">
  <p><h2>Is education residence conveying so so</h2>

<p>Nor hence hoped her after other known defer his. For county now sister engage had season better had waited. Occasional mrs interested far expression acceptance. Day either mrs talent pulled men rather regret admire but. Life ye sake it shed. Five lady he cold in meet up. Service get met adapted matters offence for. Principles man any insipidity age you simplicity understood. Do offering pleasure no ecstatic whatever on mr directly.</p>

<p>Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. Oh feel if up to till like.</p>

<p>New the her nor case that lady paid read. Invitation friendship travelling eat everything the out two. Shy you who scarcely expenses debating hastened resolved. Always polite moment on is warmth spirit it to hearts. Downs those still witty an balls so chief so. Moment an little remain no up lively no. Way brought may off our regular country towards adapted cheered.</p>

<p>Contented get distrusts certainty nay are frankness concealed ham. On unaffected resolution on considered of. No thought me husband or colonel forming effects. End sitting shewing who saw besides son musical adapted. Contrasted interested eat alteration pianoforte sympathize was. He families believed if no elegance interest surprise an. It abode wrong miles an so delay plate. She relation own put outlived may disposed.</p>

<p>Good draw knew bred ham busy his hour. Ask agreed answer rather joy nature admire wisdom. Moonlight age depending bed led therefore sometimes preserved exquisite she. An fail up so shot leaf wise in. Minuter highest his arrived for put and. Hopes lived by rooms oh in no death house. Contented direction september but end led excellent ourselves may. Ferrars few arrival his offered not charmed you. Offered anxious respect or he. On three thing chief years in money arise of.p</p>
</div>
<div class="parallax-image2 sticky">
</div>
<div class="section-header">
  <div class="header-text">
    <h2>USES POSITION:STICKY</h2>
    <h3>on images which are hidden behind the solid panels</h3>
  </div>
</div>
<div class="section dark">
  <h2>By spite about do of do allow blush</h2>

<p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him. Tore bred form if sigh case as do. Staying he no looking if do opinion. Sentiments way understood end partiality and his.</p>

<p>She literature discovered increasing how diminution understood. Though and highly the enough county for man. Of it up he still court alone widow seems. Suspected he remainder rapturous my sweetness. All vanity regard sudden nor simple can. World mrs and vexed china since after often.</p>

<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to.</p>

<p>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>

<p>Put all speaking her delicate recurred possible. Set indulgence inquietude discretion insensible bed why announcing. Middleton fat two satisfied additions. So continued he or commanded household smallness delivered. Door poor on do walk in half. Roof his head the what.</p>
</div>
<div class="parallax-image3 sticky">
</div>
<div class="section-header">
  <div class="header-text">
    <h2>Works with iOS devices</h2>
    <h3>iPad and iPhone</h3>
  </div>
</div>
<div class="section"><h2>By spite about do of do allow blush</h2>

<p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him. Tore bred form if sigh case as do. Staying he no looking if do opinion. Sentiments way understood end partiality and his.</p>

<p>She literature discovered increasing how diminution understood. Though and highly the enough county for man. Of it up he still court alone widow seems. Suspected he remainder rapturous my sweetness. All vanity regard sudden nor simple can. World mrs and vexed china since after often.</p>

<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to.</p>

<p>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>

<p>Put all speaking her delicate recurred possible. Set indulgence inquietude discretion insensible bed why announcing. Middleton fat two satisfied additions. So continued he or commanded household smallness delivered. Door poor on do walk in half. Roof his head the what.</p>
</div>
<div class="parallax-image4 sticky">
</div>
<div class="section-header">
  <div class="header-text">
    <h2>Credits</h2>
    <h3>Random Mountain Images: Unsplash</h3>
  </div>
</div>
<div class="section dark">
<h2>Refresh the page to see a bunch of new images</h2>

<p>Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him. Tore bred form if sigh case as do. Staying he no looking if do opinion. Sentiments way understood end partiality and his.</p>

<p>She literature discovered increasing how diminution understood. Though and highly the enough county for man. Of it up he still court alone widow seems. Suspected he remainder rapturous my sweetness. All vanity regard sudden nor simple can. World mrs and vexed china since after often.</p>

<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to.</p>

<p>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>
</div>

style.css

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 300%;
  width: 100%;
  font-family: "Open sans", sans-serif;
  font-size: 22px;
  line-spacing: 44px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 0;
}

div.parallax-image* {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  top: 0;
}

div.parallax-image1 {
  background-image: url(https://source.unsplash.com/random/2200x1200/?mountains);
}

div.parallax-image2 {
  background-image: url(https://source.unsplash.com/random/2300x1201/?cliff);
}

div.parallax-image3 {
  background-image: url(https://source.unsplash.com/random/2401x1200/?rocks);
}

div.parallax-image4 {
  background-image: url(https://source.unsplash.com/random/2001x1201/?hills);
}

.sticky {
  margin-top: -100vh;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, red, blue);
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 0;
}

div.section-header {
  position: relative;
  width:100%;
  height:70vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  z-index: 2
}

div.header-text {
  height: auto;
  padding: 0px 20px;
  padding-left: calc(20vw - 70px);
  margin-bottom: 40px;
  color: white;
  background: rgba(16, 32, 48, 0.5)
}

div.section {
  position: relative;
  background-color: white;
  width: 100%;
  min-height: 100vh;
  padding: 3em calc(20vw - 70px);
  z-index: 1
}

div.section:last-child {
  min-height: 50vh;
  padding: 3em calc(20vw - 70px) 6em;
}

div.section.dark {
  background-color: #102030;
  color:white;
}

.page-title > div >h1 {
  font-size: 80px;
}