Webleb - UI Elements

HTML

CSS

<!DOCTYPE html>

<head>

<title>WildCanvas: Majestic Shadows</title>

<style>

:root {

--primary: #0a0a0a;

--secondary: #1a1a1a;

--accent: #d1a054;

--text: #f5f5f5;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Playfair Display', serif;

background-color: var(--primary);

color: var(--text);

overflow: hidden;

height: 100vh;

}

#canvas-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.header {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 1.5rem;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

mix-blend-mode: difference;

}

.logo {

font-size: 1.5rem;

font-weight: 700;

letter-spacing: 2px;

}

.nav-desktop {

display: flex;

gap: 2rem;

}

.nav-desktop a {

text-decoration: none;

color: var(--text);

font-size: 0.9rem;

letter-spacing: 1px;

position: relative;

transition: all 0.3s ease;

}

.nav-desktop a:after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 1px;

background-color: var(--accent);

transition: width 0.3s ease;

}

.nav-desktop a:hover:after {

width: 100%;

}

.donate-btn {

background-color: transparent;

color: var(--text);

border: 1px solid var(--text);

padding: 0.5rem 1.5rem;

border-radius: 2rem;

font-size: 0.8rem;

letter-spacing: 1px;

transition: all 0.3s ease;

}

.donate-btn:hover {

background-color: var(--text);

color: var(--primary);

}

.hamburger {

display: none;

cursor: pointer;

width: 24px;

height: 24px;

position: relative;

z-index: 101;

}

.hamburger span {

display: block;

width: 100%;

height: 2px;

background-color: var(--text);

position: absolute;

left: 0;

transition: all 0.3s ease;

}

.hamburger span:nth-child(1) {

top: 6px;

}

.hamburger span:nth-child(2) {

top: 12px;

}

.hamburger span:nth-child(3) {

top: 18px;

}

.mobile-nav {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background-color: var(--secondary);

z-index: 99;

transition: right 0.5s ease;

padding: 6rem 2rem;

display: flex;

flex-direction: column;

gap: 2rem;

}

.mobile-nav.active {

right: 0;

}

.mobile-nav a {

color: var(--text);

text-decoration: none;

font-size: 1.2rem;

letter-spacing: 1px;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

width: 100%;

z-index: 10;

}

.animal-name {

font-size: 5vw;

font-weight: 700;

margin-bottom: 1rem;

opacity: 0;

transform: translateY(20px);

}

.status {

font-size: 1rem;

letter-spacing: 2px;

text-transform: uppercase;

opacity: 0;

transform: translateY(20px);

}

.pagination {

position: fixed;

right: 2rem;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 1rem;

z-index: 10;

}

.pagination-dot {

width: 12px;

height: 12px;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.3);

cursor: pointer;

transition: all 0.3s ease;

}

.pagination-dot.active {

background-color: var(--accent);

transform: scale(1.3);

}

.loading {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: var(--primary);

display: flex;

justify-content: center;

align-items: center;

z-index: 1000;

}

.loading-text {

font-size: 1.5rem;

letter-spacing: 2px;

}

.progress-bar {

width: 200px;

height: 2px;

background-color: rgba(255, 255, 255, 0.2);

margin-top: 1rem;

overflow: hidden;

}

.progress {

height: 100%;

width: 0;

background-color: var(--accent);

transition: width 0.3s ease;

}

@media (max-width: 768px) {

.nav-desktop, .donate-btn {

display: none;

}

.hamburger {

display: block;

}

.animal-name {

font-size: 10vw;

}

.pagination {

right: 1rem;

}

</style>

</head>

<body>

<div class="loading-text">WILDCANVAS</div>

</div>

<div class="logo">WILDCANVAS</div>

<a href="#">Animals</a>

<a href="#">Conservation</a>

<a href="#">Habitat</a>

<a href="#">About</a>

<a href="#">Contact</a>

</nav>

<button class="donate-btn">SUPPORT</button>

</div>

</header>

<a href="#">Animals</a>

<a href="#">Conservation</a>

<a href="#">Habitat</a>

<a href="#">About</a>

<a href="#">Contact</a>

<button class="donate-btn">SUPPORT</button>

</nav>

<h1 class="animal-name">Amur Leopard</h1>

<div class="status">Critically Endangered</div>

</div>

</div>

// Animals data

const animals = [

{

status: "Critically Endangered",

image: "http://static.photos/nature/1200x630/1"

{

status: "Endangered",

image: "http://static.photos/nature/1200x630/2"

{

status: "Endangered",

image: "http://static.photos/nature/1200x630/3"

{

status: "Vulnerable",

image: "http://static.photos/nature/1200x630/4"

}

];

// DOM elements

const animalName = document.querySelector('.animal-name');

const statusText = document.querySelector('.status');

const paginationDots = document.querySelectorAll('.pagination-dot');

const loadingScreen = document.querySelector('.loading');

const progressBar = document.querySelector('.progress');

const hamburger = document.querySelector('.hamburger');

const mobileNav = document.querySelector('.mobile-nav');

// Three.js variables

let scene, camera, renderer, mesh, material;

let currentIndex = 0;

let isAnimating = false;

let imagesLoadedCount = 0;

// Initialize Three.js

function initThreeJS() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 1;

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById('canvas-container').appendChild(renderer.domElement);

// Create plane geometry

const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);

// Create shader material

material = new THREE.ShaderMaterial({

uniforms: {

progress: { value: 0 },

texture1: { value: null },

texture2: { value: null },

disp: { value: null },

intensity: { value: 0.5 }

vertexShader: `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

fragmentShader: `

uniform float progress;

uniform sampler2D texture1;

uniform sampler2D texture2;

uniform sampler2D disp;

uniform float intensity;

varying vec2 vUv;

void main() {

vec2 uv = vUv;

vec4 disp = texture2D(disp, uv);

vec2 distortedPosition1 = vec2(uv.x, uv.y + progress * (disp.r * intensity));

vec2 distortedPosition2 = vec2(uv.x, uv.y + (1.0 - progress) * (disp.r * intensity));

vec4 _texture1 = texture2D(texture1, distortedPosition1);

vec4 _texture2 = texture2D(texture2, distortedPosition2);

gl_FragColor = mix(_texture1, _texture2, progress);

}

});

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

// Load displacement texture

const loader = new THREE.TextureLoader();

loader.load('https://raw.githubusercontent.com/robin-dela/hover-effect/master/src/static/8.jpg', function(texture) {

material.uniforms.disp.value = texture;

});

// Load first two images

loadImages();

window.addEventListener('resize', onWindowResize);

}

// Load images

function loadImages() {

animals.forEach((animal, index) => {

const img = new Image();

img.src = animal.image;

img.onload = function() {

imagesLoadedCount++;

updateProgressBar();

if (index === 0 || index === 1) {

const texture = new THREE.Texture(img);

texture.needsUpdate = true;

if (index === 0) {

material.uniforms.texture1.value = texture;

} else {

material.uniforms.texture2.value = texture;

}

if (imagesLoadedCount === animals.length) {

setTimeout(() => {

loadingScreen.style.opacity = '0';

setTimeout(() => {

loadingScreen.style.display = 'none';

animateContentIn();

}, 500);

}

};

});

}

// Update progress bar

function updateProgressBar() {

const progress = (imagesLoadedCount / animals.length) * 100;

progressBar.style.width = `${progress}%`;

}

// Animate content in

function animateContentIn() {

gsap.to(animalName, {

y: 0,

opacity: 1,

duration: 1,

ease: "power3.out"

});

gsap.to(statusText, {

y: 0,

opacity: 1,

duration: 1,

delay: 0.3,

ease: "power3.out"

});

// Start auto slide

setTimeout(() => {

autoSlide();

}, 5000);

}

// Auto slide

function autoSlide() {

if (isAnimating) return;

const nextIndex = (currentIndex + 1) % animals.length;

changeSlide(nextIndex);

setTimeout(autoSlide, 5000);

}

// Change slide

function changeSlide(index) {

if (isAnimating || index === currentIndex) return;

isAnimating = true;

// Update pagination

paginationDots.forEach(dot => dot.classList.remove('active'));

paginationDots[index].classList.add('active');

// Animate content out

gsap.to([animalName, statusText], {

y: 20,

opacity: 0,

duration: 0.5,

ease: "power3.in",

onComplete: () => {

// Update content

animalName.textContent = animals[index].name;

statusText.textContent = animals[index].status;

// Animate content in

gsap.to([animalName, statusText], {

y: 0,

opacity: 1,

duration: 0.5,

ease: "power3.out"

});

}

});

// Load new texture

const loader = new THREE.TextureLoader();

loader.load(animals[index].image, function(texture) {

// Update textures

material.uniforms.texture1.value = material.uniforms.texture2.value;

material.uniforms.texture2.value = texture;

// Animate transition

material.uniforms.progress.value = 0;

gsap.to(material.uniforms.progress, {

value: 1,

duration: 2,

ease: "power2.inOut",

onComplete: () => {

currentIndex = index;

isAnimating = false;

}

});

}

// Handle window resize

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

// Animation loop

function animate() {

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

// Initialize

function init() {

initThreeJS();

animate();

// Pagination click events

paginationDots.forEach(dot => {

dot.addEventListener('click', function() {

const index = parseInt(this.getAttribute('data-index'));

changeSlide(index);

});

// Hamburger menu

hamburger.addEventListener('click', function() {

this.classList.toggle('active');

mobileNav.classList.toggle('active');

if (this.classList.contains('active')) {

this.querySelector('span:nth-child(1)').style.transform = 'rotate(45deg) translate(5px, 5px)';

this.querySelector('span:nth-child(2)').style.opacity = '0';

this.querySelector('span:nth-child(3)').style.transform = 'rotate(-45deg) translate(5px, -5px)';

} else {

this.querySelector('span:nth-child(1)').style.transform = 'none';

this.querySelector('span:nth-child(2)').style.opacity = '1';

this.querySelector('span:nth-child(3)').style.transform = 'none';

}

});

}

// Start the app

init();

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>WildCanvas: Majestic Shadows</title>

<style>

:root {

--primary: #0a0a0a;

--secondary: #1a1a1a;

--accent: #d1a054;

--text: #f5f5f5;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Playfair Display', serif;

background-color: var(--primary);

color: var(--text);

overflow: hidden;

height: 100vh;

}

#canvas-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

}

.header {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 1.5rem;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

mix-blend-mode: difference;

}

.logo {

font-size: 1.5rem;

font-weight: 700;

letter-spacing: 2px;

}

.nav-desktop {

display: flex;

gap: 2rem;

}

.nav-desktop a {

text-decoration: none;

color: var(--text);

font-size: 0.9rem;

letter-spacing: 1px;

position: relative;

transition: all 0.3s ease;

}

.nav-desktop a:after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 1px;

background-color: var(--accent);

transition: width 0.3s ease;

}

.nav-desktop a:hover:after {

width: 100%;

}

.donate-btn {

background-color: transparent;

color: var(--text);

border: 1px solid var(--text);

padding: 0.5rem 1.5rem;

border-radius: 2rem;

font-size: 0.8rem;

letter-spacing: 1px;

transition: all 0.3s ease;

}

.donate-btn:hover {

background-color: var(--text);

color: var(--primary);

}

.hamburger {

display: none;

cursor: pointer;

width: 24px;

height: 24px;

position: relative;

z-index: 101;

}

.hamburger span {

display: block;

width: 100%;

height: 2px;

background-color: var(--text);

position: absolute;

left: 0;

transition: all 0.3s ease;

}

.hamburger span:nth-child(1) {

top: 6px;

}

.hamburger span:nth-child(2) {

top: 12px;

}

.hamburger span:nth-child(3) {

top: 18px;

}

.mobile-nav {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background-color: var(--secondary);

z-index: 99;

transition: right 0.5s ease;

padding: 6rem 2rem;

display: flex;

flex-direction: column;

gap: 2rem;

}

.mobile-nav.active {

right: 0;

}

.mobile-nav a {

color: var(--text);

text-decoration: none;

font-size: 1.2rem;

letter-spacing: 1px;

}

.content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

width: 100%;

z-index: 10;

}

.animal-name {

font-size: 5vw;

font-weight: 700;

margin-bottom: 1rem;

opacity: 0;

transform: translateY(20px);

}

.status {

font-size: 1rem;

letter-spacing: 2px;

text-transform: uppercase;

opacity: 0;

transform: translateY(20px);

}

.pagination {

position: fixed;

right: 2rem;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 1rem;

z-index: 10;

}

.pagination-dot {

width: 12px;

height: 12px;

border-radius: 50%;

background-color: rgba(255, 255, 255, 0.3);

cursor: pointer;

transition: all 0.3s ease;

}

.pagination-dot.active {

background-color: var(--accent);

transform: scale(1.3);

}

.loading {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: var(--primary);

display: flex;

justify-content: center;

align-items: center;

z-index: 1000;

}

.loading-text {

font-size: 1.5rem;

letter-spacing: 2px;

}

.progress-bar {

width: 200px;

height: 2px;

background-color: rgba(255, 255, 255, 0.2);

margin-top: 1rem;

overflow: hidden;

}

.progress {

height: 100%;

width: 0;

background-color: var(--accent);

transition: width 0.3s ease;

}

@media (max-width: 768px) {

.nav-desktop, .donate-btn {

display: none;

}

.hamburger {

display: block;

}

.animal-name {

font-size: 10vw;

}

.pagination {

right: 1rem;

}

</style>

</head>

<body>

<div class="loading-text">WILDCANVAS</div>

</div>

<div class="logo">WILDCANVAS</div>

<a href="#">Animals</a>

<a href="#">Conservation</a>

<a href="#">Habitat</a>

<a href="#">About</a>

<a href="#">Contact</a>

</nav>

<button class="donate-btn">SUPPORT</button>

</div>

</header>

<a href="#">Animals</a>

<a href="#">Conservation</a>

<a href="#">Habitat</a>

<a href="#">About</a>

<a href="#">Contact</a>

<button class="donate-btn">SUPPORT</button>

</nav>

<h1 class="animal-name">Amur Leopard</h1>

<div class="status">Critically Endangered</div>

</div>

</div>

// Animals data

const animals = [

{

status: "Critically Endangered",

image: "http://static.photos/nature/1200x630/1"

{

status: "Endangered",

image: "http://static.photos/nature/1200x630/2"

{

status: "Endangered",

image: "http://static.photos/nature/1200x630/3"

{

status: "Vulnerable",

image: "http://static.photos/nature/1200x630/4"

}

];

// DOM elements

const animalName = document.querySelector('.animal-name');

const statusText = document.querySelector('.status');

const paginationDots = document.querySelectorAll('.pagination-dot');

const loadingScreen = document.querySelector('.loading');

const progressBar = document.querySelector('.progress');

const hamburger = document.querySelector('.hamburger');

const mobileNav = document.querySelector('.mobile-nav');

// Three.js variables

let scene, camera, renderer, mesh, material;

let currentIndex = 0;

let isAnimating = false;

let imagesLoadedCount = 0;

// Initialize Three.js

function initThreeJS() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 1;

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById('canvas-container').appendChild(renderer.domElement);

// Create plane geometry

const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);

// Create shader material

material = new THREE.ShaderMaterial({

uniforms: {

progress: { value: 0 },

texture1: { value: null },

texture2: { value: null },

disp: { value: null },

intensity: { value: 0.5 }

vertexShader: `

varying vec2 vUv;

void main() {

vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

}

fragmentShader: `

uniform float progress;

uniform sampler2D texture1;

uniform sampler2D texture2;

uniform sampler2D disp;

uniform float intensity;

varying vec2 vUv;

void main() {

vec2 uv = vUv;

vec4 disp = texture2D(disp, uv);

vec2 distortedPosition1 = vec2(uv.x, uv.y + progress * (disp.r * intensity));

vec2 distortedPosition2 = vec2(uv.x, uv.y + (1.0 - progress) * (disp.r * intensity));

vec4 _texture1 = texture2D(texture1, distortedPosition1);

vec4 _texture2 = texture2D(texture2, distortedPosition2);

gl_FragColor = mix(_texture1, _texture2, progress);

}

});

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

// Load displacement texture

const loader = new THREE.TextureLoader();

loader.load('https://raw.githubusercontent.com/robin-dela/hover-effect/master/src/static/8.jpg', function(texture) {

material.uniforms.disp.value = texture;

});

// Load first two images

loadImages();

window.addEventListener('resize', onWindowResize);

}

// Load images

function loadImages() {

animals.forEach((animal, index) => {

const img = new Image();

img.src = animal.image;

img.onload = function() {

imagesLoadedCount++;

updateProgressBar();

if (index === 0 || index === 1) {

const texture = new THREE.Texture(img);

texture.needsUpdate = true;

if (index === 0) {

material.uniforms.texture1.value = texture;

} else {

material.uniforms.texture2.value = texture;

}

if (imagesLoadedCount === animals.length) {

setTimeout(() => {

loadingScreen.style.opacity = '0';

setTimeout(() => {

loadingScreen.style.display = 'none';

animateContentIn();

}, 500);

}

};

});

}

// Update progress bar

function updateProgressBar() {

const progress = (imagesLoadedCount / animals.length) * 100;

progressBar.style.width = `${progress}%`;

}

// Animate content in

function animateContentIn() {

gsap.to(animalName, {

y: 0,

opacity: 1,

duration: 1,

ease: "power3.out"

});

gsap.to(statusText, {

y: 0,

opacity: 1,

duration: 1,

delay: 0.3,

ease: "power3.out"

});

// Start auto slide

setTimeout(() => {

autoSlide();

}, 5000);

}

// Auto slide

function autoSlide() {

if (isAnimating) return;

const nextIndex = (currentIndex + 1) % animals.length;

changeSlide(nextIndex);

setTimeout(autoSlide, 5000);

}

// Change slide

function changeSlide(index) {

if (isAnimating || index === currentIndex) return;

isAnimating = true;

// Update pagination

paginationDots.forEach(dot => dot.classList.remove('active'));

paginationDots[index].classList.add('active');

// Animate content out

gsap.to([animalName, statusText], {

y: 20,

opacity: 0,

duration: 0.5,

ease: "power3.in",

onComplete: () => {

// Update content

animalName.textContent = animals[index].name;

statusText.textContent = animals[index].status;

// Animate content in

gsap.to([animalName, statusText], {

y: 0,

opacity: 1,

duration: 0.5,

ease: "power3.out"

});

}

});

// Load new texture

const loader = new THREE.TextureLoader();

loader.load(animals[index].image, function(texture) {

// Update textures

material.uniforms.texture1.value = material.uniforms.texture2.value;

material.uniforms.texture2.value = texture;

// Animate transition

material.uniforms.progress.value = 0;

gsap.to(material.uniforms.progress, {

value: 1,

duration: 2,

ease: "power2.inOut",

onComplete: () => {

currentIndex = index;

isAnimating = false;

}

});

}

// Handle window resize

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

// Animation loop

function animate() {

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

// Initialize

function init() {

initThreeJS();

animate();

// Pagination click events

paginationDots.forEach(dot => {

dot.addEventListener('click', function() {

const index = parseInt(this.getAttribute('data-index'));

changeSlide(index);

});

// Hamburger menu

hamburger.addEventListener('click', function() {

this.classList.toggle('active');

mobileNav.classList.toggle('active');

if (this.classList.contains('active')) {

this.querySelector('span:nth-child(1)').style.transform = 'rotate(45deg) translate(5px, 5px)';

this.querySelector('span:nth-child(2)').style.opacity = '0';

this.querySelector('span:nth-child(3)').style.transform = 'rotate(-45deg) translate(5px, -5px)';

} else {

this.querySelector('span:nth-child(1)').style.transform = 'none';

this.querySelector('span:nth-child(2)').style.opacity = '1';

this.querySelector('span:nth-child(3)').style.transform = 'none';

}

});

}

// Start the app

init();

</script>

</body>

</html>