Skip to content
This repository has been archived by the owner on Nov 22, 2018. It is now read-only.

Commit

Permalink
demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prinzhorn
Prinzhorn committed Apr 23, 2018
1 parent 131ff24 commit 3cfdedb
Show file tree
Hide file tree
Showing 10 changed files with 154 additions and 41 deletions.
85 changes: 81 additions & 4 deletions CSS-GUIDES-LAYOUT-MODULE.md
View file
@@ -1,6 +1,8 @@
# CSS Guides Layout Module # 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 ## Linear document flow


Expand All @@ -17,7 +19,7 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
```css ```css
.container { .container {
display: guides; 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 { .a {
Expand All @@ -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`. `.b` and `.c` will be displayed below `.a`, because `.c` skips `.b`.


Expand All @@ -48,7 +50,7 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
```css ```css
.container { .container {
display: guides; 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 { .a {
Expand All @@ -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 ## 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). `.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).
Expand All @@ -91,3 +130,41 @@ Just some random sketches of how Guides Layout could look in CSS. Clean af that
guides-mode: follow parallax; 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;
}
```
5 changes: 4 additions & 1 deletion dist/scrollmeister-extras.js
View file
Expand Up @@ -12263,7 +12263,10 @@ var Behavior = function () {
var behaviorName = this.constructor.behaviorName; var behaviorName = this.constructor.behaviorName;


this.el.resetBehaviorStyles(behaviorName); this.el.resetBehaviorStyles(behaviorName);
this.contentEl.resetBehaviorStyles(behaviorName);
if (this.contentEl) {
this.contentEl.resetBehaviorStyles(behaviorName);
}
} }
}, { }, {
key: '_proxyProps', key: '_proxyProps',
Expand Down
Binary file added examples/assets/images/sPoNgEbBoB.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion examples/adobe-spark-page.html → examples/galleries.html
View file
Expand Up @@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title> <title>Scrollmeister Galleries</title>
<style> <style>
body { body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
Expand Down
53 changes: 31 additions & 22 deletions examples/guides-layout.html
View file
Expand Up @@ -22,46 +22,55 @@
background: rgba(0, 255, 0, 0.5); background: rgba(0, 255, 0, 0.5);
box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
} }

.buttons {
position: fixed;
left: 1em;
top: 1em;
}
</style> </style>
</head> </head>
<body> <body>
<scroll-meister debug-guides scroll <scroll-meister debug-guides scroll
guides-layout=" guides-layout="
guides: guides:
left 0 2vmin, left 0 2vmin,
leftthird 33.333% 10px, rando 33.333% 10px,
center 50% 50px, center 50% 50px,
right 100% 2vmin; right 100% 2vmin;
width : width :
1200px; 1200px;
" "
> >
<element-meister layout="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;"></element-meister> <element-meister layout="guides: left right; height: 10vh; spacing: 2vh;">b</element-meister>
<element-meister layout="guides: left leftthird; height: 10vh; spacing: 2vh;"></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"></element-meister> <element-meister layout="guides: center right; height: 10vh; spacing: 2vh; dependencies: skip 1" id="d">d</element-meister>
<element-meister layout="guides: leftthird right; height: 10vh; spacing: 2vh;"></element-meister> <element-meister layout="guides: rando center; height: 10vh; spacing: 2vh;">e</element-meister>
<element-meister layout="guides: left leftthird; height: 15vh; spacing: 2vh; dependencies: skip 1"></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 leftthird; height: 10vh; spacing: 2vh"></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 src="../dist/scrollmeister-extras.js"></script>
<script> <script>
var meister = document.querySelector('scroll-meister'); var wrapper = document.querySelector('scroll-meister');

document.addEventListener('mousemove', function(e) {
var x = (e.clientX - 200) / 1280;


x = Math.min(x, 0.4); document.querySelector('#toggle-guides').addEventListener('click', function() {
x = Math.max(x, 0.1); if(wrapper.hasAttribute('debug-guides')) {

wrapper.removeAttribute('debug-guides')
x = x * 100; } else {
wrapper.setAttribute('debug-guides', '')
}
});


meister.guidesLayout.guides = ` document.querySelector('#rando').addEventListener('click', function() {
left 0 2vmin, var position = 10 + (Math.random() * 30)
leftthird ${x}% 10px, wrapper.guidesLayout.guides = 'left 0 2vmin, rando ' + position + '% 10px, center 50% 50px, right 100% 2vmin';
center 50% 50px,
right 100% 2vmin
`;
}); });
</script> </script>
</body> </body>
Expand Down
38 changes: 31 additions & 7 deletions examples/pageflow.html
View file
Expand Up @@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title> <title>Scrollmeister full page slides</title>
<style> <style>
body { body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
Expand Down Expand Up @@ -47,12 +47,18 @@
.content { .content {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
padding: 1em; padding: 2em;
}

img {
width: 100%;
height: auto;
vertical-align: middle;
} }
</style> </style>
</head> </head>
<body> <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;"> <element-meister layout="guides: text-left text-right; spacing: 50vh;">
<div class="content"> <div class="content">
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
Expand All @@ -68,6 +74,24 @@ <h2>Lorem Ipsum</h2>
<img src="assets/images/niilo-isotalo-379496-unsplash.jpg"> <img src="assets/images/niilo-isotalo-379496-unsplash.jpg">
</element-meister> </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;"> <element-meister layout="guides: text-left text-right; spacing: 50vh;">
<div class="content"> <div class="content">
<h2>Lorem Ipsum</h2> <h2>Lorem Ipsum</h2>
Expand All @@ -79,8 +103,8 @@ <h2>Lorem Ipsum</h2>
</p> </p>
</div> </div>
</element-meister> </element-meister>
<element-meister class="background" layout="height: 100vh; mode: follow; followerMode: pin; spacing: -50vh;" media="ratio: 480 / 270" autoplay> <element-meister class="background" layout="height: 100vh; mode: follow; followerMode: pin; spacing: -50vh;" media="ratio: 1920 / 1280">
<video src="assets/videos/bunny.mp4" type="video/mp4" muted playsInline></video> <img src="assets/images/photo-1432149629818-13b6e10a6e2c.jpg">
</element-meister> </element-meister>
</scroll-meister> </scroll-meister>


Expand All @@ -91,11 +115,11 @@ <h2>Lorem Ipsum</h2>
meister.addEventListener('guides-layout:attach', function() { meister.addEventListener('guides-layout:attach', function() {
function resize() { function resize() {
if(window.innerWidth < 768) { 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) { } else if(window.innerWidth < 1024) {
meister.guidesLayout.guides = 'text-left 10%, text-right -10%'; meister.guidesLayout.guides = 'text-left 10%, text-right -10%';
} else { } else {
meister.guidesLayout.guides = 'text-left 10%, text-right 50%'; meister.guidesLayout.guides = 'text-left 0 2vmin, text-right 50%';
} }
} }


Expand Down
2 changes: 1 addition & 1 deletion examples/parallax-all-the-things.html
View file
Expand Up @@ -135,7 +135,7 @@ <h2>Pinned (at top) element with another</h2>
</element-meister> </element-meister>


<element-meister layout="spacing: 50vh 0; guides: left right;"> <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>


<element-meister layout="height: 50vh;"></element-meister> <element-meister layout="height: 50vh;"></element-meister>
Expand Down
2 changes: 1 addition & 1 deletion examples/shaders.html → examples/slim-shaders.html
View file
Expand Up @@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister parallax ALL the things</title> <title>Scrollmeister WebGL shaders</title>
<style> <style>
footer { footer {
text-align: center; text-align: center;
Expand Down
5 changes: 4 additions & 1 deletion src/behaviors/Behavior.js
View file
Expand Up @@ -413,7 +413,10 @@ export default class Behavior {
let behaviorName = this.constructor.behaviorName; let behaviorName = this.constructor.behaviorName;


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


_proxyProps() { _proxyProps() {
Expand Down
3 changes: 0 additions & 3 deletions src/scrollmeister.sass
View file
Expand Up @@ -7,9 +7,6 @@ html
body body
margin: 0 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 scroll-meister
display: block display: block
position: static position: static
Expand Down

0 comments on commit 3cfdedb

Please sign in to comment.