Skip to content

Commit

Permalink
Codrops structure!
Browse files Browse the repository at this point in the history
  • Loading branch information
@vaneenige
vaneenige committed Mar 19, 2019
1 parent 9e1caac commit 0037e9a
Show file tree
Hide file tree
Showing 8 changed files with 287 additions and 18 deletions.
24 changes: 24 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# WebGL based transitions on scroll

A demo that demonstrates how a smooth WebGL transition can be realized using Phenomenon (based on three.js).

![Scroll Transitions WebGL]('')

[Article on Codrops]('')

[Demo]('')

## Credits

- [three.js](https://threejs.org/) by Ricardo Cabello
- [phenomenon](https://github.com/vaneenige/THREE.Phenomenon) by Colin van Eenige

## License
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

## Misc
Follow Colin: [Twitter](https://twitter.com/cvaneenige), [Codepen](https://codepen.io/cvaneenige), [GitHub](https://github.com/vaneenige)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)

[© Codrops 2018](http://www.codrops.com)
181 changes: 181 additions & 0 deletions css/base.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
box-sizing: border-box;
}

:root {
font-size: 15px;
}

html {
background: #000;
}

body {
font-family: Didot, "Didot LT STD", "Bodoni MT", "ltc-bodoni-175", "Hoefler Text", Garamond, "Times New Roman", serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #000;
overflow: hidden;
}

/* Color schemes */
.demo-1 {
--color-text: #86eae7;
--color-link: #fff;
--color-link-hover: #86eae7;
--color-title: #fff;
}

.demo-2 {
--color-text: #ff53ff;
--color-link: #3c48fa;
--color-link-hover: #fff;
--color-title: #fff;
}

.demo-3 {
--color-text: #1ed97c;
--color-link: #fff;
--color-link-hover: #fff;
--color-title: #fff;
}

.demo-4 {
--color-text: #f0ea42;
--color-link: #ce8c32;
--color-link-hover: #fff;
--color-title: #ce8c32;
}

.demo-5 {
--color-text: #5c5ee7;
--color-link: #0ab5e4;
--color-link-hover: #fff;
--color-title: #0ab5e4;
}

a {
text-decoration: none;
color: var(--color-link);
outline: none;
}

a:hover,
a:focus {
color: var(--color-link-hover);
outline: none;
}

.frame {
padding: 3rem 5vw;
text-align: center;
position: relative;
z-index: 1000;
}

.frame__title {
font-size: 1rem;
margin: 0 0 1rem;
font-weight: normal;
}

.frame__links {
display: inline;
}

.frame__github,
.frame__links a:not(:last-child),
.frame__demos a:not(:last-child) {
margin-right: 1rem;
}

.frame__demos {
margin: 1rem 0;
}

.frame__demo--current,
.frame__demo--current:hover {
text-decoration: underline;
color: var(--color-link);
}

.content {
display: flex;
flex-direction: column;
width: 100vw;
height: calc(100vh - 13rem);
position: relative;
justify-content: flex-start;
align-items: center;
}

.content__title {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin: -5.5vw 0 0 0;
z-index: 100;
font-size: 10vw;
color: var(--color-title);
line-height: 1;
}

@media screen and (min-width: 53em) {
.message {
display: none;
}
.frame {
position: fixed;
text-align: left;
z-index: 10000;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 2rem 2.25rem;
pointer-events: none;
grid-template-columns: 25% 50% 25%;
grid-template-rows: auto auto auto;
grid-template-areas: 'title title ... '
'... ... ...'
'github demos links';
}
.frame__title-wrap {
grid-area: title;
display: flex;
}
.frame__title {
margin: 0;
}
.frame__github {
grid-area: github;
justify-self: start;
margin: 0;
}
.frame__demos {
margin: 0;
grid-area: demos;
justify-self: center;
}
.frame__links {
grid-area: links;
padding: 0;
justify-self: end;
}
.frame a {
pointer-events: auto;
}
.content {
height: 100vh;
justify-content: center;
}
}
5 changes: 3 additions & 2 deletions demo/style.css → css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: white;
}

canvas {
Expand All @@ -24,7 +25,7 @@ body {
min-height: 10000px;
}

.content {
.header {
width: 100%;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -68,7 +69,7 @@ p {
text-align: center;
color: white;
max-width: calc(100% - 80px);
width: 600px;
width: 640px;
left: 50%;
transform: translateX(-50%);
padding: 0 40px;
Expand Down
11 changes: 2 additions & 9 deletions demo/index.html → demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
<html>
html>
<head>
<title>WebGL based transitions on scroll</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="content">
<h1>Phenomenon</h1>
<p>WebGL based transitions on scroll</p>
</div>
<div class="heading">A tiny wrapper around three.js built for high-performance WebGL experiences.</div>
<div class="heading">GPU based for smooth transitions like scale, rotation and movement.</div>
<div class="heading">Modify default geometry and material for infinite possibilities. </div>
<div class="heading">That's it, thank you for scrolling! :)</div>

<script src="https://unpkg.com/three@0.102.1/build/three.min.js"></script>
<script src="https://unpkg.com/three.phenomenon@1.1.0/dist/three.phenomenon.umd.js"></script>
<script src="https://unpkg.com/uos@1.1.1/dist/uos.umd.js"></script>
Expand Down
70 changes: 70 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WebGL based transitions on scroll | Codrops</title>
<meta name="description" content="WebGL based transitions on scroll" />
<meta
name="keywords"
content="webgl, particles, shader, threejs, javascript, demo, web development"
/>
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
document.documentElement.className = 'js';
var supportsCssVars = function() {
var e,
t = document.createElement('style');
return (
(t.innerHTML = 'root: { --tmp-var: bold; }'),
document.head.appendChild(t),
(e = !!(
window.CSS &&
window.CSS.supports &&
window.CSS.supports('font-weight', 'var(--tmp-var)')
)),
t.parentNode.removeChild(t),
e
);
};
supportsCssVars() ||
alert('Please view this demo in a modern browser that supports CSS Variables.');
</script>
</head>
<body style="overflow: auto;">
<main>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">WebGL transitions on scroll</h1>
</div>
<a class="frame__github" href="">GitHub</a>
<div class="frame__links">
<a href="">Previous Demo</a>
<a href="">Article</a>
</div>
</div>
<div class="content content--canvas">
<div class="header">
<h1>Phenomenon</h1>
<p>WebGL based transitions on scroll</p>
</div>
<div class="heading">
A tiny wrapper around three.js built for high-performance WebGL experiences.
</div>
<div class="heading">
GPU based for smooth transitions like scale, rotation and movement.
</div>
<div class="heading">Modify default geometry and material for infinite possibilities.</div>
<div class="heading">That's it, thank you for scrolling! :)</div>
</div>
</main>

<script src="https://unpkg.com/three@0.102.1/build/three.min.js"></script>
<script src="https://unpkg.com/three.phenomenon@1.1.0/dist/three.phenomenon.umd.js"></script>
<script src="https://unpkg.com/uos@1.1.1/dist/uos.umd.js"></script>
<script src="/js/bundle.umd.js"></script>
</body>
</html>
Loading

0 comments on commit 0037e9a

Please sign in to comment.