<div class="hero " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-7 grid__col--offset-md-1
hero__grid-col">
<h1 class="hero__title h1">Business & transformation</h1>
</div>
</div>
</div>
<div class="hero__bg">
<figure class="image hero__bg-image">
<img loading="eager" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20375%20525%22%3E%3C%2Fsvg%3E" data-srcset="" data-sizes="auto" alt="" class="image__img ">
</figure>
</div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Business & transformation",
"image": true
}
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}
<div class="hero hero--offset " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-8 grid__col--offset-md-1
hero__grid-col">
<h1 class="hero__title h1">Digital-first powerhouse driving growth for businesses.</h1>
</div>
<div class="grid__col grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
hero__grid-col">
<div class="hero__description text">
<p>This is a joint venture of an outstanding development house <a href="#" class="link">gotoAndPlay</a> & design studio <a href="#" class="link">NOPE Creative</a>. Together we design & develop wide range of creative and strategic services.</p>
</div>
</div>
</div>
</div>
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
Scroll<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#scroll-24"></use>
</svg>
</a>
</div>
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
<div class="hero__canvas" data-options='{"showAnimation":true,"posPercentageX":110,"posPercentageY":110,"scaleX":1.5,"scaleY":1.5,"zoom":8,"velocity":0.004,"sine":0,"amplitude":90,"size":1,"speed":0.0001,"decay":0.42,"waves":10,"fragment":true,"complex":1,"electroflow":true,"hue":15}'></div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Digital-first powerhouse driving growth for businesses.",
"image": false,
"description": "<p>This is a joint venture of an outstanding development house <a href=\"#\" class=\"link\">gotoAndPlay</a> & design studio <a href=\"#\" class=\"link\">NOPE Creative</a>. Together we design & develop wide range of creative and strategic services.</p>",
"scroll": "Scroll",
"animation3d": {
"showAnimation": true,
"posPercentageX": 110,
"posPercentageY": 110,
"scaleX": 1.5,
"scaleY": 1.5,
"zoom": 8,
"velocity": 0.004,
"sine": 0,
"amplitude": 90,
"size": 1,
"speed": 0.0001,
"decay": 0.42,
"waves": 10,
"fragment": true,
"complex": 1,
"electroflow": true,
"hue": 15
}
},
"modifier": "hero--offset"
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}
<div class="hero hero--offset " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-8 grid__col--offset-md-1
hero__grid-col">
<h1 class="hero__title h1">Digital-first powerhouse driving growth for businesses.</h1>
</div>
<div class="grid__col grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
hero__grid-col">
<div class="hero__description text">
<p>This is a joint venture of an outstanding development house <a href="#" class="link">gotoAndPlay</a> & design studio <a href="#" class="link">NOPE Creative</a>. Together we design & develop wide range of creative and strategic services.</p>
</div>
</div>
</div>
</div>
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
Scroll<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#scroll-24"></use>
</svg>
</a>
</div>
<div class="hero__bg hero__bg--video">
<div class="video hero__bg-video">
<div class="video__inner">
<video class="video__video lazyload" preload="none" data-object-fit muted="" data-autoplay="" loop="" playsinline="">
<source src="https://gotoand.dev/alliance/wp-content/uploads/landing-hero-video-recording.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Digital-first powerhouse driving growth for businesses.",
"image": false,
"description": "<p>This is a joint venture of an outstanding development house <a href=\"#\" class=\"link\">gotoAndPlay</a> & design studio <a href=\"#\" class=\"link\">NOPE Creative</a>. Together we design & develop wide range of creative and strategic services.</p>",
"scroll": "Scroll",
"video": {
"videos": [
{
"type": "video/mp4",
"src": "https://gotoand.dev/alliance/wp-content/uploads/landing-hero-video-recording.mp4"
}
]
}
},
"modifier": "hero--offset"
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}
<div class="hero hero--large " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
hero__grid-col">
<h1 class="hero__title h1">Projects we’ve worked on</h1>
</div>
<div class="grid__col grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
hero__grid-col">
<div class="hero__description text">
<p>Lorem ipsum dolor sit amet, an quando quaestio efficiendi mea, scripta scribentur id vis. Justo albucius has an, wisi senserit id mea</p>
</div>
</div>
</div>
</div>
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
Scroll<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#scroll-24"></use>
</svg>
</a>
</div>
<div class="hero__bg">
<figure class="image hero__bg-image">
<img loading="eager" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20375%20525%22%3E%3C%2Fsvg%3E" data-srcset="" data-sizes="auto" alt="" class="image__img ">
</figure>
</div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Projects we’ve worked on",
"image": true,
"description": "<p>Lorem ipsum dolor sit amet, an quando quaestio efficiendi mea, scripta scribentur id vis. Justo albucius has an, wisi senserit id mea</p>",
"scroll": "Scroll"
},
"modifier": "hero--large"
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}
<div class="hero hero--split " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
hero__grid-col">
<h1 class="hero__title ">Website for the largest cybersecurity community – EU Cybernet</h1>
</div>
<div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
hero__grid-col">
<div class="hero__description text">
<h3>A fresh new take on the construction market, a solution that lets you streamline the processes effortless and paperless.</h3>
</div>
</div>
</div>
</div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Website for the largest cybersecurity community – EU Cybernet",
"image": false,
"description": "<h3>A fresh new take on the construction market, a solution that lets you streamline the processes effortless and paperless.</h3>"
},
"modifier": "hero--split"
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}
<div class="hero hero--3d " data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
<div class="grid__col grid__col--md-7 grid__col--offset-md-1
hero__grid-col">
<h1 class="hero__title h1">Projects we’ve worked on</h1>
</div>
<div class="grid__col grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
hero__grid-col">
<div class="hero__description text">
<p>Lorem ipsum dolor sit amet, an quando quaestio efficiendi mea, scripta scribentur id vis. Justo albucius has an, wisi senserit id mea</p>
</div>
</div>
</div>
</div>
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
Scroll<svg class="icon link__icon">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#scroll-24"></use>
</svg>
</a>
</div>
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
<div class="hero__canvas" data-options='{"showAnimation":true,"posPercentageX":50,"posPercentageY":125,"scaleX":1.8,"scaleY":0.5,"zoom":5,"velocity":0,"sine":0,"amplitude":13,"size":1,"speed":0.0002,"decay":0.26,"waves":15,"fragment":false,"complex":0.4,"electroflow":true,"hue":11}'></div>
</div>
{% set titleCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-8 grid__col--offset-md-1
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-11
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1 hero__title--set-left
{% else %}
grid__col--md-7 grid__col--offset-md-1
{% endif %}
{% endset %}
{% set descriptionCol %}
{% if 'hero--offset' in modifier %}
grid__col--md-7 grid__col--offset-md-4 grid__col--offset-lg-4
{% elseif 'hero--large' in modifier %}
grid__col--md-7 grid__col--offset-md-1 grid__col--lg-5
{% elseif 'hero--split' in modifier %}
grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1
{% else %}
grid__col--md-7 grid__col--offset-md-2 grid__col--lg-5
{% endif %}
{% endset %}
{% set animation3dScripts %}
<!--
//
// GLSL textureless classic 3D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author: Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-10-11
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
-->
<script id="vertexShader" type="x-shader/x-vertex">
vec3 mod289(vec3 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x)
{
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x)
{
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t) {
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
// Classic Perlin noise
float cnoise(vec3 P)
{
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
// Classic Perlin noise, periodic variant
float pnoise(vec3 P, vec3 rep)
{
vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
Pi0 = mod289(Pi0);
Pi1 = mod289(Pi1);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 * (1.0 / 7.0);
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 * (1.0 / 7.0);
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 1.5 * n_xyz;
}
// Turbulence By Jaume Sanchez => https://codepen.io/spite/
varying vec2 vUv;
varying float noise;
varying float qnoise;
varying float displacement;
uniform float time;
uniform float pointscale;
uniform float decay;
uniform float complex;
uniform float waves;
uniform float eqcolor;
uniform bool fragment;
float turbulence( vec3 p) {
float t = - 0.1;
for (float f = 1.0 ; f <= 3.0 ; f++ ){
float power = pow( 2.0, f );
t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );
}
return t;
}
void main() {
vUv = uv;
noise = (1.0 * - waves) * turbulence( decay * abs(normal + time));
qnoise = (2.0 * - eqcolor) * turbulence( decay * abs(normal + time));
float b = pnoise( complex * (position) + vec3( 1.0 * time ), vec3( 100.0 ) );
if (fragment == true) {
displacement = - sin(noise) + normalize(b * 0.5);
} else {
displacement = - sin(noise) + cos(b * 0.5);
}
vec3 newPosition = (position) + (normal * displacement);
gl_Position = (projectionMatrix * modelViewMatrix) * vec4( newPosition, 1.0 );
gl_PointSize = (pointscale);
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
varying float qnoise;
uniform float time;
uniform bool redhell;
void main() {
float r, g, b;
if (!redhell == true) {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = 0.0;
} else {
r = cos(qnoise + 0.5);
g = cos(qnoise - 0.5);
b = abs(qnoise);
}
gl_FragColor = vec4(r, g, b, 1.0);
}
</script>
{% endset %}
<div class="hero {{ modifier }} {{ class }}" data-theme="dark">
<div class="hero__inner h-container">
<div class="grid grid--no-horizontal-gutter hero__grid">
{% if data.title %}
<div class="grid__col {{ titleCol }} hero__grid-col">
<h1 class="hero__title {% if 'hero--split' not in modifier %}h1{% endif %}">{{ data.title }}</h1>
</div>
{% endif %}
{% if data.description %}
<div class="grid__col {{ descriptionCol }} hero__grid-col">
<div class="hero__description text">{{ data.description }}</div>
</div>
{% endif %}
</div>
</div>
{% if data.scroll %}
<div class="hero__scroll h-container">
<a href="#" class="hero__scroll-link link">
{{ data.scroll|default('Scroll') }}{% include '@icon' with {name: 'scroll-24', modifier: '', class: 'link__icon'} %}
</a>
</div>
{% endif %}
{% if data.video or data.image %}
<div class="hero__bg{% if data.video %} hero__bg--video{% endif %}">
{% if data.video %}
{% include '@video' with { data: data.video, autoplay: true, loop: true, modifier: '', class: 'hero__bg-video' } %}
{% endif %}
{% if data.image %}
{% include '@image' with {
modifier: '',
class: 'hero__bg-image',
media: ['(min-width: 1000px)'],
data: data.image|srcset('375x525', ['1280x560']),
eager: true,
sizes: '100vw'
}
%}
{% endif %}
</div>
{% endif %}
{% if data.animation3d and data.animation3d.showAnimation %}
{{ animation3dScripts }}
<div class="hero__canvas" data-options='{{ data.animation3d|json_encode()|raw }}'></div>
{% endif %}
</div>
{
"language": "en-US",
"data": {
"title": "Projects we’ve worked on",
"image": false,
"description": "<p>Lorem ipsum dolor sit amet, an quando quaestio efficiendi mea, scripta scribentur id vis. Justo albucius has an, wisi senserit id mea</p>",
"scroll": "Scroll",
"animation3d": {
"showAnimation": true,
"posPercentageX": 50,
"posPercentageY": 125,
"scaleX": 1.8,
"scaleY": 0.5,
"zoom": 5,
"velocity": 0,
"sine": 0,
"amplitude": 13,
"size": 1,
"speed": 0.0002,
"decay": 0.26,
"waves": 15,
"fragment": false,
"complex": 0.4,
"electroflow": true,
"hue": 11
}
},
"modifier": "hero--3d"
}
@use 'sass:math';
.hero {
position: relative;
background-color: $color-text-01;
color: $color-text-03;
padding-top: 174px;
padding-bottom: 48px;
z-index: map-get($zindex, 'default');
min-height: 440px;
@include bp(md-min) {
padding-top: 278px;
min-height: 630px;
}
&.is-animating {
animation: none; // do not allow hero background to be animated.
}
}
.hero--large {
padding-bottom: 174px;
}
.hero--offset,
.hero--large {
@include bp(sm-min) {
min-height: 70vh;
}
@include bp(md-min) {
height: 100vh;
min-height: 950px;
}
}
.hero--split {
padding-top: 150px;
@include bp(md-min) {
padding-top: 205px;
}
}
.hero__grid {
margin-bottom: -48px;
@include bp(md-min) {
margin-bottom: -72px;
}
.hero--split & {
margin-bottom: -24px;
@include bp(md-min) {
margin-bottom: -48px;
}
}
}
.hero__grid-col {
margin-bottom: 48px;
@include bp(md-min) {
margin-bottom: 72px;
}
.hero--split & {
margin-bottom: 24px;
@include bp(md-min) {
margin-bottom: 48px;
}
}
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__title {
opacity: .01;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration;
@include bp(md-min) {
transform: translateY(56px);
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__description {
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
@include bp(md-min) {
transform: translateY(56px);
}
.hero--split & {
transition-delay: $transition-duration;
margin-top: 16px;
@include bp(sm-min) {
margin-top: 30px;
}
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
}
.hero__bg {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
.hero--offset &,
.hero--large & {
max-height: 435px;
@include bp(md-min) {
max-height: 540px;
}
}
}
.hero__bg--video {
display: flex;
align-items: flex-end;
}
.hero__bg--video .hero__bg-video {
width: 100%;
}
.video__video {
.hero__bg--video & {
object-fit: contain; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: center bottom; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
}
.hero__canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
transition-property: opacity;
transition-timing-function: $transition-easing-in;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.5;
.hero.is-animating & {
opacity: 1;
}
}
.hero__bg-image {
width: 100%;
height: 100%;
}
.image__picture,
.image__img {
.hero__bg-image & {
object-fit: cover; /* stylelint-disable-line plugin/no-unsupported-browser-features */
object-position: top center; /* stylelint-disable-line plugin/no-unsupported-browser-features */
width: 100%;
height: 100%;
}
}
a,
.link {
.hero & {
color: $color-text-03;
}
}
.hero__scroll {
display: none;
position: absolute;
top: calc(var(--app-height) - 80px); /* stylelint-disable-line plugin/no-unsupported-browser-features */
left: 0;
right: 0;
z-index: 1;
opacity: 0;
transform: translateY(32px);
transition-property: opacity, transform;
transition-timing-function: $transition-easing-out;
transition-duration: $transition-duration;
transition-delay: $transition-duration*1.3;
@include bp(md-min) {
transform: translateY(56px);
display: block;
}
body.core-has-loaded &,
.hero.is-animating & {
opacity: 1;
transform: translateY(0);
}
body.is-scrolled .hero & {
opacity: 0;
transition-delay: 0;
}
}
.hero__scroll-link {
display: inline-block;
}
.hero__title--set-left {
margin-right: math.div(100%, 12) * 4;
}
import * as THREE from 'three';
import Component from '../component/component';
import Helpers from '../helpers/helpers';
import './hero.scss';
class PrimitiveElement {
mesh: THREE.Object3D;
mat: THREE.ShaderMaterial;
lastMesh: THREE.Points;
constructor() {
this.mesh = new THREE.Object3D();
this.mat = new THREE.ShaderMaterial({
// fog: true,
fragmentShader: document.getElementById('fragmentShader').textContent,
uniforms: {
complex: {
type: 'f',
value: 0.0,
},
decay: {
type: 'f',
value: 0.0,
},
eqcolor: {
type: 'f',
value: 0.0,
},
fragment: {
type: 'i',
value: true,
},
pointscale: {
type: 'f',
value: 0.0,
},
redhell: {
type: 'i',
value: true,
},
time: {
type: 'f',
value: 0.0,
},
waves: {
type: 'f',
value: 0.0,
},
},
vertexShader: document.getElementById('vertexShader').textContent,
wireframe: false,
});
this.updateMesh();
}
updateToMobile(): void {
this.updateMesh(6);
}
updateToDesktop(): void {
this.updateMesh();
}
updateMesh(detail: number = 7): void {
const geo: THREE.IcosahedronBufferGeometry = new THREE.IcosahedronBufferGeometry(3, detail);
const mesh: THREE.Points = new THREE.Points(geo, this.mat);
if (this.lastMesh) {
this.mesh.remove(this.lastMesh);
this.lastMesh = mesh;
}
if (!this.lastMesh) {
this.lastMesh = mesh;
}
this.mesh.add(mesh);
}
}
interface IOptions {
posPercentageX: number;
posPercentageY: number;
scaleY: number;
scaleX: number;
zoom: number;
velocity: number;
sine: number;
amplitude: number;
size: number;
speed: number;
decay: number;
waves: number;
fragment: boolean;
complex: number;
electroflow: boolean;
hue: number;
}
export default class Hero extends Component {
static initSelector: string = '.hero';
animationFrame: number;
start: number;
scrollNext: JQuery;
canvasHolder: JQuery;
scene: THREE.Scene;
camera: THREE.PerspectiveCamera;
renderer: THREE.Renderer;
primitive: PrimitiveElement;
options: IOptions;
isStopped: boolean;
lastTime: number = Date.now();
fpsInterval: number = (1000 / 25);
constructor(target: HTMLElement) {
super(target);
this.scrollNext = this.element.find('.hero__scroll');
this.canvasHolder = this.element.find('.hero__canvas');
this.init();
if (this.canvasHolder.length) {
this.options = this.canvasHolder.data('options');
this.init3d();
}
}
get width(): number {
return this.element.outerWidth();
}
get height(): number {
return this.element.outerHeight();
}
destroy(): void {
window.removeEventListener('resize', this.onResize);
window.cancelAnimationFrame(this.animationFrame);
}
init(): void {
this.element.addClass('is-animating');
this.scrollNext.on('click', this.scrollToNext.bind(this));
}
onResize: () => void = (): void => {
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
const x: number = ((this.width * (this.options.posPercentageX / 100)) / this.width) * 2 - 1;
const y: number = -((this.height * (this.options.posPercentageY / 100)) / this.height) * 2 + 1;
const position: THREE.Vector3 = new THREE.Vector3(x, y, .5);
position.unproject(this.camera);
const dir: THREE.Vector3 = position.sub(this.camera.position).normalize();
const distance: THREE.Vector3 = -this.camera.position.z / dir.z;
const pos: THREE.Vector3 = this.camera.position.clone().add(dir.multiplyScalar(distance));
this.primitive.mesh.position.copy(pos);
if (screen.width > 1000) {
this.primitive.updateToDesktop();
} else {
this.primitive.updateToMobile();
}
};
init3d(): void {
this.start = Date.now();
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(55, this.width / this.height, 1, 1000);
this.camera.position.z = this.options.zoom;
this.renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: !(window.devicePixelRatio > 1),
powerPreference: 'high-performance',
});
this.renderer.setSize(this.width, this.height);
this.canvasHolder.append(this.renderer.domElement);
this.primitive = new PrimitiveElement();
this.primitive.mesh.scale.x = this.options.scaleX;
this.primitive.mesh.scale.y = this.options.scaleY;
this.scene.add(this.primitive.mesh);
window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.onScroll);
this.animation();
this.onResize();
}
animation(): void {
const now: number = Date.now();
const elapsed: number = now - this.lastTime;
if (elapsed > this.fpsInterval) {
this.lastTime = now - (elapsed % this.fpsInterval);
const performance: number = now * 0.003;
this.primitive.mesh.rotation.y += this.options.velocity;
this.primitive.mesh.rotation.x = (Math.sin(performance * this.options.sine) * this.options.amplitude) * Math.PI / 360;
this.primitive.mat.uniforms.time.value = this.options.speed * (now - this.start);
this.primitive.mat.uniforms.pointscale.value = this.options.size;
this.primitive.mat.uniforms.decay.value = this.options.decay;
this.primitive.mat.uniforms.complex.value = this.options.complex;
this.primitive.mat.uniforms.waves.value = this.options.waves;
this.primitive.mat.uniforms.eqcolor.value = this.options.hue;
this.primitive.mat.uniforms.fragment.value = this.options.fragment;
this.primitive.mat.uniforms.redhell.value = this.options.electroflow;
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
}
if (!this.isStopped) {
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
}
onScroll: () => void = (): void => {
if (Helpers.isOnScreen(this.canvasHolder)) {
if (this.isStopped) {
this.isStopped = false;
this.animationFrame = window.requestAnimationFrame(this.animation.bind(this));
}
} else {
this.isStopped = true;
}
};
scrollToNext(event: MouseEvent): void {
event.preventDefault();
const scrollTo: JQuery = this.element.next();
const offset: number = parseInt(scrollTo.css('margin-top'), 10);
if (scrollTo.length > 0) {
Helpers.scrollToTarget(scrollTo, offset);
}
}
}