LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
		TremulaJS
		
		

		

		
		
		
		
		

		

	

	
    
TremulaJS on Github

TremulaJS

Swipe, Scroll, Click & Drag
CSS
			@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;
			}
JS
  $(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 :'
', 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||(''); } // 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)); }) }
Host Instantly Drag and Drop Website Builder

 

Description

TremulaJS is a responsive Javascript content carousel/slider with Bézier-based momentum & physics effects for mouse, trackpad and touch devices.
Term
Mon, 11/27/2017 - 21:37

Related Codes

Pen ID
Pen ID
Pen ID