RxJS - Parallax sample animation POC

In this example below you will see how to do a RxJS - Parallax sample animation POC with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" class="html">

<head>
  <meta charset="UTF-8">
  <title>RxJS - Parallax sample animation POC</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="c-parallax">
  <div id="tower1" class="c-parallax__layer"></div>
  <div id="tower2" class="c-parallax__layer"></div>
  <div id="tower3" class="c-parallax__layer"></div>
  <div id="tower4" class="c-parallax__layer"></div>
</div>

<div class="c-content u-skew">
  <div class="l-container u-fadeInUp">
  <h1>Hello world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dignissimos, temporibus cumque perspiciatis necessitatibus officiis illum facere eaque dolore, accusamus delectus tempora aperiam ratione corrupti eligendi tempore magni molestiae nam.</p>
</div>
</div>
  <script src='http://unpkg.com/rxjs/bundles/Rx.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/rxjs-parallax-sample-animation-poc-wdjyrv */
body {
  margin: 0;
}

.c-parallax {
  position: relative;
  height: 500px;
  overflow: hidden;
  background-image: linear-gradient(120deg, #70e1f5 0%, #ffd194 100%);
  opacity: var(--scroll-factor);
}

.c-parallax__layer {
  position: absolute;
  background-position: bottom center;
  background-size: auto 500px;
  background-repeat: repeat-x;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

#tower1 {
  background-image: url("https://accelerateur.startup-palace.com/img/tower-4.png");
  transform: translate3d(0, calc(var(--scroll-top) * 10 / 100), 0);
}

#tower2 {
  background-image: url("https://accelerateur.startup-palace.com/img/tower-3.png");
  transform: translate3d(0, calc(var(--scroll-top) * 40 / 100), 0);
}

#tower3 {
  background-image: url("https://accelerateur.startup-palace.com/img/tower-2.png");
  transform: translate3d(0, calc(var(--scroll-top) * 60 / 100), 0);
}

#tower4 {
  background-image: url("https://accelerateur.startup-palace.com/img/tower-1.png");
  transform: translate3d(0, calc(var(--scroll-top) * 90 / 100), 0);
}

.u-skew:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0;
  background: white;
  transform: skewY(-8deg);
  box-shadow: 0 -10px 15px 0px rgba(0, 0, 0, 0.3);
}

.c-content {
  position: relative;
  padding: 100px 0;
}

.l-container {
  position: relative;
  max-width: 1200px;
  min-width: 300px;
  width: 70%;
  margin: auto;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.u-fadeInUp {
  animation: fadeInUp 1s linear;
}


/*Downloaded from https://www.codeseek.co/tibomahe/rxjs-parallax-sample-animation-poc-wdjyrv */
var options = {
  reference: document,
  parallax: document.querySelector('.c-parallax'),
  parallaxHeight: 500,
  tower1: document.querySelector('#tower1'),
  tower2: document.querySelector('#tower2'),
  tower3: document.querySelector('#tower3'),
  tower4: document.querySelector('#tower4'),
  skew: document.querySelector('.js-skew'),
  deskew: document.querySelector('.js-deskew'),
}

var scroll$ = Rx.Observable
  .fromEvent(options.reference, 'scroll')
  /*.map(function(t) { 
    console.log(t);
  })*/
  .subscribe(function(elm) {
    
    console.log(elm);
    
    var scrollTop = elm.target.scrollingElement.scrollTop;
    var factorScroll =  scrollTop / options.parallaxHeight;
    
    document.documentElement.style.setProperty('--scroll-factor', `${ 1 - factorScroll}`);
    document.documentElement.style.setProperty('--scroll-top', `${scrollTop}px`);
    
    /* Fade background */   
    // options.parallax.style.opacity = `${ 1 - factorScroll}`;
    /* Parallax tower*/
    // options.tower1.style.transform = `translate3d(0, ${scrollTop * 10 / 100}px, 0)`;
    // options.tower2.style.transform = `translate3d(0, ${scrollTop * 40 / 100}px, 0)`;
    // options.tower3.style.transform = `translate3d(0, ${scrollTop * 60 / 100}px, 0)`;
  });

Comments