I am new to jQuery and am teaching myself as I go but am struggling to figure out how to indicate that on up scroll the white navigation background moves up to show the white navigation text on panel 1?
bartaile.com is what I am using as inspiration & the changes I'm making to bartaile's navigation are---> after the user scrolls past the first panel the navigation hides, only when the user scrolls up does the navigation show again, when panel 1 comes back down the white navigation backgrouns slide up to hide and shows white text.
Any help or tips to learn how to do this would be greatly appreciated! :-)
var lastScrollTop = 0;
$(window).on('scroll', function() {
var header = $('.header');
var stage0 = $('.stage-0');
var scrollTop = $(window).scrollTop();
if (scrollTop > lastScrollTop) {
// down scroll
if (scrollTop > stage0.offset().top + stage0.height()) {
header.addClass('hide');
}
} else {
// up scroll
if (scrollTop <= stage0.offset().top + stage0.height()) {
header.removeClass('headerBGchange headerLIchange');
} else {
header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
}
}
lastScrollTop = scrollTop;
});
.header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 80px;
-webkit-transition: top .5s ease;
transition: top .5s ease;
position: fixed;
width: 100%;
top: 0;
background-color: transparent;
overflow: hidden;
}
.header ul {
margin: 20px;
padding: 0;
}
.header ul li {
display: inline-block;
margin-right: 20px;
color: white;
}
.header ul li:last-child {
margin-right: 0;
}
.hide {
top: -80px;
}
.headerBGchange {
Background: white;
}
.BGupTranistion {
}
.header.headerLIchange ul li {
color: Blue;
}
.header.headerLIchange {
border-bottom: 1px solid black;
}'
</style>
<!--stage style--><style>
.stage {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
background-color: white;
border-bottom: 1px solid black;
font-size: 48px;
height: 200px;
width: 100%;
}
.stage-0 {
background: grey;
}
.stage-24 {
background: #433937;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
You will need to add another container to achieve the effect you're looking for. What you essentially want to have is a container at the top and another container which will fade in and out depending on your scroll behaviour. So how do you achieve that? Create a -Element on top of the page, like your gray box is there at the moment. When scrolling down, do not transform it, instead, fade in another previously hidden container to act as your navigation when not at the top of the page. Now if you scroll back up, check the scroll location, and if the two locations of both containers overlap, start fading out the container you use when not at the top of the page. I do not think there is another solution. I might try and write a codepen on it now, I will edit my post if I had success. You could also try working it out with another div inside the actual header and z-index, though that might turn out really bad.
I have done my best to achieve what you want. Here is the CodePen.
I used two different divs, one called .dynamic-header and one normal header, and I've added a function to detect jQuery In-Viewport.
$.fn.isOnScreen = function(){
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
I hope this fits your needs. Also, I changed some CSS around, using the Top-Property for the transition. You can outsource all of that into CSS classes and use them instead, but I thought this was the simplest solution for demonstration purposes. Is this what you want?
Edit 1: You named bartaile.com as an example. I took a look at the effect they create and recreated it. What you have to do is basically create a structure like this:
<div class="header-bg"></div>
<div class="header-content">
<ul>
<li>YOUR HEADER</li>
</ul>
</div>
I made another CodePen for this.
The header-bg has a height of 0. The header-content has a height of, lets say, 80px, and a background-color of transparent. Now do NOT check which direction is scrolled. The only important aspect for the effect is, how far are you from the top / is a specific element in viewport? I went for 400px from top. Now when that requirement is met, just fade in the header-bg. It will be inbetween the wrapper and the content, and will provide a background. Together with that, you may also change the color of the header-content, but I did not do that. It is what bartaile.com does, tho, so you might want to include it. Enjoy!
Edit 2: I've edited the CodePen according to your comment. See it in action here. This does the following: A header is there. When scrolling down, it'll disappear. On scroll up, it'll bring up a background, but when scrolling so that scrollTop < 400, the background will fade out. As of what I understood, this is what you want. It uses the structure I posted above.
I check out "bartaile.com" and I have to point out that what they use is a third party lib called 'fullpage'.If you wanna achieve that kind of effect, you should check out this lib fullpage.js. This is a simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.
This plugin can handle "full screen scrolling" and also normal scrolling. You can achieve your effect with this much more easier
Related
I have a code where I want to make the content inside the div, go from left to right (which I did using Flex-direction: row) and when it gets to the limit of the div, goes down and continues this order. The order should look like this (https://i.stack.imgur.com/L97y0.png) with the elements inside going in this order.
I'm using MVC core, and its a system which accepts requests and shows them on the screen.
Here's the HTML of the div
<div class="pedido-tudo">
#foreach(var pedido in Model)
{
<div class="pedido-quadrado">
#pedido.IdPedido
#pedido.NomeCliente
#pedido.TelCliente
#pedido.DataEntrada
#pedido.HoraEntrada
#pedido.HoraSaida
#pedido.TextoStatus
#pedido.TextoTipoPedido
#if (#pedido.TextoStatus == "Andamento" && #pedido.HoraSaida == "")
{
<div class="botoes-cad">
Finalizar
</div>
}
</div>
}
</div>
the CSS of the div
.pedido-tudo {
margin-left: 1.5rem;
width: 60rem;
max-width: 60rem;
display: flex;
flex-direction: row;
}
.pedido-quadrado{
margin-top: 1rem;
margin-left: 5.7rem;
width: 18rem;
height: 20rem;
border: 1px rgb(170, 0, 0) solid;
color: black;
font-size: 16px;
}
Here's how it currently is:
If what i think you are saying is correct you should use the flex-wrap property so that when the size of the parent div becomes smaller is pushes the overflowing items from the top to the bottom reply to me if i am wrong
i've been looking around a lot on how to do different carousels, but i'm struggling to find a resource that teaches me what it actually does instead of just throwing code at me. Time wasted on misleading videos where you have to download their special script at the end! :-(
i want to understand it first in vanilla JS/Css first, and then work towards understanding Pug/Scss.
i have the below:
.MenuContainer {
position: relative;
width: 300px;
height: 175px;
background-color: black;
border-radius: 10px;
}
.Imagebox {
height: 150px;
margin-top: 15px;
margin-bottom: 27px;
bottom: -17px;
width: 260px;
margin-left: 20px;
margin-right: 15px;
background-color: lavender;
align-self: center;
position: absolute;
border-radius: 5px;
}
.ListReel {
position: inherit;
height: 120px;
background-color: white;
width: 217px;
bottom: 8px;
margin-left: 20px;
display: flex;
flex-direction: row;
overflow-x: hidden;
justify-content: space-evenly;
}
.fa-chevron-left {
position: inherit;
left: 30px;
bottom: 93px;
font-size: 1.5em;
}
.fa-chevron-right {
position: inherit;
left: 236px;
bottom: 93px;
font-size: 1.5em;
}
.MenuItem {
position: inherit;
height: 85px;
width: 85px;
top: 1px;
position: inherit;
border-color: lawngreen;
border-style: solid;
border-width: 1px;
display: table-row;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a427ef628d.js" crossorigin="anonymous"></script>
<script src="../Scripts/JQuery"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../Scripts/jquery-ui.min.css">
<link rel="stylesheet" href="Test.css">
<title>TESTING</title>
</head>
<body>
<h1>Hello!</h1>
<div class="MenuContainer">
<h5 style="text-align: center; margin-top: 5px; color: white;">Select Item</h5>
<div class="Imagebox"></div>
<ul class=ListReel>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
<li class="MenuItem"></li>
</ul>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</body>
</html>
I tried going my own way but i'm completely stuck - i envision that the green boxes will need to be spaced evenly, and in a straight row, the items that fall outside the box, won't be visisble and the scroll will cycle the items "Carousel" style..
Ive tried a lot of things so far and i cant even seem to be able to flex my container/green boxes across let alone make a start on the animation!
Does anyone have any tips or resources or code ideas that can point me in the correct direction? preferably well explained tutorials? please?
Many Thanks
Let's start by thinking what the carousel should do. It should roll new images / items from the sides of the viewing container, right?
This means we want our carousel items to be full width of the carousel container, so the items fill the container and rest are left hanging out. Now we don't want to see the other carousel items outside the carousel and for that we can use overflow: hidden on the carousel container. This CSS declaration means that everything that doesn't fit inside the carousel container is hidden.
The other crucial thing is to lay out the carousel items next to eachother, so that when we move them they appear from the sides.
There are of course multiple ways to achieve this but here's what I would've done.
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
We have a container for the carousel (class: carousel) and the items within it (class carousel-item). Here I have added also a "carousel-item-wrapper" element here. Its job is to contain all the carousel items so we can just slide this bad boy around and the displayed carousel item will change.
Now for the CSS of this mf.
.carousel {
width: 600px;
height: 200px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 200px;
}
Let's start with .carousel and .carousel-item.
We set defined width and height attributes for the carousel container according to our needs. We want the same width and height to be applied to carousel-item so they fill the carousel window. We also want to set the aforementioned overflow: hidden on the .carousel container so the other items are not displayed when they don't need to.
Now I have set the width of the carousel items with min-width: 600px. The reason is that the carousel-item-wrapper where we have the items uses flexbox layout display: flex. If the items don't have a min-width attribute set, the flexbox would shrink all of them until they all fit side by side inside the carousel container. We don't want that!
Now we get to talk about the mystical #carousel-item-wrapper element. Firstly, it has flex properties needed for horizontal layout: display: flex to actually use flexbox and flex-direction: row (which is default actually..) which tells flexbox to align the items next to eachother.
Then I have set the wrapper element position to relative which means that if no other settings (left, right, top, bottom) is set the element will be where it would naturally go. The reasoning for relative positioning is that we can then change the left (or right) value to move the long horizontal list of carousel items so that the element we want will be aligned with the .carousel element (the "display window" so to speak).
Lastly, it has transitition: left 0.5s which tells the browser that any time the left attribute is changed (usually by JS), the browser will animate the change of the value. That is, if we first have left: 0px and change it to left: -600px (sliding the carousel one item over, as my carousel has width of 600px) the change will be animated (0.5s refers to the time you want it to take)
Now we have all of the HTML and CSS set up and if you change the left property of #carousel-item-wrapper it will move and animate the carousel.
Only thing we need is to create some JS to move it around. I have opted for a button which just moves the carousel one item.
I wasn't going to explain the JS but seeing that this answer got so long, I might as well do that as well.
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
First we start by getting a reference to the wrapper element with document.getElementById. We can use this to read the current value of left attribute on the element and change it. carouselWrapper.style.left is the value of the left property and slice(0, -2), well you can read up on it on your own but here it just strips the "px" from the value (because the value of left is a string of <value>px. Next we want to subtract carousel width from this (so the items slide up correctly). I also used the modulo operator, which is just remainder division. This will mean that once I have subtracted too much, it will wrap over. Now the only thing left is to apply this new value of left to the wrapper.
All in all the implementation would look a bit like this:
(EDIT: I change height to be 100px instead of 200px to make it fit inside the run code snippet window)
function moveCarousel() {
const carouselWrapper = document.getElementById("carousel-item-wrapper");
let left = carouselWrapper.style.left.slice(0, -2);
left = (left - 600) % 1800;
carouselWrapper.style.left = left + 'px';
}
.carousel {
width: 600px;
height: 100px;
border: 3px solid #333;
overflow: hidden;
}
#carousel-item-wrapper {
display: flex;
flex-direction: row;
position: relative;
left: 0;
transition: left 0.5s;
}
.carousel-item {
display: inline-block;
min-width: 600px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="carousel">
<div id="carousel-item-wrapper">
<div style="background-color: red" class="carousel-item"></div>
<div style="background-color: blue" class="carousel-item"></div>
<div style="background-color: yellow" class="carousel-item"></div>
</div>
</div>
<button role="button" onclick="moveCarousel()">Move carousel</button>
</body>
</html>
One quick thing before I answer your question: try and post Minimum Working Examples (MWEs) on stackoverflow, because a) this will make your answer more useful to others; b) because it will help you isolate and debug. To go from full website to MWE, remove stuff until only the problem remains, and none of the other stuff.
Now:
I'm not sure whether you understand the implications of display:flex on .ListReel. This is a flexbox, a web technology that allows simplified formatting of things, and you may have seen it around a few tutorials. But flexbox setups require a bit more than just display:flex. You can read more here: CSS-Tricks post on Flexbox (not mine but i regularly use it)
For starters, try adding flex: 0 0 100% to your .MenuItem, which tells the browser that you want your carousel menu items to take up 100% of the width of the .ListReel. Then, for the moment, set overflow-x to auto, which will show the scrollbar.
Later you might not want the scrollbar; so you can set overflow-x back to hidden. I will assume that you know some javascript - the next step would be to add some javascript to make it work:
<script>
function moveTheListItems(){
var listReel = document.getElementsByClassName("ListReel")[0]; // get a reference to the listReel
listReel.scrollBy(listReel.clientWidth,0); // scroll it to reveal the next frame
}
setInterval(moveTheListItems,500); // run this function every 500ms = half a second
</script>
Hope it helps!
I've a part of code on my website. Some time it can happen that the line breaks if the code don't fit in the parent element anymore:
If this happens I want to break all lines instead because it looks ugly when one part is broken and the other don't.
Remind
I can have a least 20 elements in one list.
Update
This is the part of my code which I all need to wrap if one of them wraps:
.elements-list {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
list-style: none outside;
}
.list-entry {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
list-style: none outside;
padding-right: 8px;
max-width: 200px;
}
span.single-detail span {
letter-spacing: 1px;
display: -webkit-inline-box;
display: inline-flex;
display: -ms-inline-flexbox;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<ul class="elements-list">
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>2.222,00 €</span>
</span>
</li>
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>20.222,00 €</span>
</span>
</li>
<li class="list-entry">
<span class="single-detail">
<span>Abgabefrist:</span>
<span>22.02.2222</span>
</span>
<span class="single-detail">
<span>Entlohnung:</span>
<span>22.000.222,00 €</span>
</span>
</li>
</ul>
I don't think you can solve this with CSS alone. You can solve it with JavaScript.
One way would be to constantly monitor the elements and see if one of them wrapped. But then, once wrapped you will never unwrap, it's not responsive.
So this is my alternative:
By putting the value inside inline-block elements, you can align the widths of the elements. This way, when one element wraps, they will all wrap, because they simply won't fit anymore.
Advantages of this solution:
It's responsive, responds to browser resizing.
Only requires JavaScript on load. Sizing and wrapping is handled by CSS once the widths are set, so it's fairly lightweight.
Disadvantages:
You will need to recalculate the widths if you change the content of the elements, or if you have dynamic font sizing (I hope not).
It's not pixel perfect, it seems. Maybe it can be tuned (for instance by giving the left element also a width in whole pixels), or otherwise, maybe you'll forgive me this pixel. ;)
window.addEventListener('DOMContentLoaded', function(){
var rows = document.querySelectorAll('.row');
// First loop to find which line is the widest.
var widest = 0;
for(r=0; r<rows.length; r++) {
console.log(r);
var width = rows[r].querySelector('.col1').offsetWidth +
rows[r].querySelector('.col2').offsetWidth;
if (width > widest) widest = width;
}
// second loop to set the width of col2, so they all
// get the same width.
for(r=0; r<rows.length; r++) {
rows[r].querySelector('.col2').style.width =
(widest - rows[r].querySelector('.col1').offsetWidth) + 'px';
}
});
/* This is needed */
.col2 {
display: inline-block;
}
/* This is just for show */
.col1 {
padding-right: 1em;
}
span {
box-sizing: border-box;
border: 1px solid grey;
}
<!-- hacky div/span table, since there is no HTML in the question -->
<div class="row"><span class="col1">The time</span><span class="col2">2018-12-22 12:34</span></div>
<div class="row"><span class="col1">Total price here</span><span class="col2">$ 5,-</span></div>
You either need to set the css property white-space: nowrap; on the text parent element so no text wraps for that class or you could add the <br> on the HTML after the name of the element so it breaks every time, code is needed so we can be more specific in finding a solution.
Well, easiest would be to create "abgabefrist:01/01/0001" as two elements instead of one and then add display flex to the parent. so when the screen shrinks, the element comes below another.
Below mentioned code fine, tested on codepen.
.dates div {
display: flex;
flex-wrap: wrap;
}
<div class="main">
<div class="dates">
<div><span>abgabefrist:</span>
<span>01/01/0001</span></div>
<div><span>abgabefrist:</span>
<span>02/02/0002</span></div>
</div>
<div class="btns">
<button> Button One</button>
<button> Button Two </button>
</div>
</div>
This is a jsfiddle example file that replicates the problem: https://jsfiddle.net/Lhr0d6cw/11/
I wanted the element (when clicked) to expand for 6seconds from its original position but notice that when you click the red card (or any card), it doesn't start expanding from the originals position it used to be, but rather from the middle, I assume that its because transition of 6s to top and left is not being applied for some reason.
Only places I was able to make it work properly so far are stackoverflow editor below or by inserting a debugger in the code and doing it manually but when using my localhost or jsfiddle it doesn't transition properly.
This is the same example on stackoverflow which works as desired:
const productCards = document.querySelectorAll(".products__card");
productCards.forEach(c => {
// console.log("clicked1");
c.addEventListener("click", openCard)
});
function openCard(e) {
console.log("clicked");
console.dir(this);
let top = this.getBoundingClientRect().top;
let left = this.getBoundingClientRect().left;
// this.style.transition = "top 0.9s, left 0.9s";
this.style.top = top + "px";
this.style.left = left + "px";
this.style.position = "fixed";
console.log(`top: ${top}, left: ${left}`);
// debugger;
this.classList.add("open");
}
.products {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
min-width: 1000px;
max-width: 1500px;
margin-bottom: 300px;
}
.products .products__card {
display: flex;
flex-direction: column;
width: 150px;
height: 250px;
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
background-color: red;
transform: scale(1);
/* box-shadow: 3px 7px 55px -10px c(very-light); */
transition: width 0.9s, height 0.9s, z-index 0.9s, top 6s, left 6s;
}
.products .products__card.card-1 {
background-color: red;
}
.products .products__card.card-2 {
background-color: blue;
}
.products .products__card.card-3 {
background-color: green;
}
.products .products__card.card-4 {
background-color: yellow;
}
.products .products__card.card-5 {
background-color: pink;
}
.products .products__card.card-6 {
background-color: gray;
}
.products .products__card.open {
width: 550px;
height: 800px;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 120;
box-shadow: 0 0 1000px 1000px c(box-overlay);
}
<div class="products">
<div class="products__card card-1">
</div>
<div class="products__card card-2">
</div>
<div class="products__card card-3">
</div>
<div class="products__card card-4">
</div>
<div class="products__card card-5">
</div>
<div class="products__card card-6">
</div>
</div>
works when debugging:
The strange thing as mentioned above is that my problem in the browser using localhost is also solved when I insert debugger in the code and manually skip through the last step of adding .open class. If you have the same problem in jsfiddle or your own editor, try adding debugger; before this.classList.add("open"); and then open the console and then click the card and go over the last step manually in the console. you will notice that the card expanded from its original place as desired taking 6s to finish which means the transition was applied in this case.
My questions:
Why is transition for top and left only working in certain environments? is it a browser problem? I'm using the latest chrome. does someone know of a better way to achieve the same results?
code comments:
-obviously, 6 seconds is not what I will be using in my code, its used here just to make the transition obvious.
-In my source code, you can see that because I can't transition from position static to position fixed I had to use Javascript to add position fixed style inline to the element before the .open class is added, that way transition can take place properly when .open is added.
-I also added top and left values inline to keep the card in its original place when position: fixed style is applied because as you might know fixed position takes the element out of its flow, so top and left keep it in place.
-I added !important in css .open class because without it I can't override inline css as you might also know.
Thank you
I was able to solve my problem just now by applying a little hack. It seems that in some environments (localhost, jsfiddle) the javascript engine is adding the .open class faster than expected and the fact that it is working fine when debugging (slow process) indicated that to me. so I added a setTimeout() to the last piece of code delayed it by 20. this solved my problem and now it works fine on JSfiddle and on my computer. here is the new edited sample that works:
https://jsfiddle.net/Lhr0d6cw/14/
setTimeout(() => {
this.classList.add("open");
}, 20);
I would still like to know if there is a better way of doing this animation if someone would like to share!
Let us say I want to design a website with four slides. I would like each slide to cover the previous one while the visitor is scrolling. Following is an attempt with stellar.js (a jquery plugin): http://jsfiddle.net/8mxugjqe/. You can see that it works for the first slide, which gets covered by the second one, but I could not have it work for the others.
HTML:
<body>
<div id="one" data-stellar-ratio=".2">
<p>This is the first div.</p>
</div>
<div id="two" data-stellar-ratio="1">
<p>This is the second one.</p>
</div>
<div id="three">
<p>Third one!</p>
</div>
<div id="four">
<p>Fourth and last.</p>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
#one, #two, #three, #four {
position: absolute;
height: 100%;
width: 100%;
font-size: 5em;
}
p {
margin: 1em;
width: 60%;
}
#one {
background: red;
}
#two {
background: blue;
top: 100%;
}
#three {
background: green;
top: 200%;
}
#four {
background: yellow;
top: 300%;
}
I was able to throw something together using just jQuery and no other libraries. It relies on relative positioning. Basically, everything scrolls normally until one of the slides reaches the top of the browser window. Once it tries to scroll past the top of the browser window, I add an offset to the slide's vertical position to keep it from moving up any further. When scrolling back the other way, I simply subtract from this offset until it hits 0 at which point it begins to scroll normally again.
I'm sure the code can be cleaned up but I added a ton of comments so hopefully it's readable. If you have any questions or you would like me to modify it to better suit your needs, let me know. Here's a fiddle with the solution I came up with:
http://jsfiddle.net/jwnace/jhxfe2gg/
You can also see a full page demo of the same code here:
http://joenace.com/slides/