javascript - Custom GSAP "hacked" mousewheel scroll -


i made custom content scroller jquery , gsap in aim have nicer effect chrome basic & stuttered scroll. saw (on chrome then) scroll laggy , bugged when test wacom tablet (with pen + horizontal scroll, or trackpad/touch stuff guess).

any thoughts tweaks render more natural scroll effect, not hacked now?
maybe it's mousewheel dommousescroll event, or method bad, markup/css need changes…?

$("section").on("mousewheel dommousescroll", function (e) {     e.preventdefault();      var delta = e.originalevent.wheeldelta / 120 || -e.originalevent.detail; // chrome || ff      // move thumbs     tweenlite.to($("#photos"), 1.2, {         scrollleft: $("#photos").scrollleft() - parseint(delta * 35),         ease: expo.easeout,         overwrite: 5,         onupdate: move     }); });

— http://jsfiddle.net/h66tatp6/

many lights!

cooked something. not sure if fits needs or if type of thing looking for, perhaps give ideas.

codepen.

javascript:

/*global tweenmax,power2,power4*/ var initintervalid=null,initinterval=10; var scrollbar=document.queryselector('.scrollbar'); var scrollbarhandle=document.queryselector('.scrollbar__handle'); var scrollbarbg=document.queryselector('.scrollbar__bg'); var container=document.queryselector('.container'); var images=document.queryselector('.images'); var thumbs=document.queryselectorall('.thumb'); var numthumbs=thumbs.length; var resizeid=null,resizetimeout=400,resizeduration=.4,resizeease=power2.easeout; var initduration=.4,initease=power2.easeout,initstagger=.1; var duration=.4,ease=power2.easeout; var force3d=true; var windowwidth=window.innerwidth; var windowheight=window.innerheight; var thumbwidth=200,thumbheight=200,thumbgutter=20; var scrollbarbgheight=10,scrollbarbgwidth=thumbwidth,scrollbarhandlewidth=20,scrollbargutter=10; var imagespositions=[],iterator=0,percentages=[],scrollbarhandlepositions=[]; function init(){     initimages();     initscrollbar();     initpositions();     assignlisteners(); } function onmousewheel(event){     var e=window.event||event;     var delta=math.max(-1,math.min(1,(e.wheeldelta|| -e.detail)));     if(delta>0){         iterator-=1;         if(iterator<0){             iterator=0;             tweenmax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagespositions[iterator]+(thumbwidth+thumbgutter)*.1},{x:imagespositions[iterator]}]},ease:ease});             tweenmax.killtweensof(scrollbar);             tweenmax.to(scrollbar,duration,{autoalpha:1,ease:ease});             tweenmax.to(scrollbarhandle,duration*2,{                 transformorigin:'left',                 bezier:{type:'thru',values:[{scalex:.2},{scalex:1}]},                 ease:ease,                 oncomplete:function(){ tweenmax.to(scrollbar,duration,{autoalpha:0,ease:ease}); }             });         }else{             tweenmax.to(images,duration,{x:imagespositions[iterator],ease:ease});             tweenmax.killtweensof(scrollbar);             tweenmax.to(scrollbar,duration,{autoalpha:1,ease:ease});             tweenmax.to(scrollbarhandle,duration,{                 x:scrollbarhandlepositions[iterator],                 ease:ease,                 oncomplete:function(){ tweenmax.to(scrollbar,duration,{autoalpha:0,ease:ease}); }             });         }     }else{         iterator+=1;         if(iterator>numthumbs-1){             iterator=numthumbs-1;             tweenmax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagespositions[iterator]-(thumbwidth+thumbgutter)*.1},{x:imagespositions[iterator]}]},ease:ease});             tweenmax.killtweensof(scrollbar);             tweenmax.to(scrollbar,duration,{autoalpha:1,ease:ease});             tweenmax.to(scrollbarhandle,duration*2,{                 transformorigin:'right',                 bezier:{type:'thru',values:[{scalex:.2},{scalex:1}]},                 ease:ease,                 oncomplete:function(){ tweenmax.to(scrollbar,duration,{autoalpha:0,ease:ease}); }             });         }else{             tweenmax.to(images,duration,{x:imagespositions[iterator],ease:ease});             tweenmax.killtweensof(scrollbar);             tweenmax.to(scrollbar,duration,{autoalpha:1,ease:ease});             tweenmax.to(scrollbarhandle,duration,{                 x:scrollbarhandlepositions[iterator],                 ease:ease,                 oncomplete:function(){ tweenmax.to(scrollbar,duration,{autoalpha:0,ease:ease}); }             });         }     }     return false; } function listentomousewheel(){     if(container.addeventlistener){         container.addeventlistener('mousewheel',onmousewheel,false);         container.addeventlistener('dommousescroll',onmousewheel,false);     }else{         container.attachevent('onmousewheel',onmousewheel);     } } function adjustcontaineronresize(){     windowwidth=window.innerwidth;     windowheight=window.innerheight;     tweenmax.to(container,resizeduration,{         x:windowwidth*.5-thumbwidth*.5,         y:windowheight*.5-thumbheight*.5,         ease:resizeease,         force3d:force3d     }); } function onresize(){     cleartimeout(resizeid);     resizeid=settimeout(adjustcontaineronresize,resizetimeout); } function listentoresize(){     (window.addeventlistener)?window.addeventlistener('resize',onresize,false):window.attachevent('onresize',onresize); } function assignlisteners(){     listentoresize();     listentomousewheel(); } function initpositions(){     for(var i=0; i<numthumbs; i+=1){         imagespositions[i]=-i*(thumbwidth+thumbgutter);         percentages[i]=i*(100/numthumbs);         if(i===0){             scrollbarhandlepositions[i]=0;         }else if(i===numthumbs-1){             scrollbarhandlepositions[i]=scrollbarbgwidth-scrollbarhandlewidth;         }else{             scrollbarhandlepositions[i]=i*(scrollbarbgwidth/(numthumbs-1))-scrollbarhandlewidth*.5;         }     } } function initscrollbar(){     tweenmax.set(scrollbar,{         y:scrollbargutter,         width:scrollbarbgwidth,         height:scrollbarbgheight,         force3d:force3d     });     tweenmax.set(scrollbarhandle,{y:0,force3d:force3d});     tweenmax.to(scrollbar,initduration,{delay:initstagger,opacity:1,ease:initease}); } function initimages(){     for(var i=0; i<numthumbs; i+=1){         tweenmax.set(thumbs[i],{x:i*(thumbwidth+thumbgutter),force3d:force3d});     }     var width=numthumbs*(thumbwidth+thumbgutter)-thumbgutter;     tweenmax.set(container,{y:windowheight*.5-thumbheight*.5,x:windowwidth*.5-thumbwidth*.5,height:thumbheight+scrollbargutter+scrollbarbgheight,width:thumbwidth,force3d:force3d});     tweenmax.set(images,{height:thumbheight,width:width,force3d:force3d});     tweenmax.staggerto(thumbs,initduration,{opacity:1,ease:initease},initstagger); } initintervalid=setinterval(function(){     if(document.readystate==="complete"){         clearinterval(initintervalid);         init();     } },initinterval);

beware of ugly, non-refactored, highly un-tested, un-optimized code. created fun. if find time, may build upon later , include other mouse interactions such mousedown, mousemove, mouseup touch interactions such touchstart, touchmove, touchend events. should fun. now, use may like.


Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more