Alive.CSS

Better than scroll library

by philll_t

HTML

<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div class="fade_in">
    Welcome
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div class="fade_in">
    This one should come alive
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div class="color_change">
    Element changes color
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div class="fade_in">
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>
<div>
    Element here
</div>

CSS

div {
  padding: 20px;
  opacity: 0.0;
  transition: 1s;
}



.add_color {
  color: green;
  opacity: 1;
}

JavaScript

class Alive {
  
	constructor (script, parent = "body", options = {refresh : 500}) {
  		this._parent = document.querySelector(parent);
      this._script = script;
      this._options = options;
      
      
      
      this.start = this.start.bind(this);
      this._lifeCycle = this._lifeCycle.bind(this);
      this._elementsInView = this._elementsInView.bind(this);
      this._buildMasterQuerySelector = this._buildMasterQuerySelector.bind(this);
      this._elementPercentageInView = this._elementPercentageInView.bind(this);
      this._distributeScript = this._distributeScript.bind(this);
      
      this._masterQuerySelector = this._buildMasterQuerySelector();
      this._distributeScript();
  }
  
  start () {
      this._interval = setInterval(this._lifeCycle, this._options.refresh);  	
  }
  
  stop () {
      clearInterval(this._interval);
  }
  
  _buildMasterQuerySelector () {
  	return Object.keys(this._script).toString();
  }
  
  _distributeScript () {
  	const script = this._script;
    
     Object.keys(script).forEach(selector => {
         const elements = this._parent.querySelectorAll(selector);
         
         Array.prototype.forEach.call(elements, (element) => {
             Object.keys(script[selector]).forEach(properties => {
             		element.setAttribute("data-alive-on", properties);
                element.setAttribute("data-alive-style", script[selector][properties]);
             })
             
         })
     });
  }
  
  _lifeCycle () {
      const elementsInView = this._elementsInView();
      
      elementsInView.forEach(element => {
     			this._handleAnimate(element);
      });
      
  }
  
  _handleAnimate(element) {
  		// should animate based on percent
      const alive_on = element.getAttribute('data-alive-on');
      const alive_style = element.getAttribute('data-alive-style');
      const percent = this._elementPercentageInView(element);
      
      // strip out percent symbol
      const element_percent =...