Home › Forums › JavaScript › jQuery Pull Up Shade/Curtain?
- This topic is empty.
-
AuthorPosts
-
May 4, 2015 at 7:55 am #201560
UberSlackr
ParticipantI’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 #201576UberSlackr
ParticipantThank 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 #201578UberSlackr
ParticipantOkay, 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 #201582UberSlackr
ParticipantI 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 #201583UberSlackr
Participanthtml, 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 #201586UberSlackr
Participantsorry missed that. thank you again, very much.
May 4, 2015 at 2:51 pm #201589UberSlackr
ParticipantHow would you make the Shade/Curtain close again though?
April 22, 2018 at 5:31 pm #270130robincanvasgroupcomau
ParticipantHi there, can I see the code? I would like have same function, thank you
Robin
April 22, 2018 at 5:32 pm #270131robincanvasgroupcomau
ParticipantHi there, can I see the code? I would like have same function, thank you
Robin
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.