Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
	<head>
		<title>TremulaJS</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		

		<link rel="stylesheet" href="https://garris.github.io/TremulaJS/dist/Tremula.css">

		<style type="text/css"></style>
		
		<script src="https://garris.github.io/TremulaJS/libs/jquery-min.js"></script>
		<script src="https://garris.github.io/TremulaJS/libs/hammer.js"></script>
		<script src="https://garris.github.io/TremulaJS/libs/jsBezier-0.6.js"></script>

		<script src="https://garris.github.io/TremulaJS/dist/Tremula.js"></script>

	</head>

	<body>
    <div class="pageLayoutContainer">
 		 <a class="plug" href="https://github.com/garris/TremulaJS" target="_blank">TremulaJS on Github</a>
			<div class="tremulaContainer"></div>
			<h1><a href="https://github.com/garris/TremulaJS" target="_blank">TremulaJS</a></h1>
       <span class="cta">Swipe, Scroll, Click & Drag</span>
    </div>
	</body>
	
</html>



            
          
!
            
              			@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
	
			body{
				font-family: 'Yanone Kaffeesatz', sans-serif;
				background-color: #ddd;
			}

			*{
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;				
			}

			a{color:inherit;text-decoration:none;}			

			h1{
        color: rgba(0, 0, 0, 0.19);
        z-index: 0;
        position: absolute;
        right: 20px;
        bottom: 0;
        font-size: 40px;
        line-height:50px;
        padding: 0;
        margin: 0;
        text-shadow: 0px 1px 1px  rgba(255,255,255,1);
        display:inline-block;
			}
			.plug{padding:15px 20px;position:absolute;}
			.cta{
        font-size:25px;
        color:#666;
        padding: 0;
        margin: 0;
        position: absolute;
        left: 20px;
        bottom: 0;
        line-height:40px;
       }

			/* === Tremula Styles === */

			/* Note: any gridBox border added must be compensated for by adding negative margin */
			.gridBox{
				border:#fff 10px solid;
				margin: -10px 0 0 -10px;
			}
        
        .moneyShot{
          width:100%;
        }

			/* .tremulaContainer must have actual dimentionality (set H&W) */
			.tremulaContainer{
				height:60%;
				height:calc(100% - 120px);
				width:90%;
				position:relative;
				top:20px;
				left:0;
				z-index: 1;
				margin:25px auto;
				border: black solid 1px;
			}

			.pageLayoutContainer{
				height:100%;
				width:100%;
				position:fixed;
				top:0;
				left:0;
				margin:0;
				border: black solid 1px;
			}
            
          
!
            
                $(document).ready(function(){
    setTimeout(function(){
      window.tremula = createTremula();
      applyBoxClick();
      loadFlickr()
    },0);
  });



  function createTremula(){

    // .tremulaContainer must exist and have actual dimentionality 
    // requires display:block with an explicitly defined H & W
    $tremulaContainer = $('.tremulaContainer');

    //this creates a hook to a new Tremula instance
    var tremula = new Tremula();

    //Create a config object -- this is how most default behaivior is set.
    //see updateConfig(prop_val_object,refreshStreamFlag) method to change properties of a running instance
    var config = {

      //Size of the static axis in pixels
       //If your scroll axis is set to 'x' then this will be the normalized height of your content blocks.
       //If your scroll axis is set to 'y' then this will be the normalized width of your content blocks.
      itemConstraint      :150,//px

      //Margin in px added to each side of each content item
      itemMargins         :[10,10],//x (left & right), y (top & bottom) in px

      //Display offset of static axis (static axis is the non-scrolling dimention)
      staticAxisOffset    :0,//px

      //Display offset of scroll axis (this is the amount of scrollable area added before the first content block)
      scrollAxisOffset    :20,//px

      //Sets the scroll axis 'x'|'y'.
      //NOTE: projections generally only work with one scroll axis
      //when changeing this value, make sure to use a compatible projection
      scrollAxis          :'x',//'x'|'y'

      //surfaceMap is the projection/3d-effect which will be used to display grid content
      //following is a list of built-in projections with their corresponding scroll direction
      //NOTE: Using a projection with an incompatible Grid or Grid-Direction will result in-not-so awesome results
      //----------------------
      // (x or y) xyPlain
      // (x) streamHorizontal
      // (y) pinterest
      // (x) mountain
      // (x) turntable
      // (x) enterTheDragon
      //----------------------
      surfaceMap          :tremula.projections.mountain,

      //how many rows (or colums) to display.  note: this is zero based -- so a value of 0 means there will be one row/column
      staticAxisCount     :2,//zero based 

      //the grid that will be used to project content
      //NOTE: Generally, this will stay the same and various surface map projections
      //will be used to create various 3d positioning effects
      defaultLayout       :tremula.layouts.xyPlain,

      //it does not look like this actually got implemented so, don't worry about it ;)
      itemPreloading      :true,

      //enables the item-level momentum envelope
      itemEasing          :false,

      //enables looping with the current seet of results
      isLooping         	:false,

      //if item-level easing is enabled, it will use the following parameters
      //NOTE: this is experimental. This effect can make people queasy.
      itemEasingParams    :{
        touchCurve          :tremula.easings.easeOutCubic,
        swipeCurve          :tremula.easings.easeOutCubic,
        transitionCurve     :tremula.easings.easeOutElastic,
        easeTime            :500,
        springLimit         :40 //in px
      },

      //method called after each frame is painted. Passes internal parameter object.
      //see fn definition below
      onChangePub					: doScrollEvents,

      //content/stream data can optionally be passed in on init()
      data                : null,

      // lastContentBlock enables a persistant content block to exist at the end of the stream at all times.
      // Common use case is to target $('.lastContentItem') with a conditional loading spinner when API is churning.
      lastContentBlock 		: {
        template :'<div class="lastContentItem"></div>',
        layoutType :'tremulaBlockItem',
        noScaling:true,
        w:300,
        h:300,
        isLastContentBlock:true,	
        adapter:tremula.dataAdapters.TremulaItem
      },

      //dafault data adapter method which is called on each data item -- this is used if none is supplied during an import operation
      //enables easy adaptation of arbitrary API data formats -- see flickr example
      adapter             :null

    };

    //initalize the tremula instance with 3 parameters: 
    //a DOM container, a config object, and a parent context
    tremula.init($tremulaContainer,config,this);

    //return the tremula hook 
    return tremula;
  }

  //This method is called on each paint frame thus enabling low level behaivior control
  //it receives a single parameter object of internal instance states
  //NOTE: below is a simple example of infinate scrolling where new item
  //requests are made when the user scrolls past the existing 70% mark.
  //
  //Another option here is multiple tremula instancechaining i.e. follow the scroll events of another tremula instance.
  //use case of this may be one tremula displaying close up data view while another may be an overview.
  function doScrollEvents(o){
    if(o.scrollProgress>.7){
      if(!tremula.cache.endOfScrollFlag){
        tremula.cache.endOfScrollFlag = true;
        pageCtr++;
        loadFlickr();
        console.log('END OF SCROLL!')
      }
    }
  };


  //Basic example of API integration
  //=================================
  //DATA FUNCTIONS OF NOTE: 
  //tremula.refreshData(returned_set_array,dataAdapter)//replaces current data set with returned_set_array
  //tremula.appendData(returned_set_array,dataAdapter)//appends current data set with returned_set_array
  //tremula.insertData(returned_set_array,dataAdapter)//prepends current data set with returned_set_array
  //=================================
  /* SIZE SUFFIX FOR FLICKR IMAGE URLS ===> must be set in method below also
  s	small square 75x75
  q	large square 150x150
  t	thumbnail, 100 on longest side
  m	small, 240 on longest side
  n	small, 320 on longest side
  -	medium, 500 on longest side
  z	medium 640, 640 on longest side
  c	medium 800, 800 on longest side†
  b	large, 1024 on longest side*
  o	original image, either a jpg, gif or png, depending on source format
  */
  var pageCtr = 1;
  function loadFlickr(){
    var dataUrl = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c149b994c54c114bd7836b61539eec2e&tags=street+art&format=json&page='+pageCtr+'&extras=url_n';
    $.ajax({
      url:dataUrl
      ,dataType: 'jsonp'
      ,jsonp: 'jsoncallback' 
    })
    .done(function(res){
      console.log('API success',res);
      if (res.stat=='fail')alert('Dang. Looks like Flickr has lost its pancakes... '+res.message);
      var rs = res.photos.photo.filter(function(o,i){return o.height_n > o.width_n * .5});//filter out any with a really wide aspect ratio.
      tremula.appendData(rs,flickrDataAdapter);//flicker
      tremula.cache.endOfScrollFlag = false;
    })
    .fail( function(d,config,err){console.log('API FAIL. '+err) })}

  // DATA ADAPTER EXAMPLE
  //=====================
  // flickrDataAdapter() is for use with the flickr API
  // https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c149b994c54c114bd7836b61539eec2e&tags=sky%2C+night%2C+day&format=json&page=1

  /* SIZE SUFFIX FOR FLICKR IMAGE URLS ===> must be set in above method also
  s	small square 75x75
  q	large square 150x150
  t	thumbnail, 100 on longest side
  m	small, 240 on longest side
  n	small, 320 on longest side
  -	medium, 500 on longest side
  z	medium 640, 640 on longest side
  c	medium 800, 800 on longest side†
  b	large, 1024 on longest side*
  o	original image, either a jpg, gif or png, depending on source format
  */

  function flickrDataAdapter(data,env){
    this.data = data;
    this.w = this.width = data.width_n;
    this.h = this.height = data.height_n;
    this.imgUrl = data.url_n;
    this.auxClassList = "flickrRS";//stamp each mapped item with map ID 
    this.template = this.data.template||('<img draggable="false" class="moneyShot" onload="imageLoaded(this)" src=""/>');
  }

  // updateConfig() enables updating of configuration parameters after an instance is running.
  // adding an optional true parameter will force a tremula grid redraw with the new parameter in effect
  // ----------------------------
  // EXAMPLE: tremula.Grid.updateConfig({itemConstraint:100},true);
  // ----------------------------

  // Use toggleScrollAxis() to set the scrollAxis, 
  // see: surfaceMap projection compatibility list above to ensure the projection is compatible with the scrollAxis value
  // ----------------------------
  // EXAMPLE: tremula.Grid.toggleScrollAxis('y'); 
  // ----------------------------

  function applyBoxClick(){
    $('.tremulaContainer').on('tremulaItemSelect',function(gestureEvt,domEvt){
      // console.log(gestureEvt,domEvt)
      var 
        $e = $(domEvt.target);
        t = $e.closest('.gridBox')[0];
      if(t){
        var data = $.data(t).model.model.data;
      }
      if(data)alert(JSON.stringify(data));
    })
  }


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console