Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38442

    How can I create a blind that slides up/down over website like http://nautil.us ??

    Note one thing to notice, I'm viewing on an ipad, there are **definitely differences** in behaviour if you viewing it on anything else. The effect is better on ipad and really smooth, and the header menu does not stay at the top. It's the ipad behaviour I'm trying to figure out.

    Either way quite clearly on nautil.us you start to scroll down, the "blind" page lifts up revealing a static non moving website behind.

    If you keep scrolling up/down within one page height, the behaviour is of a blind!

    You can make the blind go UP and DOWN -- ABOVE the static site behind. If you scroll past a page, the blind when lifted to reveal the static site behind, the the blind is gone, then site scrolls like any other site. If you go near the top, the blind rolls over the site again!!

    Very cool indeed, works great on ipad.

    Forget the normal scrolling site behind. It's the rolling up down behaviour of the blind above I love. Note try this on ipad ie mobile safari it's completey different to desktop browser version.

    How can this blind effect be replicated?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's an optical illusion. Normally, I'd have told you to view source and try to figure it out, but their code is a bit of a mess and if you don't know what you're looking for, it'd be pretty frustrating to try to figure out.

    Basically, the "blind" (it's called a "curtain" in the code) is absolute positioned in front of everything else (using z-index) and sized using javascript to take up the whole browser window. The rest of the site is fixed positioned. Then, once the blind has scrolled off the page, they use javascript to change the positioning on the rest of the page to relative with a top offset the same height as the blind. Not quite as complex as it seems.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38442
    Quote Originally Posted by Ronald Roe View Post
    It's an optical illusion. Normally, I'd have told you to view source and try to figure it out, but their code is a bit of a mess and if you don't know what you're looking for, it'd be pretty frustrating to try to figure out.

    Basically, the "blind" (it's called a "curtain" in the code) is absolute positioned in front of everything else (using z-index) and sized using javascript to take up the whole browser window. The rest of the site is fixed positioned. Then, once the blind has scrolled off the page, they use javascript to change the positioning on the rest of the page to relative with a top offset the same height as the blind. Not quite as complex as it seems.
    Can you help me isolate the JavaScript code behaviour ?

    It must be complex because I've posted this on many, many forums, and NOBODY has been able to explain and replicate or find anything else that's anything like it. I've never seen anything like this on ANY website.

    Like you say, the codes a mess, hard to figure anything out.

    Surely there must be someone else on this planet with sufficient css and javascript knowledge to explain how this is coded ?
    Last edited by Flexiverse; Feb 12th, 2014 at 12:17 PM.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I did explain how it's coded. I explained step by step what the code's doing, I just didn't rewrite the actual code. Are you not wanting to take a crack at it on your own?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38442
    Quote Originally Posted by Ronald Roe View Post
    I did explain how it's coded. I explained step by step what the code's doing, I just didn't rewrite the actual code. Are you not wanting to take a crack at it on your own?
    I'm not a bespoke developer, I just cut and paste stuff...
    Any help appreciated.

  7. #6
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38442
    Quote Originally Posted by Ronald Roe View Post
    I did explain how it's coded. I explained step by step what the code's doing, I just didn't rewrite the actual code. Are you not wanting to take a crack at it on your own?
    I found something that does the job... But it does not work in ipad.
    What needs to be done to make it touch enabled and work on ipad ?

    See https://github.com/Victa/curtain.js

    Any pointers would be cool.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 08:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com