Webleb - Snippets de Código

HTML

<!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>

Metehan

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS