<figure>
<h1>is<br />it</h1>
<h2><span data-letter="k">k</span><span data-letter="i">i</span><span data-letter="n">n</span><span data-letter="d">d</span></h2>
<h2><span data-letter="t">t</span><span data-letter="r">r</span><span data-letter="u">u</span><span data-letter="e">e</span></h2>
<h2><span data-letter="n">n</span><span data-letter="e">e</span><span data-letter="c">c</span><span data-letter="e">e</span><span data-letter="s">s</span><span data-letter="s">s</span><span data-letter="a">a</span><span data-letter="r">r</span><span data-letter="y">y</span></h2>
<h3>??<br />??</h3>
</figure>
<script id="effect_vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1);
}
</script>
<script id="effect_fragmentShader" type="x-shader/x-fragment">
varying vec2 vUv;
uniform vec2 resolution;
uniform float time;
float usin(float value) {
return sin(value * 2.45873)*0.05 + 0.05;
}
float noise(vec2 pos, float time) {
pos.x += usin(pos.y * 2.1 + 0.01) ;
pos.y += usin(.01);
float valueX = 0.0;
valueX += usin(pos.x + time * .6 + usin(pos.y * 0.5 + 0.1) * .5);
valueX += usin(pos.y + 10.10 + usin(pos.y * 2.5 + time * 0.1) * usin(pos.x * 0.05)* .05) ;
valueX /= .025;
float valueY = 0.0;
valueY += usin(pos.x + usin(pos.x * .5+ 0.2)*.05);
valueY += usin(pos.y * 0.1 + usin(pos.x * 1.1 + time * 0.1) * usin(pos.y * .05)* 0.05);
valueY /= .5;
float value = valueX * valueY;
return value;
}
void main(){
vec2 sourceCoord = vUv - 122.5;
sourceCoord.x *= resolution.x / resolution.y;
vec4 outputColour = vec4(0.0, 0.0, 0.0, 1.0);
float noise1 = noise(sourceCoord, time);
float noise2 = noise(sourceCoord * 0.5 + noise1 + 2.232, time);
float noise3 = noise(sourceCoord * 0.1 + vec2(noise1, noise2) + 21.232, time);
float noiseVal = (noise1 + noise2 + noise3)/1.0;
for (int i = 1; i < 20; i++) {
noiseVal = usin(noiseVal+time*.5);
}
noiseVal = noise(sourceCoord * 1.10 + noiseVal + .62, time);
outputColour.rgb = vec3(noiseVal*1.0);
outputColour.b = cos(noiseVal*6.100);
outputColour.g = cos(noiseVal*2.100);
outputColour.r = cos(noiseVal*3.100);
gl_FragColor = outputColour;
}
</script>
@mixin fluid-type($min-font-size: 12px, $max-font-size: 18px, $lower-range: 420px, $upper-range: 900px) {
font-size: calc(#{$min-font-size} + #{(($max-font-size / ($max-font-size * 0 + 1)) - ($min-font-size / ($min-font-size * 0 + 1)))} * ( (100vw - #{$lower-range}) / #{(($upper-range / ($upper-range * 0 + 1)) - ($lower-range / ($lower-range * 0 + 1)))}));
@media screen and (max-width: $lower-range) {
font-size: $min-font-size;
}
@media screen and (min-width: $upper-range){
font-size: $max-font-size;
}
}
@font-face {
font-family: 'Cardinal';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/cardinalfruit-medium-TRIAL.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/cardinalfruit-medium-TRIAL.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/cardinalfruitw-medium-TRIAL.woff') format('woff');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Sporting Grotesque';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/Sporting_Grotesque-Bold.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/Sporting_Grotesque-Bold.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/Sporting_Grotesque-Bold.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/Sporting_Grotesque-Bold.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
html{
-webkit-font-smoothing: antialiased !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
transition: background-color 2s ease;
@include fluid-type(6px, 40px, 320px, 2400px);
}
figure{
position:absolute;
width:40vw;
max-width:420px;
height:57vw;
max-height:599px;
top:50%;
left:50%;
text-align: center;
color: white;
overflow:hidden;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
transform: translate3d(-50%, -50%, 0);
perspective: 800px;
background: rgba(255,255,255,1);
&:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
transition: background-color 2s ease;
opacity:1;
mix-blend-mode:exclusion;
}
canvas{
opacity:0.9;
z-index:1;
}
h1, h3{
position: absolute;
left:50%;
z-index:100;
color: white;
z-index:100;
font-family:'Sporting Grotesque', sans-serif;
text-transform: uppercase;
font-size: 50%;
line-height:1.5;
letter-spacing: 0.2rem;
&:after{
//content:'';
position:absolute;
height:4vw;
width:4vw;
top:50%;
left:50%;
opacity:0.6;
transform:translateY(-50%) translateX(-50%) rotate(45deg);
border:1px solid white;
border-radius:10px;
}
}
h1{top:calc(30%);transform:translateX(-50%) translateY(-100%);}
h3{bottom: calc(30%);transform:translateX(-50%) translateY(100%);}
h2{
position: absolute;
top:50%;
left:50%;
z-index:100;
font-size:250%;
line-height:0;
font-family:'Cardinal', serif;
text-transform:uppercase;
white-space: nowrap;
backface-visibility:hidden;
transform: translate3d(-50%, -50%, 0) scaleY(0.5);
transform-origin: 50% 50%;
transition: transform 0s ease 1s;
span{
position: relative;
display:inline-block;
color:transparent;
&:after{
top:50%;
left:50%;
content:attr(data-letter);
position:absolute;
color: white;
transform: translate3d(-50%, -50%, 0) rotate3d(1,0,0,90deg);
transform-origin: 50% 0%;
transition: transform .2s, opacity .2s;
}
@for $i from 20 through 1 {
&:nth-of-type(#{$i}){
&:after{
transition: color .5s ease, transform .2s ease 0.1s * $i, opacity .2s ease 0s * $i;
}
}
}
}
&:nth-of-type(3){
span{
@for $i from 20 through 1 {
&:nth-of-type(#{$i}){
&:after{
transition: color .5s ease, transform .2s ease 0.05s * $i, opacity .2s ease 0s * $i;
}
}
}
}
}
}
}
.first{
background-color:#fce8e5;
figure:after{
background-color:#f99689;
}
figure h2:nth-of-type(1){
transform: translate3d(-50%, -50%, 0) scaleY(2.5);
transition: transform 4s ease;
transform-origin: 50% 50%;
span{
@for $i from 1 through 20 {
&:nth-of-type(#{$i}){
&:after{
transform: translate3d(-50%, -50%, 0) rotate3d(0,1,0,0deg);
transition: color .5s ease, transform .5s ease .2s * $i, opacity .5s ease .2s * $i;
}
}
}
}
}
}
.second{
background-color:#eafcf8;
figure:after{
background-color:#89f9e0;
}
figure h2{
&:nth-of-type(2){
transform: translate3d(-50%, -50%, 0) scaleY(2.5);
transition: transform 4s ease;
transform-origin: 50% 50%;
span{
@for $i from 1 through 20 {
&:nth-of-type(#{$i}){
&:after{
transform: translate3d(-50%, -50%, 0) rotate3d(0,1,0,0deg);
transition: color .5s ease, transform .5s ease .2s * $i, opacity .5s ease .2s * $i;
}
}
}
}
}
}
}
.third{
background-color:#fff8ed;
figure:after{
background-color:#ffc054;
}
figure h2{
&:nth-of-type(3){
transform: translate3d(-50%, -50%, 0) scaleY(2.5);
transition: transform 4s ease;
span{
@for $i from 1 through 20 {
&:nth-of-type(#{$i}){
&:after{
transform: translate3d(-50%, -50%, 0) rotate3d(0,1,0,0deg);
transition: color .5s ease, transform .5s ease .08s * $i, opacity .5s ease .1s * $i;
}
}
}
}
}
}
}
c = 1;
setInterval(function(){
c++;
if(c === 1){
$('html').attr('class','first');
}
if(c === 2){
$('html').attr('class','second');
}
if(c === 3){
$('html').attr('class','third');
c = 0;
}
}, 3500);
var bgColor = 0x000000;
var bgAlpha = 0;
var renderer = null;
var clock = null;
var effectScene = null;
var effectCamera = null;
var effectShader = null;
var effectShaderMaterial = null;
var effectSurfaceMesh = null;
var time = 0;
var tMY = 0;
var tMX = 0;
renderer = new THREE.WebGLRenderer({antialias: false, alpha: true});
renderer.setSize($('figure').width(), $('figure').height());
renderer.setClearColor(bgColor, bgAlpha);
$('figure').append(renderer.domElement);
clock = new THREE.Clock();
effectScene = new THREE.Scene();
effectCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
effectShader = {
uniforms: {
"time": { type: "f", value: 0 },
"mouse": {type: "2f", value: [0, 0]},
"viewSize": { type: "2f", value: [1024, 768] },
"image1Size": { type: "2f", value: [1024, 768]},
"resolution": {type: "2f", value: [$('figure').width(), $('figure').height()]}
},
vertexShader: document.getElementById('effect_vertexShader').textContent,
fragmentShader: document.getElementById('effect_fragmentShader').textContent
};
effectShaderMaterial = new THREE.ShaderMaterial(effectShader);
effectSurfaceMesh = new THREE.Mesh(new THREE.PlaneBufferGeometry( 2, 2 ), effectShaderMaterial);
effectScene.add(effectSurfaceMesh);
window.onresize = updateViewportSize;
updateViewportSize();
render();
function updateViewportSize() {
renderer.setSize($('figure').width(), $('figure').height());
effectShaderMaterial.uniforms['viewSize'].value = [$('figure').width(), $('figure').height()];
effectCamera.aspect = $('figure').width(), $('figure').height();
effectCamera.updateProjectionMatrix();
};
function render(name) {
time = clock.getElapsedTime();
tMX += tMX*0.01;
tMY += tMY*0.01;
renderer.render(effectScene, effectCamera);
effectShaderMaterial.uniforms['time'].value = time;
requestAnimationFrame(render);
};
Also see: Tab Triggers