javascript - Cross-dissolve transition for scrolled elements -

-

i creating long single page website , using scrollmagicjs v1.3.0 trigger events , make elements sticky. create variety of other transition effects 1 scrolls down page.

here's jsfiddle replicates horizontal scrolling of site.

scrollcontrol = new scrollmagic({     vertical: false, });  var myscrollscene = new scrollscene({     triggerhook: 0,     offset: 0,     triggerelement: '#shot-0-1',     duration: '100vw',     pushfollowers: true })     .setpin('#shot-0-1')     .addto(scrollcontrol);

for instance, want create fade-to-black, flare-to-white, , cross-dissolve transitions between pages.

i understand of basic principles of html5 transitions, how make 1 image dissolve another, haven't been able figure out clever way using scrollmagic scrolling.

things i've considered: next page slides under current page , transitions 1.0 0 opacity using scrollmagic triggers?

but how in way non-hacky , consistent scrollmagic's framework?

this has been asked , answered in scrollmagic's issues section: https://github.com/janpaepke/scrollmagic/issues/269

here's copy:

a common misconception need scrollmagic pin functionality. if content isn't moving within scroll flow anyway (it stays in position , faded out or moved side or sth. that) can have "fixed" right beginning. saves lot of work , confusion.

the reason use scrollmagic's pinning functionality when element should scroll naturally dom , shouldn't.

so if have elements in place , should replaced others, have them fixed whole time. this: https://jsfiddle.net/janpaepke/6kyd6ss0/1/

if indeed case should use scrollmagic's pinning method, animation inside of wrapper, pin. this: https://jsfiddle.net/janpaepke/6kyd6ss0/3/

　

Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more