jQuery Pull Up Shade/Curtain? - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
May 4, 2015 at 7:55 am #201560

UberSlackr
Participant

I’ve been on the hunt for a jQuery effect, that will allow me to have a fullscreen page, then with click of Arrow (or image icon) at bottom, the original content scrolls up (like a solid window shade) to reveal a full screen video.

Anyone have any suggestion? This is for personal project.

May 4, 2015 at 1:37 pm #201576

UberSlackr
Participant

Thank you good sir, that will work perfectly.
I tried to copy and past this into a working html file, with links to the css and js… but its not working at all. Just puts “Forground contect click me” and “Background content” in the top left corner.

May 4, 2015 at 2:09 pm #201578

UberSlackr
Participant

Okay, so I got the “Forground content click me” in the center with “Background content” hidden. but when clicking “click me” it does not show the background content..

Edit: Got it working. All though its putting scrollbars on the left and bottom.

May 4, 2015 at 2:30 pm #201582

UberSlackr
Participant

I just basically copy and paste what you had in CodePen.
but its not putting the bg in left top corner.
There is a small gap from top to bg and from left to bg.

`<html lang=”en”>

<head>
<script src=”js/jquery.js”></script>
<script src=”js/pullup.js”></script>

<link href=”css/style.css” rel=”stylesheet”>
</head>

<body>

<div class=”foreground js-page”>
<h1>Foreground content <a href=”#close” class=”js-close”>click me</a></h1>
</div>

<div class=”background”>
<h1>Background content</h1>
</div>
</body>
`

May 4, 2015 at 2:31 pm #201583
UberSlackr
Participant
```
html,
body {
  /* required to let children fill viewport, you can skip this and use vw/vh units if you can */
  height: 100%;
}

.foreground,
.background {
  position: absolute;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  /* animate changing of min-height */
  transition: .3s min-height ease-out;
  > h1 {
    /* optional just to vertically/horizontally center */
    position: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.is-closed {
    min-height: 0;
  }
}

.foreground {
  /* Sets foreground above background */
  z-index: 2;
  background-color: white;
}

.background {
  z-index: 1;
  background-color: black;
  color: white;
}
```
May 4, 2015 at 2:41 pm #201586

UberSlackr
Participant

sorry missed that. thank you again, very much.

May 4, 2015 at 2:51 pm #201589

UberSlackr
Participant

How would you make the Shade/Curtain close again though?

April 22, 2018 at 5:31 pm #270130

robincanvasgroupcomau
Participant

Hi there, can I see the code? I would like have same function, thank you

Robin

April 22, 2018 at 5:32 pm #270131

robincanvasgroupcomau
Participant

Hi there, can I see the code? I would like have same function, thank you

Robin
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘JavaScript’ is closed to new topics and replies.