JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

.wrapper {
    width: 100%;
    height: 100%
    margin: 0 auto; 
    position: fixed;   
}

section{
    background: red
}

1
 
2
.wrapper {
3
    width: 100%;
4
    height: 100%
5
    margin: 0 auto; 
6
    position: fixed;   
7
}
8
 
9
section{
10
    background: red
11
}
12
 
13
img{
14
    -webkit-transform: scale(0.5);
15
    -moz-transform: scale(0.5);
16
    -o-transform: scale(0.5);
17
    -ms-transform: scale(0.5);
18
    transform: scale(0.5);
19
}
20
 
21
.scroller{
22
    height: 4000px;
23
}
 
JavaScript

1
var img =[]
2
 
3
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
4
  {
5
    tags: "mount rainier",
6
    tagmode: "any",
7
    format: "json"
8
  },
9
  function(data) {
10
    $.each(data.items, function(i,item){
11
     img.push(item.media.m);
12
    });
13
    var count = 5;
14
    for (i = 0; i <= count; i++){
15
$('section').append("<img src="+img[i]+">");      
16
    }
17
 
18
  });
19
// the constructor that will do all the work
20
function Zoomer( content ) {
21
  // keep track of DOM
22
  this.content = content;
23
  
24
  // position of vertical scroll
25
  this.scrolled = 0;
26
  // zero-based number of sections
27
  this.levels = 4;
 
CSS

1
 
img{
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.scroller{
    height: 4000px;
}

JavaScript

var img =[]

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
     img.push(item.media.m);
    });
    var count = 5;
    for (i = 0; i <= count; i++){
$('section').append("<img src="+img[i]+">");      
    }

  });
// the constructor that will do all the work
function Zoomer( content ) {
  // keep track of DOM
  this.content = content;
  
  // position of vertical scroll
  this.scrolled = 0;
  // zero-based number of sections
  this.levels = 4;
  // height of document
  this.docHeight = document.documentElement.offsetHeight;
  
  // bind Zoomer to scroll event
  window.addEventListener( 'scroll', this, false);
}

// enables constructor to be used within event listener
// like obj.addEventListener( eventName, this, false )
Zoomer.prototype.handleEvent = function( event ) {
  if ( this[event.type] ) {
    this[event.type](event);
  }
};

// triggered every time window scrolls
Zoomer.prototype.scroll = function( event ) {
  // normalize scroll value from 0 to 1
  this.scrolled = window.scrollY / ( this.docHeight - window.innerHeight );
};

// triggered every time window scrolls
Zoomer.prototype.scroll = function( event ) {
  // normalize scroll value from 0 to 1
  this.scrolled = window.scrollY / ( this.docHeight - window.innerHeight );
 
  var scale = Math.pow( 3, this.scrolled * this.levels ),
      transformValueBlur = 'blur('+scale+'px)';
  
  this.content.style.WebkitFilter = transformValueBlur;
  this.content.style.MozTransform = transformValueBlur;
  this.content.style.OTransform = transformValueBlur;
  this.content.style.transform = transformValueBlur;
};

Zoomer.prototype.scroll = function( event ) {
  // normalize scroll value from 0 to 1
  this.scrolled = window.scrollY / ( this.docHeight - window.innerHeight );
 
  var scaleSize = Math.pow( 3, this.scrolled * this.levels ),
     ...