Skip to content

Commit

Permalink
Style update + images
Browse files Browse the repository at this point in the history
  • Loading branch information
@crnacura
crnacura committed Feb 11, 2020
1 parent 2d5702e commit e6c6abd
Show file tree
Hide file tree
Showing 15 changed files with 90 additions and 269 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

Learn how to create a physics-based 3D cloth with [Cannon.js](https://github.com/schteppe/cannon.js) and [Three.js](https://threejs.org/) and use simplex noise to create a wind effect. By [Arno Di Nunzio](https://twitter.com/aqro)

![Physics-based 3D cloth with cannon.js and three.js](https://tympanus.net/codrops/wp-content/uploads/2020/01/codrops-cover-cloth-physics-three.jpg)
![Physics-based 3D cloth with cannon.js and three.js](https://tympanus.net/codrops/wp-content/uploads/2020/02/3DCloth_featured.jpg)

[Article on Codrops](https://tympanus.net/codrops/?p=46823)

[Demo](http://tympanus.net/Development/.../)
[Demo](http://tympanus.net/Tutorials/3DClothSlideshow/)

## Installation
Run this command in the terminal
Expand All @@ -26,7 +26,7 @@ npm run watch

## Credits

- Slider based on [Jesper Landberg's](https://twitter.com/Jesper_Landberg) [slider](https://codepen.io/ReGGae/pen/povjKxV)
- Slideshow based on [Jesper Landberg's](https://twitter.com/Jesper_Landberg) [slider](https://codepen.io/ReGGae/pen/povjKxV)
- [Three.js](https://threejs.org/)
- [Cannon.js](https://github.com/schteppe/cannon.js)
- [Simplex noise](https://www.npmjs.com/package/simplex-noise)
Expand Down
45 changes: 19 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,22 @@
<meta name="keywords" content="" />
<meta name="author" content="Arno Di Nunzio" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/dtk0eye.css">
<link rel="stylesheet" type="text/css" href="dist/app.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>
<!--script src="//tympanus.net/codrops/adpacks/analytics.js"></script-->
<script src="dist/app.js"></script>
</head>
<body>
<main>
<div class="frame">
<div class="frame__title-wrap">
<h1 class="frame__title">Physics 3D cloth</h1>
<h1 class="frame__title">3D Cloth Slideshow</h1>
<p class="frame__tagline">with <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> & <a href="https://github.com/schteppe/cannon.js" rel="noopener" target="_blank">Cannon.js</a></p>
<div class="frame__links">
<a href="">Previous Demo</a>
<a href="">Article</a>
<a href="">GitHub</a>
</div>
</div>
<div class="frame__links">
<a href="https://tympanus.net/Tutorials/CutoutCollageLayout/">Previous Demo</a>
<a href="https://tympanus.net/codrops/?p=46823">Article</a>
<a href="https://github.com/Aqro/Physics-slideshow-threejs-cannonjs">GitHub</a>
</div>
</div>
<div class="content">
Expand All @@ -32,51 +32,44 @@ <h2 class="visually-hidden">Slideshow</h2>
<ol class="slideshow__inner | js-slideshow">
<li class="slide | js-slide">
<img src="dist/img/portraits/01.jpg" crossorigin="anonymous" draggable="false">
<h3>Urban style</h3>
<h3>Urban jungle</h3>
</li>
<li class="slide | js-slide">
<img src="dist/img/portraits/02.jpg" crossorigin="anonymous" draggable="false">
<h3>Tokyo Rules</h3>
<h3>Tokyo Fresh</h3>
</li>
<li class="slide | js-slide">
<img src="dist/img/portraits/03.jpg" crossorigin="anonymous" draggable="false">
<h3>Under ground</h3>
<h3>Middle ninty</h3>
</li>
<li class="slide | js-slide">
<img src="dist/img/portraits/04.jpg" crossorigin="anonymous" draggable="false">
<h3>Minimal cities</h3>
<h3>Lyfto build</h3>
</li>
<li class="slide | js-slide">
<img src="dist/img/portraits/05.jpg" crossorigin="anonymous" draggable="false">
<h3>Incog nito</h3>
<h3>Venom seven</h3>
</li>
<li class="slide | js-slide">
<img src="dist/img/portraits/06.jpg" crossorigin="anonymous" draggable="false">
<h3>Green woods</h3>
<h3>House rules</h3>
</li>
</ol>
</nav>
<div aria-hidden="true">
<span class="title | split">
<span class="split__text | js-splited-text">URB</span>
</span>
<span class="title | split">
<span class="split__text | js-splited-text">AN</span>
</span>
<div class="title-wrap" aria-hidden="true">
<span class="title | split">
<span class="split__text | js-splited-text">STY</span>
<span class="split__text | js-splited-text">Urban</span>
</span>
<span class="title | split">
<span class="split__text | js-splited-text">LE</span>
<span class="split__text | js-splited-text">jungle</span>
</span>
</div>
<canvas id="stage"></canvas>
<div class="slideshow__circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="slideshow__deco">
<div class="deco"></div>
<div class="deco"></div>
</div>
</div>
</main>
<!--script src="https://tympanus.net/codrops/adpacks/demoad.js"></script-->
</body>
</html>
Binary file modified src/img/portraits/01.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/img/portraits/02.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/img/portraits/03.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/img/portraits/04.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/img/portraits/05.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/img/portraits/06.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions src/js/Slideshow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,11 @@ export default class Slideshow {
revealTexts() {
const title = this.states.activeSlide.title.toUpperCase()

const newTitle = title.split(' ').flatMap((word) => [
const newTitle = title.split(' ')
/*.flatMap((word) => [
word.substring(0, Math.ceil(word.length / 2)),
word.substring(Math.ceil(word.length / 2), word.length),
])
])*/

gsap.to(this.$els.split, {
duration : 0.8,
Expand Down
138 changes: 22 additions & 116 deletions src/sass/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}

:root {
font-size: 14px;
font-size: 16px;
}

html, body {
Expand All @@ -14,15 +14,15 @@ html, body {

body {
margin: 0;

--color-text: #38201e;
--color-bg: #fff2e1;
--color-circles: #FFFDF9;
--color-link: #9b887f;
--color-link-hover: #38201e;
--color-deco: rgba(212, 169, 126, 0.12);
--color-title: #292213;
--color-link: #c37646;
--color-link-hover: #000;
color: var(--color-text);
background-color: var(--color-bg);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
font-family: niveau-grotesk, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Expand Down Expand Up @@ -77,102 +77,38 @@ a:focus {
outline: none;
}

.message {
background: var(--color-text);
color: var(--color-bg);
padding: 1rem;
text-align: center;
}

.frame {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 3rem 5vw;
padding: 2rem;
text-align: center;
z-index: 1000;
pointer-events: none;
display: grid;
grid-template-rows: 1fr auto auto;
grid-template-areas: 'title'
'demos'
'links';

> * { pointer-events: all; }
position: relative;
z-index: 1200;
line-height: 1.5;
}

.frame__title {
margin: 0;

font-size: 1.125em;
}

.frame__links {
display: flex;
flex-direction: column;

a {
display: inline-block;
}

@media screen and (max-width: 53em) {
flex-direction: row;
justify-content: center;
}
font-size: 1rem;
font-weight: normal;
}

.frame__links a:not(:last-child) {
margin-bottom: .8rem;

@media screen and (max-width: 53em) {
margin-right: 1rem;
margin-bottom: 0;
}
}

.frame__demos {
margin: 1rem 0;

@media screen and (max-width: 53em) {
a:not(:last-child) {
display: inline-block;
margin-right: 1rem;
}
}
}


.frame__demo--current,
.frame__demo--current:hover {
color: var(--color-text);
margin-right: .8rem;
}

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

.frame__tagline {
display: block;
position: relative;
margin: 0;
// padding: 0 0 0 1rem;
line-height: 2;

color: var(--color-link);

a {
&:hover {
color: var(--color-link-hover);
}
}
}

@media screen and (min-width: 53em) {
Expand All @@ -185,61 +121,31 @@ a:focus {
z-index: 100;
top: 0;
left: 0;
line-height: 1;
display: grid;
align-content: space-between;
justify-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 3rem;
padding: 2rem 3rem;
pointer-events: none;
grid-template-columns: 25%;
grid-template-rows: auto auto auto;
grid-template-areas: '... ...'
'... ...'
'ctn ...';
grid-template-areas: 'title links';
}
.frame__title-wrap {
grid-area: ctn;
display: flex;
flex-direction: column;
grid-area: title;
line-height: 1.5;
}
.frame__title {
margin: 0;
}
.frame__demos {
display: flex;
align-items: center;
margin: 0;
grid-area: demos;
justify-self: end;

a:not(:last-child) {
margin-right: 1rem;
}
}
.frame__links {
// grid-area: links;
margin-top: 4rem;
grid-area: links;
padding: 0;
justify-self: end;
}
.frame a {
pointer-events: auto;
}
.content {
height: 100vh;
justify-content: center;
}
}


.frame__title-wrap {
@include maxw(53em) {
display: grid;
grid-template-rows: auto 1fr;
grid-template-areas:
'title'
'demos'
'links';
}
}
39 changes: 0 additions & 39 deletions src/sass/_circles.scss
View file

This file was deleted.

Loading

0 comments on commit e6c6abd

Please sign in to comment.