Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

demos

  • Loading branch information...
Prinzhorn committed Apr 23, 2018
1 parent 131ff24 commit 3cfdedbc62744e5d6eeeb86013d51d90ba393860
@@ -1,6 +1,8 @@
# CSS Guides Layout Module

Just some random sketches of how Guides Layout could look in CSS. Clean af that is.
Just some random sketches of how Guides Layout could look in CSS. Clean af that is. This is _the_ layout module you'd want for scrolling websites. It has built-in support for parallax and pinning (imagine native browser support with these as first-class citizens).

One thing that Scrollmeister also has that we still cannot do in CSS is having the height defined as a ratio. E.g. having an element that is always `16:9`. This is trivial to implement inside the Guides Layout, because the width is _always_ well defined by the guides. It is not something that can be solved in a general purpose way, but inside of Guides Layout `height: 16 / 9` should just work. Or maybe allow unit-less numbers to make parsing backwards-compatible, e.g. `height: 0.5625` (9 divided by 16).

## Linear document flow

@@ -17,7 +19,7 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
```css
.container {
display: guides;
guides-template: left 0 2vmin, center 50% 10px, centercollapsed 50%, right 100% 2vmin;
guides-template: left 0 2vmin, center 50%, right 100% 2vmin;
}
.a {
@@ -33,7 +35,7 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
}
```

## Break the flow
## Break the flow (skip)

`.b` and `.c` will be displayed below `.a`, because `.c` skips `.b`.

@@ -48,7 +50,7 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
```css
.container {
display: guides;
guides-template: left 0 2vmin, center 50% 10px, centercollapsed 50%, right 100% 2vmin;
guides-template: left 0 2vmin, center 50% 10px, right 100% 2vmin;
}
.a {
@@ -65,6 +67,43 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
}
```

## Follow multiple elements without a wrapper (consume)

`.d` will be below `.b` and `.c`, whichever is higher, because `.d` consumes two elements.

```html
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
```

```css
.container {
display: guides;
guides-template: left 0 2vmin, center 50% 10px, right 100% 2vmin;
}
.a {
guides-snap: viewport;
}
.b {
guides-snap: left center;
}
.c {
guides-snap: center right;
}
.d {
guides-snap: left right;
guides-dependencies: consume 2;
}
```

## Parallax

`.follower` will move in a parallax motion with `.leader` in a way such that their top is aligned when they enter the viewport (from the bottom) and their bottoms are aligned when they leave the viewport (at the top).
@@ -91,3 +130,41 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
guides-mode: follow parallax;
}
```

## Pinning alongside a longer element

`.image` will be pinned alongside `.text`. It will enter the viewport with `.text` (both tops are aligned), the pin at the center of the viewport until it leaves with `.text` (bottoms aligned).

```html
<div class="container">
<div class="text">...tons of lorem ipsum...</div>
<img class="image" src="my-meme-collection/0081295.jpg">
</div>
```

```css
.container {
display: guides;
guides-template: left 0 2vmin, center 50% 10px, right 100% 2vmin;
}
.text {
guides-snap: left center;
}
.image {
guides-snap: center right;
guides-mode: follow pin center;
}
```

## Right-aligned guide

Using a negative position the offset is calculated from the right. So if you want a right column that is always 200px you could do `calc(100% - 200px)` or just do `-200px`.

```css
.container {
display: guides;
guides-template: sidebar -200px;
}
```
@@ -12263,7 +12263,10 @@ var Behavior = function () {
var behaviorName = this.constructor.behaviorName;

this.el.resetBehaviorStyles(behaviorName);
this.contentEl.resetBehaviorStyles(behaviorName);

if (this.contentEl) {
this.contentEl.resetBehaviorStyles(behaviorName);
}
}
}, {
key: '_proxyProps',
Binary file not shown.
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title>
<title>Scrollmeister Galleries</title>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
@@ -22,46 +22,55 @@
background: rgba(0, 255, 0, 0.5);
box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
}
.buttons {
position: fixed;
left: 1em;
top: 1em;
}
</style>
</head>
<body>
<scroll-meister debug-guides scroll
guides-layout="
guides:
left 0 2vmin,
leftthird 33.333% 10px,
rando 33.333% 10px,
center 50% 50px,
right 100% 2vmin;
width :
1200px;
"
>
<element-meister layout="height: 10vh; spacing: 2vh;"></element-meister>
<element-meister layout="guides: left right; height: 10vh; spacing: 2vh;"></element-meister>
<element-meister layout="guides: left leftthird; height: 10vh; spacing: 2vh;"></element-meister>
<element-meister layout="guides: center right; height: 10vh; spacing: 2vh; dependencies: skip 1"></element-meister>
<element-meister layout="guides: leftthird right; height: 10vh; spacing: 2vh;"></element-meister>
<element-meister layout="guides: left leftthird; height: 15vh; spacing: 2vh; dependencies: skip 1"></element-meister>
<element-meister layout="guides: viewport leftthird; height: 10vh; spacing: 2vh"></element-meister>
<element-meister layout="height: 10vh; spacing: 2vh;">a</element-meister>
<element-meister layout="guides: left right; height: 10vh; spacing: 2vh;">b</element-meister>
<element-meister layout="guides: left rando; height: 10vh; spacing: 2vh;" id="c">c</element-meister>
<element-meister layout="guides: center right; height: 10vh; spacing: 2vh; dependencies: skip 1" id="d">d</element-meister>
<element-meister layout="guides: rando center; height: 10vh; spacing: 2vh;">e</element-meister>
<element-meister layout="guides: left rando; height: 15vh; spacing: 2vh; dependencies: skip 1 consume 3">f</element-meister>
<element-meister layout="guides: viewport rando; height: 10vh; spacing: 2vh">g</element-meister>
</scroll-meister>

<div class="buttons">
<button type="button" id="toggle-guides">Toggle visibility</button>
<button type="button" id="rando">Randomize the "rando" guide</button>
</div>

<script src="../dist/scrollmeister-extras.js"></script>
<script>
var meister = document.querySelector('scroll-meister');
document.addEventListener('mousemove', function(e) {
var x = (e.clientX - 200) / 1280;
var wrapper = document.querySelector('scroll-meister');
x = Math.min(x, 0.4);
x = Math.max(x, 0.1);
x = x * 100;
document.querySelector('#toggle-guides').addEventListener('click', function() {
if(wrapper.hasAttribute('debug-guides')) {
wrapper.removeAttribute('debug-guides')
} else {
wrapper.setAttribute('debug-guides', '')
}
});
meister.guidesLayout.guides = `
left 0 2vmin,
leftthird ${x}% 10px,
center 50% 50px,
right 100% 2vmin
`;
document.querySelector('#rando').addEventListener('click', function() {
var position = 10 + (Math.random() * 30)
wrapper.guidesLayout.guides = 'left 0 2vmin, rando ' + position + '% 10px, center 50% 50px, right 100% 2vmin';
});
</script>
</body>
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title>
<title>Scrollmeister full page slides</title>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
@@ -47,12 +47,18 @@
.content {
color: #fff;
background: rgba(0, 0, 0, 0.6);
padding: 1em;
padding: 2em;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<scroll-meister fadein scroll guides-layout="guides: text-left 10%, text-right 50%; width: 10000px;">
<scroll-meister fadein scroll guides-layout="guides: text-left 0 2vmin, text-right 50%; width: 1440px;">
<element-meister layout="guides: text-left text-right; spacing: 50vh;">
<div class="content">
<h2>Lorem Ipsum</h2>
@@ -68,6 +74,24 @@ <h2>Lorem Ipsum</h2>
<img src="assets/images/niilo-isotalo-379496-unsplash.jpg">
</element-meister>

<element-meister layout="guides: text-left text-right; spacing: 50vh 0;">
<div class="content">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</element-meister>
<element-meister layout="guides: text-left text-right; spacing: 5vh 50vh;">
<img src="assets/images/photo-1426170042593-200f250dfdaf.jpg" width="1920" height="1080" />
</element-meister>
<element-meister class="background" layout="height: 100vh; mode: follow; followerMode: pin; dependencies: consume 2; spacing: -50vh;" media="ratio: 480 / 270" autoplay>
<video src="assets/videos/bunny.mp4" type="video/mp4" muted playsInline loop></video>
</element-meister>

<element-meister layout="guides: text-left text-right; spacing: 50vh;">
<div class="content">
<h2>Lorem Ipsum</h2>
@@ -79,8 +103,8 @@ <h2>Lorem Ipsum</h2>
</p>
</div>
</element-meister>
<element-meister class="background" layout="height: 100vh; mode: follow; followerMode: pin; spacing: -50vh;" media="ratio: 480 / 270" autoplay>
<video src="assets/videos/bunny.mp4" type="video/mp4" muted playsInline></video>
<element-meister class="background" layout="height: 100vh; mode: follow; followerMode: pin; spacing: -50vh;" media="ratio: 1920 / 1280">
<img src="assets/images/photo-1432149629818-13b6e10a6e2c.jpg">
</element-meister>
</scroll-meister>

@@ -91,11 +115,11 @@ <h2>Lorem Ipsum</h2>
meister.addEventListener('guides-layout:attach', function() {
function resize() {
if(window.innerWidth < 768) {
meister.guidesLayout.guides = 'text-left 0 2vmin, text-right 100% 2vmin';
meister.guidesLayout.guides = 'text-left 0 20px, text-right 100% 20px';
} else if(window.innerWidth < 1024) {
meister.guidesLayout.guides = 'text-left 10%, text-right -10%';
} else {
meister.guidesLayout.guides = 'text-left 10%, text-right 50%';
meister.guidesLayout.guides = 'text-left 0 2vmin, text-right 50%';
}
}
@@ -135,7 +135,7 @@ <h2>Pinned (at top) element with another</h2>
</element-meister>

<element-meister layout="spacing: 50vh 0; guides: left right;">
<h2>PaRalLax OnLy wOrKs WiTh iMaGes</h2>
<h2>PaRalLax dOeS NoT wOrK On aRbItRaRy ElEmEnTs</h2>
</element-meister>

<element-meister layout="height: 50vh;"></element-meister>
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title>
<title>Scrollmeister WebGL shaders</title>
<style>
footer {
text-align: center;
@@ -413,7 +413,10 @@ export default class Behavior {
let behaviorName = this.constructor.behaviorName;

this.el.resetBehaviorStyles(behaviorName);
this.contentEl.resetBehaviorStyles(behaviorName);

if (this.contentEl) {
this.contentEl.resetBehaviorStyles(behaviorName);
}
}

_proxyProps() {
@@ -7,9 +7,6 @@ html
body
margin: 0

//TODO: need another wrapper which is just positioned static and makes room. width can be styled from user-land. This wrapper creates the right context for us within the host page
//This also enables sections with different backgrounds and stuff like nav/header/footer
scroll-meister
display: block
position: static

0 comments on commit 3cfdedb

Please sign in to comment.
You can’t perform that action at this time.