EzDev.org

parallax

parallax - Parallax Engine that reacts to the orientation of a smart device parallax.js simple, lightweight parallax engine that reacts to the orientation of a smart device


(CSS) Make a background image scroll slower than everything else

here is is my CSS code for the body:

body {
padding: 0px;
margin: 0px;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey; 
background-size: 100%;

}

What I want to do is make it so that the image scrolls slower than everything else on the page to make a simple parallax effect. I've looked online and all of the examples I've seen are much more complicated than what I want.


Source: (StackOverflow)

iOS Parallax Scrolling effect (like in Yahoo News Digest app)

I would like to know how to implement parallax scrolling similar to Yahoo News Digest app. In which when user scroll horizontally background image scrolls in a different speed with the paging is enabled.

May be they do it with a ScrollView with a background view. Not exactly sure. Hint to implement such scrolling would be great. I have checked similar questions but couldn't find the answer I was looking for.


Source: (StackOverflow)

Smooth scrolling easing effect with mouse wheel [closed]

I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth.

I have been searching Google but I can't find anything similar.

Does anybody have any suggestions on how to replicate this effect with jQuery?


Source: (StackOverflow)

How can I monitor scroll position while scrolling in Safari on iOS?

I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.

In all desktop browsers foo() is called for each pixel the user scrolls, and everything is nice and dandy. In Safari on iOS, the scroll event is only fired AFTER the scrolling is finished.

I added $(window).bind('touchmove', foo); to make sure the function is called during the swipe in iOS, and it got me a little bit further. When user releases finger, the page continues to scroll, but the event stops firing.

Any ideas?


Source: (StackOverflow)

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item disappeared while the transformation is being done, only on Google Chrome. Remedy?


Source: (StackOverflow)

Sliding up image with Official Support Library 23.x.+ bottomSheet like google maps

Update
I want to accomplish the same behavior that google maps has with Support Library 23.x.+ and without ANY 3rd library

NOTE: this in not a duplicated question because:

  1. I want to use Behaviors, Support Library and without ANY 3rd party library (I added it in question title and above description)
  2. I wanted ALL behaviors that you see in next gif, the other questions are asking for one or two behaviors and using ANY WAY to achieve it.

    like you can see in this gif

I have already the Official bottomSheet working (even inside a tab and view pager).

What is making me going crazy is how to achieve the image behavior that come up from the BottomSheet when sliding up using official bottomSheet?.

I have tried using anchor like FAB with no success.
I read something about using a scroll listener but ppl said its not smooth and faster like google maps.

My XML (I don't think its going to help but anyway):

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.MasterActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?android:attr/borderlessButtonStyle"
                android:text="Departure"
                android:layout_gravity="center"
                android:id="@+id/buttonToolBar"
                />


        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@android:color/white"
            app:tabTextColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/colorAccent"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/asdf"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:behavior_peekHeight="100dp"
        android:fitsSystemWindows="true"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <LinearLayout
            android:id="@+id/qwert"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingBottom="16dp"
            android:background="@android:color/white"
            android:padding="15dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="BOOTOMSHEET TITLE"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button1"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 2"
                android:layout_margin="10dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 3"
                android:layout_margin="10dp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="text 4"
                android:layout_margin="10dp"/>


            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:background="@color/colorAccent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Your remaining content here"
                    android:textColor="@android:color/white" />

            </FrameLayout>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/asdf"
        app:layout_anchorGravity="top|right|end"
        android:src="@drawable/abc_ic_search_api_mtrl_alpha_copy"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

</android.support.design.widget.CoordinatorLayout>

Source: (StackOverflow)

Enable smooth scrolling for my website in all browsers

I'm developing a parallax scrolling website using the Stellar and Skrollr libraries. The website behaves perfectly in Firefox because of Firefox's smooth scrolling feature, but in Chrome, scrolling with the mouse wheel is jerky, and the parallax effect is almost ruined. Is there any way to get the smooth scrolling with the mouse wheel in all browsers while maintaining performance?


Source: (StackOverflow)

How to get the core part - that does the trick - of parallax work?

I tried to experiment with parallax and started from scratch to understand the core parts of this magic. To give you an example that I like to use as inspiration, you can see it at this link here at the "Photos" section.

Latest code is down the page with related information. To get an overall look of the question see the rest of the details.

Core parts I already know are the scrollTop() of the $window and the offsetTop of the element are important to apply the parallax effect on a DOM element as well as a factor for how sensitive the effect should be respond to the scroll speed. The end result should be some formule that will calculate the translateY or translate3d coordinates in pixels or percentage.

I read on the internet that the CSS property translate is faster than, for example, top from position: absolute, and my preference would be also to use translate in combination with TweenMax GSAP. So the movement of the parallax will be very smooth. But if only the css property translate is enough that's fine too. I saw some examples that where using TweenMax, so that's why I use it for now.

JS

I have code the basic things:

var win = $(window);
var el = $('#daily .entry').find('figure');

win.scroll(function() {
  var scrollTop = win.scrollTop();
  var parallaxFactor = 5;

  el.each(function() {
    var image = $(this).find('img');
    var offsetTop = $(this).offset().top;

    // This is the part where I am talking about. 
    // Here should be the magic happen...

  });
});

So I've code above code, but it doesn't do anything, of course. See CodePen from above code here. It will only console log scrollTop and offsetTop. As mentioned before, I only know the core parts like scrollTop and offsetTop to apply the parallax effect. Then there should be some area created where the parallax effect will be triggered and happen, so calculations will be only done for elements within the viewport in order to keep the performance good. After that there should be some math done, but doesn't know exactly what or how to achieve this. Only after I have a final number, I could use it within for example TweenMax from Greensock like so:

TweenMax

TweenMax.to(image, 0.1, {
    yPercent: offsetPercent + '%',
    ease: Linear.easeNone
});

Parallax formula

If I look around to get the formula down I came to something like this (founded on the internet):

var viewportOffset = scrollTop - offsetTop + win.height();
var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;

if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {
    TweenMax.to(image, 0.1, {
        yPercent: offsetPercent + '%',
        ease: Linear.easeNone
    });
}

But if I am honest, I doesn't know what this does exactly, or why it should/could be this way. I would like to know this, so I can understand the whole process of making parallax happen. The functions of scrollTop(), offsetTop and $(window).height() are clear for me, but what the trick behind the formula is, is the part that I doesn't understand.

Updates

Update 1

@Scott has notified that the inspiration site uses a plugin called scrollmagic.io, but I am very curious about how I can create a parallax by myself without the use of a plugin. How it works and how to achieve it. With emphasis on the formula, why I should it do this or that way and what exactly will be calculated, because I don't understand it and really wanna know this, so that I can use this knowledge in the future when applying a parallax effect.

Update 2

Last day I tried to figure out what the following code snippet exactly does. I talking about this one:

var viewportOffset = scrollTop - offsetTop + win.height();

After some good debug sessions I think that I've the clue. So scrollTop is the amount of pixels that you've scrolled down the page and that are hidden from the view. offsetTop is the start position of the element within the DOM and $(window).height is the viewport height - the part that is visible in the browser -.

This is what I think that this formula does:

Set the zero point to the point where the element starts. For example, when scrollTop is equal to 0 and the element starts at 240px from the top, then the formula is: 0 minus 240 is -240. So the current scroll position is below zero point. After scrolling 240px down, the formula will output 0 because of course 240 minus 240 is 0 (zero). Am I right?

But the part that I doesn't understand yet is why + win.height. If we go back to above formula (at Update 2) and scrollTop is zero then the $(window).height is the space from 240px till the bottom of the viewport. When scrolling down, the amount of pixel will grow on scroll, that makes no sense to me. If someone can explain what could have been the purpose of this would be fine. 'm very curious. The second part of the formula to calculate the parallax offsetPercent I still don't understand. In general the calculation of the parallax strength on scroll.

Update 3 / 4

Advised by @Edisoni, I walked the last few days by the videos of Travis Neilson and I have become a lot wiser on the basic functionalities of parallax. A must for everyone who wants to dig in parallax. I've used the new knowledge about parallax to get my above script work:

var root = this;
var win = $(window);
var offset = 0;

var elements = $('#daily .entry figure');

if (win.width() >= 768) {
    win.scroll(function() {

        // Get current scroll position
        var scrollPos = win.scrollTop();
        console.log(scrollPos);

        elements.each(function(i) {
            var elem = $(this);
            var triggerElement = elem.offset().top;
            var elemHeight = elem.height();
            var animElem = elem.find('img');

            if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
                // Do the magic
                TweenMax.to(animElem, 0.1, {
                    yPercent: -(scrollPos - elemHeight / 2) / 100, 
                    ease: Linear.easeNone
                });

            } else {
                return false;
            }

        });

    });

}

However, the script works only for a certain part of the elements and hope someone can help me with this. The problem is that it only works for the first two elements. I have a suspicion that the "error" is located in particularly after the AND && sign in the if statement, but can't get the error solved. http://codepen.io/anon/pen/XKwBAB

When the elements, that work on the trigger are animated, they will be jumping some pixels to the bottom, don't know how to fix this to. The jumping to: 1.135%, after the trigger is fired. So it doesn't start at 0%. I already checked if I should add the CSS property translate to the CSS and set the type of number to %, but this doesn't work for me.

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);

Should I use the TweenMax .fromTo() function instead of using the .to() function so I can set the start position as well or is my thought about this wrong and has a different cause?

Something like this:

TweenMax.fromTo(animElem, 0.1, {
    yPercent: triggerElement,
    z: 1
}, {
    yPercent: -(scrollPos - elemHeight / 2) / 100,
    ease: Linear.easeNone
});

Beside that I trying to recreate the effect of the site that I would like to use as inspiration source without the use of the scrollMagic plugin, but I don't really know how this works, with the use of two different objects that are animated.

At last, if someone thinks the code can be better formatted, don't hesitate, I would like to hear your suggestions

My actual questions are for update 2 and 3/4:

  1. How to calculate the parallax y coordinates to get "the magic" done?
  2. Am I right about update 2, that the zero point will be reset to offsetTop of each element?
  3. Why my code only works for the first two elements and why they jumping some pixels down if the inline style of translate will be added to the animated element? See update 3/4 for all info.

Source: (StackOverflow)

Horizontal CSS only parallax effect with layers greater than 100vw

How to bootstrap a site with horizontal CSS only parallax effect?

Requirements

  • CSS only parallax
  • parent layer must have width/height == 100vw/100vh
  • child layers must have width/height > 100vw/100vh
  • child layers must visually align 100% with parent layers width
    • by now the child layers technically do have 100% of parents width but due to the perspective they visually don't appear to take 100% of parents width
  • child layers (except the first) must have a top offset relative to its parent
  • results must base on calculations to have maximum flexibility
  • must be cross browser solid (at least newest version of majors)

enter image description here


What I have done so far

Actually this question is a follow-up question.
Here's a PEN with my current mockup state in SASS or CSS.

Working Simulated Example (jQuery)

In JavaScript its quite simple to achieve what I'm looking for. So here is a PEN that simulates the effect I'd like to mimic with CSS.

Already known Issues

The issue I'm most concerned about by now is the fact, that browser seem to render this scenario differently. See screenshot of browser window (chrome vs ff) scrolled to the right bottom corner below. But I hope this could be avoided.

enter image description here


There are so many parallax tutorials out there. Why is this different?

Actually I researched really a lot but didn't find not even one description how to implement horizontal parallax (means the child layers have a width > 100vw). Of course there are horizontal parallax scroll tuts out there. But they all have one in common: the child layer widths are always <= 100vw - and thats actually the difference.

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#projection {
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-perspective-origin: 0 0;
  perspective-origin: 0 0;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.pro {
  -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px);
  transform: scale(1) translate(0px, 0px) translateZ(0px);
  height: 100%;
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 100%;
}

.pro--1 {
  -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px);
  transform: scale(4) translate(0px, 0px) translateZ(-3px);
  width: 110%;
}

.pro--2 {
  -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px);
  transform: scale(3) translate(0px, 1em) translateZ(-2px);
  width: 110%;
}

.pro--3 {
  -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px);
  transform: scale(2) translate(0px, 2em) translateZ(-1px);
  width: 110%;
}

.pro {
  background: rgba(0, 0, 0, 0.33);
  box-shadow: inset 0 0 0 5px orange;
  color: orange;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
}

.pro--2 {
  box-shadow: inset 0 0 0 5px green;
  color: green;
}

.pro--3 {
  box-shadow: inset 0 0 0 5px blue;
  color: blue;
}
<div id="projection">
  <div class="pro pro--1">pro--1</div>
  <div class="pro pro--2">pro--2</div>
  <div class="pro pro--3">pro--3</div>
</div>


Source: (StackOverflow)

Skrollr init set height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.

The problem can be seen here: http://codepen.io/designil/pen/Ggxde

HTML:

<div class="headrow">
<div class="container">
  <div class="row">

    <div class="col-md-3">
      <h1 class="logo"><a rel='nofollow' href="#">21GUNS</a></h1>
    </div>

    <div class="col-md-9">
      <div class="topmenu">
        <p>
          <a rel='nofollow' href="#"><i class="fa fa-twitter"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-facebook"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-linkedin"></i></a>
          <a rel='nofollow' href="#"><i class="fa fa-pinterest"></i></a>
        </p>
        <ul class="list-unstyled">
          <li>
           <div class="dropdown">
  <a data-toggle="dropdown" rel='nofollow' href="#">MENU 1</a>
  <ul class="dropdown-menu" role="menu">
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" rel='nofollow' href="#">Separated link</a></li>
  </ul>
</div>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 2</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 3</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 4</a>
          </li>
          <li>
            <a rel='nofollow' href="#">MENU 5</a>
          </li>
        </ul>
       </div>
    </div>
  </div>
</div>
</div><!-- headrow -->

<div class="bannerrow">
  <img src="http://placehold.it/1800x600" alt="" />
</div>

<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <header>
          <h2>21SERVICES</h2>
          <p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
        </header>
      </div>
    </div><!-- row -->

    <div class="row">
      <div class="col-md-5">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
      <div class="col-md-5 col-md-offset-2">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
    </div><!-- row -->

    <div class="row">
      <div class="col-md-5">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
      <div class="col-md-5 col-md-offset-2">
        <div class="column2-box">
          <i class="fa fa-gift fa-fw"></i>
          <h3>FLAT DESIGN</h3>
          <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
        </div>
      </div>
    </div><!-- row -->


  </div>
</div>

<link rel="stylesheet" rel='nofollow' href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>

CSS:

@blue: #293448;
@red: #C1392B;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
}

.headrow {
  background: @blue;
}

.logo a {
  color: #fff;
  transition: 0.3s;

  &:hover {
    text-decoration: none;
    color: #eee;
  }
}

.topmenu {
  text-align: right;

  p {
    margin-top: 10px;

    a {
      display: inline-block;
      margin: 0 5px;
      text-align: right;
    }
  }

  ul {
    margin-bottom: 0;
  }

  li {
    display: inline-block;
    margin-left: 30px;

    a {
      color: #eee;
      display: block;
      padding-bottom: 10px;
      border-bottom: 3px solid transparent;
      transition: 0.3s;
    }

    a:hover {
      text-decoration: none;
      border-bottom: 3px solid @red;
    }

    .dropdown-menu {
      text-align: left;

      li {
        margin: 0;
        display: block;
      }

      a:hover {
        background: #ccc;
      }

      a {
        color: @blue;
        border: 0;
        transition: 0;
      }
    }
  }
}

.bannerrow {
  img { width: 100%; height: auto;}
}

.servicerow {
  color: #fff;
  padding-bottom: 100px;
  background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
  background-size: cover;

  header {
    margin-top: 60px;
    margin-bottom: 20px;

    h2 { margin-bottom: 10px; }

    p { font-size: 13pt; }
  }
}
  .column2-box {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 15px 0;

    i { font-size: 110px; float: left; }

    h3 { margin-top: 0; }

  }

JS:

$(function() {
  $('.dropdown-toggle').dropdown();

   $('.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });

  var s = skrollr.init({forceHeight: false});
});

I am not sure which element makes the page too high.


Source: (StackOverflow)

Jquery Parallax Scrolling effect - Multi directional

I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT

I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate. Could anyone please point me in a the right direction?

Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!


Source: (StackOverflow)

Parallax scrolling with CSS only?

I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique.

However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am only proficient with CSS3.

Can parallax scrolling be implemented with CSS3 only(with HTML5 if needed), instead of using jquery plugins? It would be nice if I could be pointed to some tutorials for the same.

Note: This is close to the effect I want to produce(http://jessandruss.us/)


Source: (StackOverflow)

How can I make a parallax scrolling site that works on iOS and desktop?

Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT

The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.

I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.

Any help is appreciated.


Source: (StackOverflow)

How do I create a parallax effect without using a background-image?

I am trying to create a parallax effect without using background-image with background-attachment: fixed, as background-attachment: fixed doesn't work on iOS so well. Here's what I came up with:

HTML

<article class="twentyseventeen-panel">
  <div class="panel-image">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" >
      <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" />
    </div>
  </div>
</article>

CSS

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}
.panel-image {
    position: relative;
    height: 100vh;
    max-height: 200px;
}

Now I am stuck on getting to image to scroll to do the parallax effect. I have tried setting the image to a fixed position, but my image no longer appears when I do that. How do I get this image to have a parallax effect?


Source: (StackOverflow)

iOS 7 parallax effect in my view controller

I'm developing an app for iOS 7 in Objective-C. I've got a screen in my app with a few buttons and a pretty background image. (It's a simple xib with UIButtons on top of a UIImageView.)

I was thinking that it'd be cool if those buttons had the parallax effect that the iOS 7 home screen has, so if you tilt the phone you could see the background.

How can I implement that effect in my own app?


Source: (StackOverflow)