{"action":"created","issue":{"url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/2","repository_url":"https://api.github.com/repos/vivkay/push-page-navigation","labels_url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/2/comments","events_url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/2/events","html_url":"https://github.com/vivkay/push-page-navigation/issues/2","id":131991158,"number":2,"title":"parallax ","user":{"login":"vivkay","id":6340292,"avatar_url":"https://avatars.githubusercontent.com/u/6340292?v=3","gravatar_id":"","url":"https://api.github.com/users/vivkay","html_url":"https://github.com/vivkay","followers_url":"https://api.github.com/users/vivkay/followers","following_url":"https://api.github.com/users/vivkay/following{/other_user}","gists_url":"https://api.github.com/users/vivkay/gists{/gist_id}","starred_url":"https://api.github.com/users/vivkay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vivkay/subscriptions","organizations_url":"https://api.github.com/users/vivkay/orgs","repos_url":"https://api.github.com/users/vivkay/repos","events_url":"https://api.github.com/users/vivkay/events{/privacy}","received_events_url":"https://api.github.com/users/vivkay/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/vivkay/push-page-navigation/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-07T17:52:06Z","updated_at":"2016-02-08T16:08:56Z","closed_at":null,"body":"Hi @thomasjbradley, \r\n\r\nI'm trying to add css parallax on this site using your tutorial here: https://www.youtube.com/watch?v=n9zLJ0I8Djk \r\n\r\nI get stuck when adding the transform:translateZ property (-1px). Nothing seems to happen. \r\n\r\nI'm not sure if there are other elements on the body interfering with this property? (I'm adding this to our push-navigation exercise, but am not sure where to look for potential conflicts). \r\n\r\nHere's what I have added for the parallax:\r\n\r\n```\r\nhtml {\r\n\tbox-sizing: border-box;\r\n\t-moz-text-size-adjust: 100%;\r\n\t-ms-text-size-adjust: 100%;\r\n\t-webkit-text-size-adjust: 100%;\r\n\ttext-size-adjust: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n*, *:before, *:after {\r\n\tbox-sizing: inherit;\r\n}\r\n\r\nbody{\r\n  font-family: sans-serif;\r\n  @include zero;\r\n  // Hides close button if there is no js\r\n  &.noscript .close-btn,\r\n  &.noscript .toggle-btn{\r\n      display: none;\r\n  }\r\n  height: 100vh;\r\n  margin: 0;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  -webkit-overflow-scrolling: touch;\r\n\r\n  -webkit-perspective: 1px;\r\n  perspective: 1px;\r\n}\r\n\r\n.parallax-group {\r\n  -webkit-transform-style: preserve-3d;\r\n  transform-style: preserve-3d;\r\n}\r\n\r\n.parallax-back {\r\n  width: 100%;\r\n  transform: translateZ(-1px);\r\n}\r\n\r\n```\r\n\r\nand the corresponding HTML is:\r\n\r\n```\r\n          <div class=\"parallax-group\">\r\n            <img class=\"parallax-back\" src=\"img/billboard.jpg\" alt=\"\">\r\n            <h1 class=\"parallax-front\">We act to conserve threatened species and ecosystems worldwide</h1>\r\n          </div>\r\n```\r\n\r\nWould you recommend a javascript parallax technique instead, or am I missing something on this one?\r\n\r\nThanks SO much!\r\n\r\nViv"},"comment":{"url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/comments/181442981","html_url":"https://github.com/vivkay/push-page-navigation/issues/2#issuecomment-181442981","issue_url":"https://api.github.com/repos/vivkay/push-page-navigation/issues/2","id":181442981,"user":{"login":"thomasjbradley","id":105192,"avatar_url":"https://avatars.githubusercontent.com/u/105192?v=3","gravatar_id":"","url":"https://api.github.com/users/thomasjbradley","html_url":"https://github.com/thomasjbradley","followers_url":"https://api.github.com/users/thomasjbradley/followers","following_url":"https://api.github.com/users/thomasjbradley/following{/other_user}","gists_url":"https://api.github.com/users/thomasjbradley/gists{/gist_id}","starred_url":"https://api.github.com/users/thomasjbradley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thomasjbradley/subscriptions","organizations_url":"https://api.github.com/users/thomasjbradley/orgs","repos_url":"https://api.github.com/users/thomasjbradley/repos","events_url":"https://api.github.com/users/thomasjbradley/events{/privacy}","received_events_url":"https://api.github.com/users/thomasjbradley/received_events","type":"User","site_admin":false},"created_at":"2016-02-08T16:08:55Z","updated_at":"2016-02-08T16:08:55Z","body":"I think it’s because of the `.site-wrapper`, `.sliding-canvas` and `.header`. I believe the `.parallax-group` must be directly inside the `<body>`.\r\n\r\nIn this situation, maybe JS parallax would work better for you."}}