Parallax Save 3

components.parallax-component.js

import Ember from 'ember';

function clamp(min, val, max) {
	return Math.max(min, Math.min(val, max));
};

export default Ember.Component.extend({
  classNames: ['container'],
  
  _scrollTo: 0,
  
  didReceiveAttrs() {
    if (this.get('scrollTo') && this.get('_scrollTo') !== this.get('scrollTo.location')) {
     	const newScrollTo = this.get('scrollTo.location');
      this.animatedScroll(this.get('scrollTo'));
      this.set('_scrollTo', newScrollTo);
    }
  },
  
  didInsertElement: function() {
    this.bindScroll();
  },
  
  willDestroyElement: function() {
    this.unbindScrolling();
  }, 
    
  bindScroll() {
    Ember.run.scheduleOnce('afterRender', this, function() {
			const $e = this.element;
      
      const scrollHandler = (event) => {
        this.scrolled(event);
      };
      
    	$e.addEventListener("mousewheel", scrollHandler, false);
    	$e.addEventListener("DOMMouseScroll", scrollHandler, false);
    });
  },
  
  animatedScroll({ location, duration=1000, easing="swing" }) {
    this.$('.parallax').stop();
		this.$('.parallax').animate({
      scrollLeft: location
    },
    duration,
		easing);
  },
  
  scrolled(event) {
    var e = event;
    var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
    console.log(delta);
    
    const offset = this.get('_scrollTo');
    console.log(offset);

    var pst = clamp(0, offset + delta, 3755);
    this.set('_scrollTo', pst);
    this.$('.parallax').scrollLeft(pst);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
   	scrollTo(hash) {
			this.set('scrollTo', hash);
    } 
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  color: white;
  background: #050516;
}

.parallax {
  perspective: 1px;
  height: 304px;
  color: white;
  background-color: black;
  overflow-x: auto;
  overflow-y: hidden;
}

.parallax::-webkit-scrollbar {
  display: none;
}

.parallax__layer {
  position: absolute;
  transform-origin: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  width: 4000px;
  transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
  width: 3000px;
  transform: translateZ(-2px) scale(3);
}
.parallax__group {
  transform: translate3d(0px, 0, 0) rotate-y(30deg);
  position: relative;
  height: 304px;
  transform-style: preserve-3d;
}

.scroll-area {
 	width: 8000px;
  height: 304px;
}

.parallax.main-background {
 	background-repeat: repeat-x;
  background-image:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAEwCAIAAADgrWLEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAopJREFUeNrs2kFKw0AYhmHzK4JX6AG8d8/hTdy5EYSuslAUBVMC02Eyi59JF1087yKkX+LmIdhWnI7z6U7XKxAABQpUQIECFVCgQAUUKFCgAgoUqIACBSqgQIEKKFCgQAUUKFABBQpUQIECFVCgQIEKKFCgAgoUqIACBSqgQIECFVCgQAUUKFABBQoUqIACBSqgQIEKKFCgAgoUKFABBQpUQIECFVCgQAUUKFCgAgoUqIACBaoc6OHhsXufPblHc9P770/3h+3JPcqL+vJ6bh/YY329HGv75dw+tkf9xJabmifZnt9ji70u9rE9yrXmDvvYHttrjnuO08vn3PVunm17co/uk7x9I7Mn9/MT2nwUcL7nPChc93w6zqfu99P6Vnt+j2Ytn/vtY/vld6j8PRQoUAEFClRAgQIVUKBAgQooUKACejugz/df3fvsyT2am17/nro/bE/uUV7Ul9dz+8Ae6+vlWNsv5/axPeonttzUPMn2/B5b7HWxj+1RrjV32Mf22F5z3HOc3r4/ut7Ns21P7tF9krdvZPbkfn5Cm48CzvecB4Xrnp//+677/bS+1Z7fo1nL53772H75HSp/DwUKVECBAhVQoEAFFChQoAIKFKiAAgUqoECBCihQoEAFFChQAQUKVECBAgUqoECBCihQoAIKFKiAAgUKVECBAhVQoEAFFChQAQUKFKiAAgUqoECBCihQoAIKFChQAQUKVECBAhVQoECBCihQoAIKFKiAAgUqoECBAhVQoEAFFChQAQUKVECBAgUqoECBCihQoAIKFKiAAgUKVECBAhVQoEAFFChQoAIKFKiAAgUqoECBCihQoEAFFChQAQUKVECBAhVQoECBCujt9S/AALhGN5KVTdLwAAAAAElFTkSuQmCC'); 
}


.standalone.island {
  display: inline-block;
  width: 1000px;
  height: 100%;
}

.standalone.sea {
  display: inline-block;
  width: 112px;
  height: 100%;
}

.background {
 	background-repeat: repeat-x;
}

.background.clouds {
  background-position: bottom;
	background-image: url('data:image/png;base64,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');
}

.background.sea {
 background-position: bottom;
 background-image:
   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABgCAIAAABKVGGHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrsm0tuGzEMQOuCzgdZxL10T5E75ShxF0XseOEaSGAoMyMNNaQ0kvu4CmKKn0fq5xlvfr++/ED8RLb3Gyh4Au0u4oftfe6Qw+lYD2gYX03HdpqPT4+TOu9/330zyiqhxEaGoSQshlldMildktD+YX+s1uOxlDOmvNJr2A6xURcKlhwWF2nW6QDNIJcYvkm1vDU0bfSacCyBz/8rW75CiynR6HW+AdW0z6TRcePoW8m4MrS81stkfAPE7W9WrR+b+iV4Op7TCqXP3XJj1Hx5hY6UlqVoO8RSjQ1UBu1FLSt+pbIJ6DixhFdNQJM6Ay/KxGaha3w5THnjbErrZHWE76hxYHp2WUxEH659vY8pLENWoSoLyiYVgl42ZzvdLaWOm//nHPqTo3jr59DTx53dyPbuo1wYduM1gM5ydExDXzMXp2N3CbNy1Tb6LlR2Y7/HhqejnXWaUBDfqboArqNfR2T1prx7JxbKvByybKDjDMPgNIE6Qr+aWguQA9DP0EMo4d9ZK3QXPVVpyuvTuw0QHOwByk3JRd7+PKyY3q/nQ6NA9wouDX4FcilnZaayd+qg8+02XXqqDeKRnTm+sae1cq627CQSlH5bxhefVxb9PUaeXaPCxwO7ZjeldRk5Wi6NWDolpZQmOrQmhXHCvt5j1sqBlhaqutj7YvqWsqUj7PLdJmPtjZPgOnzS+9fBftfY0WfFMuhxT+54Yl9r0hFYSpWwPDAbahqbw4L78qmUvsIX2uIGZqvNsNDRZGoOa2ju+2rnhm9Z9kuXrPKVxyTHdPQa9O539gXvNsq5mcpvzLBa+JGl9PJLz17i5BEIQAEKUASgAAUoAlCAAhQBKEABClAEoAAFKAJQgAIUAShAAYoAFKAABSgCUIACFAEoQAGKABSgAEUAClCAAhQBKEABigAUoABFAApQgCIA9ZZ/AgwA/ClTsei7ZMsAAAAASUVORK5CYII=');
}

.background.island {
  background-position: bottom;
  background-repeat: no-repeat;
  background-image:
    url('data:image/png;base64,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');
}

templates.application.hbs

<h1>Side Scroll Parallax Example</h1>
{{parallax-component scrollTo=scrollTo}}
<br/>
<button {{action 'scrollTo' (hash location=0)}}>Scroll to Start</button>
<button {{action 'scrollTo' (hash location=1600)}}>Scroll To Location</button>
<button {{action 'scrollTo' (hash location=3755 duration=30000)}}>Slow Scroll to End</button>

templates.components.parallax-component.hbs

<div class="parallax main-background">
	<div class="scroll-area">
    <div class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
      	{{#each (range 0 5) as |n|}}
      		{{~parallax-island tagName=''~}}
        {{/each}}
      </div>
      <div class="parallax__layer parallax__layer--back  background sea">        
      </div>
      <div class="parallax__layer parallax__layer--deep  background clouds">
      </div>
    </div>
  </div>
</div>

templates.components.parallax-island.hbs

<div class="background island standalone"></div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-composable-helpers": "2.0.1"
  }
}