CODEWITHSUNDEEP
javascriptiosscrollparallax
Walrus
Walrus

Reputation: 20444

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll

How then have apple achieved it on their own website.

Look at the blurred background images as you scroll on this page.

http://www.apple.com/ios/carplay/

Upvotes: 0

Views: 10385

Answers (1)

AlexAlmond
AlexAlmond

Reputation: 11

It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here

However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.

I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.

In your CSS add this:

#fixedbg { 
    background:url(../img/yourparallax-image.jpg) no-repeat center center;
    background-size:cover;
    height:100%;
    position:fixed !important;
    width:100%;
    z-index:-2;
    top:0;
}
.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%; 
}

Then in your html add this:

<div id="fixedbg"></div>

<header id="top" class="header">
</header>

<section id="article" class="article">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-12">

                <p class="text">Example text content goes here</p>

            </div>
        </div>
    </div>
</section>

The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.

I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.

Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.

Upvotes: 1

Related Questions