javascript - Transforming navigation bar to a fixed header over horizontal parallax website -

-

the title may seem bit peculiar try explain best possible confusion minimized.

currently using fullpage.js plugin website create horizontal 'slide' effect. check website out see mean. http://carrotcrunchpvp.comule.com/

as can see navigation bar slap bang in middle of page when enter rotated , such. when slide right using arrow, want navigation bar 'push' out ethos link goes top left, privacy policy link goes adjacent (horizontally), path healing. logo shift directly upward form middle of navigation bar. nz catholic church shimmy right , adjacent logo, contact go further right , page reach far right of navigation bar located @ top of page. creating header navigation bar

look @ illustration better idea:

enter image description here

the black lines path of transformations. it's not easy seems, css3 transformations too...

now problems, i'm capable css, jquery , javascript knowledge lacking. i'm unsure how approach this. because want transformation occur when clicking homepage next page or 1 of other pages more content. turning fixed header. when go homepage need animate backwards original navigation bar...

how go this? task i.t teacher has set me on holidays , i'm struggling figure how logically this.

if i've missed or you're still confused on want achieve, feel free comment , try clarify. mods, it's subjective topic, i'll agree - it's topic spreads creativity , shouldn't frowned upon , looked @ closure - imo...

you should using callbacks fullpage.js provides such afterslideload or afterslideleave.

if not want deal javascript @ all, notice how fullpage.js updating class fp-viewing-xxxx in body element.

you can use fire animations depending on active class.

  • when load site empty.
  • going second slide add class fp-viewing-horizontal-1 in case
  • going home again load fp-viewing-horizontal.

in css like:

body .menu, body.fp-viewing-horizontal .menu{   //your home menu styles/animations }  body.fp-viewing-horizontal-1 .menu, body.fp-viewing-horizontal-2 .menu, body.fp-viewing-horizontal-3 .menu, body.fp-viewing-horizontal-4 .menu, body.fp-viewing-horizontal-5 .menu, body.fp-viewing-horizontal-6 .menu, body.fp-viewing-horizontal-7 .menu{   //your fixed menu styles/animations }

Comments

Post a Comment

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

-
i getting error message , further 1 here: failed read artifact descriptor org.apache.maven.plugins:maven-install-plugin:jar:2.4: even though when go .m2 repository path c:\users\a591024.m2\repository\org\apache\maven\plugins\maven-resources-plugin\2.4 the maven-resources-plugin-2.4.jar file there , maven-resources-plugin-2.4.pom there. have tried delete .m2 repository no luck. far maven not build project desperately need to. any ideas? it seems proxy issue please aad following in setting.xml grabbing lan setting , proxy information. <proxies> <proxy> <id>proxy</id> <active>true</active> <protocol>http</protocol> <host>hostname</host> <port>port</port> </proxy> </proxies> this frequent issue, please see below link well. plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or 1 of dependencies not resolved maven: failed ret
Read more

Round ImageView Android -

-
Image
i working on android application in doing rounded image view. working fine images, images 160x120 resolution shows oval shaped. code custom imageview given below, please me out here: public class roundimage extends drawable { private final bitmap mbitmap; private final paint mpaint; private final rectf mrectf; private final int mbitmapwidth; private final int mbitmapheight; public roundimage(bitmap bitmap) { mbitmap = bitmap; mrectf = new rectf(); mpaint = new paint(); mpaint.setantialias(true); mpaint.setdither(true); final bitmapshader shader = new bitmapshader(bitmap, shader.tilemode.clamp, shader.tilemode.clamp); mpaint.setshader(shader); mbitmapwidth = mbitmap.getwidth(); mbitmapheight = mbitmap.getheight(); } @override public void draw(canvas canvas) { canvas.drawoval(mrectf, mpaint); } @override protected void onboundschange(rect bound
Read more

How can I utilize Yahoo Weather API in android -

-
Image
i want develop app using yahoo weather api android. want current , forecast weather details. i have tried different sources (e.g.: https://github.com/survivingwithandroid/weatherlib , getting error weatherlib api android , unable execute activity in android weatherlib ) , getting different errors m unable resplve. there can proper tutorial or guide! error: -17 08:50:48.961 3168-3168/com.survivingwithandroid.weather e/androidruntime﹕ fatal exception: main process: com.survivingwithandroid.weather, pid: 3168 java.lang.runtimeexception: unable start activity componentinfo{com.survivingwithandroid.weather/com.survivingwithandroid.weather.mainactivity}: java.lang.nullpointerexception: attempt invoke interface method 'boolean java.util.list.isempty()' on null object reference @ android.app.activitythread.performlaunchactivity(activitythread.java:2298) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2360) @ android.app.activi
Read more