Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>VelocityVista | Premium Automotive Experience</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;600;700&display=swap');

:root {

--primary: #0a0a0a;

--secondary: #1a1a1a;

--accent: #e50914;

--text-primary: #f5f5f5;

--text-secondary: #a1a1a1;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Montserrat', sans-serif;

background-color: var(--primary);

color: var(--text-primary);

overflow-x: hidden;

height: 100vh;

}

.display-font {

font-family: 'Bebas Neue', sans-serif;

letter-spacing: 2px;

}

#webgl-canvas {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

opacity: 0;

transition: opacity 1.5s ease;

}

.header {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 1.5rem 3rem;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 100;

mix-blend-mode: difference;

}

.nav-links {

display: flex;

gap: 2rem;

}

.nav-link {

color: var(--text-primary);

text-decoration: none;

font-weight: 600;

text-transform: uppercase;

font-size: 0.85rem;

letter-spacing: 1px;

position: relative;

transition: color 0.3s ease;

}

.nav-link:hover {

color: var(--accent);

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--accent);

transition: width 0.3s ease;

}

.nav-link:hover::after {

width: 100%;

}

.cta-button {

background-color: transparent;

color: var(--text-primary);

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

padding: 0.75rem 1.5rem;

text-transform: uppercase;

font-weight: 600;

letter-spacing: 1px;

font-size: 0.85rem;

cursor: pointer;

transition: all 0.3s ease;

}

.cta-button:hover {

background-color: var(--accent);

border-color: var(--accent);

color: var(--primary);

}

.slider-container {

position: relative;

width: 100%;

height: 100vh;

overflow: hidden;

}

.slide {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

opacity: 0;

transition: opacity 0.8s ease;

}

.slide.active {

opacity: 1;

}

.car-name {

font-size: 8vw;

margin-bottom: 1rem;

text-transform: uppercase;

text-align: center;

line-height: 0.9;

opacity: 0;

transform: translateY(30px);

}

.car-specs {

display: flex;

gap: 2rem;

margin-top: 1rem;

opacity: 0;

transform: translateY(30px);

}

.spec-item {

text-align: center;

font-size: 1.1rem;

color: var(--text-secondary);

}

.spec-value {

display: block;

font-size: 1.5rem;

font-weight: 600;

color: var(--text-primary);

margin-top: 0.5rem;

}

.pagination {

position: fixed;

right: 3rem;

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-screen {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: var(--primary);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

z-index: 1000;

}

.loading-text {

font-size: 1.5rem;

margin-top: 1rem;

color: var(--text-secondary);

}

.loading-bar {

width: 200px;

height: 2px;

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

margin-top: 1rem;

overflow: hidden;

}

.loading-progress {

height: 100%;

width: 0;

background-color: var(--accent);

transition: width 0.3s ease;

}

.hamburger {

display: none;

cursor: pointer;

width: 24px;

height: 16px;

position: relative;

}

.hamburger span {

display: block;

position: absolute;

height: 2px;

width: 100%;

background: var(--text-primary);

opacity: 1;

left: 0;

transform: rotate(0deg);

transition: .25s ease-in-out;

}

.hamburger span:nth-child(1) {

top: 0;

}

.hamburger span:nth-child(2), .hamburger span:nth-child(3) {

top: 7px;

}

.hamburger span:nth-child(4) {

top: 14px;

}

@media (max-width: 1024px) {

.header {

padding: 1.5rem;

}

.nav-links {

display: none;

}

.hamburger {

display: block;

}

.car-name {

font-size: 12vw;

}

.car-specs {

flex-direction: column;

gap: 1rem;

}

.pagination {

right: 1.5rem;

}

</style>

</head>

<body>

<div class="display-font" style="font-size: 2.5rem;">VELOCITYVISTA</div>

<div class="loading-text">Loading premium experience</div>

</div>

<div class="display-font" style="font-size: 1.5rem;">VELOCITYVISTA</div>

<a href="#" class="nav-link">Models</a>

<a href="#" class="nav-link">Performance</a>

<a href="#" class="nav-link">Technology</a>

<a href="#" class="nav-link">Design</a>

</nav>

<button class="cta-button">Explore</button>

</div>

</header>

<h1 class="car-name display-font">Porsche 911 Turbo S</h1>

</div>

<span>Power</span>

</div>

<span>Top Speed</span>

</div>

<h1 class="car-name display-font">Tesla Model S Plaid</h1>

</div>

<span>Power</span>

</div>

<span>Top Speed</span>

</div>

<h1 class="car-name display-font">Mercedes-AMG GT</h1>

</div>

<span>Power</span>

</div>

<span>Top Speed</span>

</div>

</div>

<span>Power</span>

</div>

<span>Top Speed</span>

</div>

<h1 class="car-name display-font">BMW M4 Competition</h1>

</div>

<span>Power</span>

</div>

<span>Top Speed</span>

</div>

</div>

document.addEventListener('DOMContentLoaded', () => {

// Loading animation

const loadingProgress = document.querySelector('.loading-progress');

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

let progress = 0;

const loadingInterval = setInterval(() => {

progress += Math.random() * 10;

loadingProgress.style.width = `${Math.min(progress, 100)}%`;

if (progress >= 100) {

clearInterval(loadingInterval);

gsap.to(loadingScreen, {

opacity: 0,

duration: 0.8,

ease: 'power2.out',

onComplete: () => {

loadingScreen.style.display = 'none';

initThreeJS();

initSlider();

}

});

}

}, 200);

// Hamburger menu

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

const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {

hamburger.classList.toggle('open');

navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';

});

// Three.js initialization

function initThreeJS() {

const canvas = document.getElementById('webgl-canvas');

const renderer = new THREE.WebGLRenderer({

canvas,

antialias: true,

alpha: true

});

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

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();

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

camera.position.z = 5;

// Create displacement effect

const carImages = [

'http://static.photos/automotive/1200x630/1',

'http://static.photos/automotive/1200x630/2',

'http://static.photos/automotive/1200x630/3',

'http://static.photos/automotive/1200x630/4',

'http://static.photos/automotive/1200x630/5'

];

let currentTexture = new THREE.TextureLoader().load(carImages[0]);

let nextTexture = new THREE.TextureLoader().load(carImages[1]);

const geometry = new THREE.PlaneGeometry(10, 5, 32, 32);

const material = new THREE.ShaderMaterial({

uniforms: {

uTime: { value: 0 },

uProgress: { value: 0 },

uTexture1: { value: currentTexture },

uTexture2: { value: nextTexture },

uDisplacement: { value: new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/water/Water_1_M_Normal.jpg') }

},

vertexShader: `

varying vec2 vUv;

void main() {

vUv = uv;

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

}

`,

fragmentShader: `

uniform float uTime;

uniform float uProgress;

uniform sampler2D uTexture1;

uniform sampler2D uTexture2;

uniform sampler2D uDisplacement;

varying vec2 vUv;

void main() {

vec2 uv = vUv;

vec4 disp = texture2D(uDisplacement, vec2(uv.x, uv.y + uTime * 0.05));

float distort = disp.r * uProgress;

vec4 color1 = texture2D(uTexture1, vec2(uv.x + distort * 0.1, uv.y + distort * 0.1));

vec4 color2 = texture2D(uTexture2, vec2(uv.x - (1.0 - distort) * 0.1, uv.y - (1.0 - distort) * 0.1));

gl_FragColor = mix(color1, color2, uProgress);

}

`,

transparent: true

});

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

scene.add(mesh);

// Show canvas after textures are loaded

document.getElementById('webgl-canvas').style.opacity = '1';

let time = 0;

let currentIndex = 0;

let isAnimating = false;

function animate() {

requestAnimationFrame(animate);

time += 0.01;

material.uniforms.uTime.value = time;

renderer.render(scene, camera);

}

animate();

window.addEventListener('resize', () => {

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

camera.updateProjectionMatrix();

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

});

return {

material,

changeTextures: (newIndex) => {

if (isAnimating) return;

isAnimating = true;

currentIndex = newIndex;

nextTexture = new THREE.TextureLoader().load(carImages[newIndex]);

material.uniforms.uTexture2.value = nextTexture;

gsap.to(material.uniforms.uProgress, {

value: 1,

duration: 1.5,

ease: 'power2.inOut',

onComplete: () => {

material.uniforms.uTexture1.value = nextTexture;

material.uniforms.uProgress.value = 0;

isAnimating = false;

}

});

}

};

}

// Slider functionality

function initSlider() {

const slides = document.querySelectorAll('.slide');

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

const carNames = document.querySelectorAll('.car-name');

const carSpecs = document.querySelectorAll('.car-specs');

let currentSlide = 0;

let threeJS = initThreeJS();

function changeSlide(newIndex) {

if (newIndex === currentSlide) return;

// Update Three.js texture

threeJS.changeTextures(newIndex);

// Update slides

slides[currentSlide].classList.remove('active');

slides[newIndex].classList.add('active');

// Update pagination dots

dots[currentSlide].classList.remove('active');

dots[newIndex].classList.add('active');

// Animate text out for current slide

gsap.to(carNames[currentSlide], {

opacity: 0,

y: -30,

duration: 0.5,

ease: 'power2.in'

});

gsap.to(carSpecs[currentSlide], {

opacity: 0,

y: -30,

duration: 0.5,

ease: 'power2.in'

});

// Animate text in for new slide

gsap.to(carNames[newIndex], {

opacity: 1,

y: 0,

duration: 0.8,

ease: 'power2.out',

delay: 0.3

});

gsap.to(carSpecs[newIndex], {

opacity: 1,

y: 0,

duration: 0.8,

ease: 'power2.out',

delay: 0.5

});

currentSlide = newIndex;

}

// Pagination dots click events

dots.forEach(dot => {

dot.addEventListener('click', () => {

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

changeSlide(index);

});

// Auto slide change

let autoSlideInterval = setInterval(() => {

const nextSlide = (currentSlide + 1) % slides.length;

changeSlide(nextSlide);

}, 6000);

// Pause auto slide on hover

const sliderContainer = document.querySelector('.slider-container');

sliderContainer.addEventListener('mouseenter', () => {

clearInterval(autoSlideInterval);

});

sliderContainer.addEventListener('mouseleave', () => {

autoSlideInterval = setInterval(() => {

const nextSlide = (currentSlide + 1) % slides.length;

changeSlide(nextSlide);

}, 6000);

});

// Keyboard navigation

document.addEventListener('keydown', (e) => {

if (e.key === 'ArrowRight') {

const nextSlide = (currentSlide + 1) % slides.length;

changeSlide(nextSlide);

} else if (e.key === 'ArrowLeft') {

const prevSlide = (currentSlide - 1 + slides.length) % slides.length;

changeSlide(prevSlide);

}

});

// Initial animation

gsap.to(carNames[0], {

opacity: 1,

y: 0,

duration: 1,

ease: 'power2.out',

delay: 0.5

});

gsap.to(carSpecs[0], {

opacity: 1,

y: 0,

duration: 1,

ease: 'power2.out',

delay: 0.8

});

}

});

</script>

</body>

</html>

Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS