new file: main_dc/valitovgaziz/html/digital_background.js
modified: main_dc/valitovgaziz/html/index.html modified: main_dc/valitovgaziz/html/style/digital_background.css try add backgroud digital background
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
// Initialize digital background
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
createBinaryRain();
|
||||
createFloatingCode();
|
||||
createConnectionNodes();
|
||||
createDataFlows();
|
||||
});
|
||||
|
||||
// Create binary rain effect
|
||||
function createBinaryRain() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'binary-rain';
|
||||
document.body.appendChild(container);
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
setTimeout(() => {
|
||||
createBinaryStream(container);
|
||||
}, i * 200);
|
||||
}
|
||||
}
|
||||
|
||||
function createBinaryStream(container) {
|
||||
const stream = document.createElement('div');
|
||||
stream.className = 'binary-stream';
|
||||
const left = Math.random() * 100;
|
||||
stream.style.left = `${left}%`;
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
const digit = document.createElement('div');
|
||||
digit.className = 'binary-digit';
|
||||
digit.textContent = Math.random() > 0.5 ? '1' : '0';
|
||||
digit.style.left = '0';
|
||||
digit.style.top = `${-i * 20}px`;
|
||||
digit.style.animationDuration = `${3 + Math.random() * 4}s`;
|
||||
digit.style.animationDelay = `${i * 0.2}s`;
|
||||
stream.appendChild(digit);
|
||||
}
|
||||
|
||||
container.appendChild(stream);
|
||||
}
|
||||
|
||||
// Create floating code elements
|
||||
function createFloatingCode() {
|
||||
const symbols = ['{', '}', '<>', '();', '[]', '</>', '=>', '&&'];
|
||||
const classes = ['code-bracket', 'code-parenthesis', 'code-brace', 'code-tag'];
|
||||
|
||||
symbols.forEach((symbol, index) => {
|
||||
const element = document.createElement('div');
|
||||
element.className = `floating-code ${classes[index % classes.length]}`;
|
||||
element.textContent = symbol;
|
||||
element.style.left = `${Math.random() * 100}%`;
|
||||
element.style.top = `${Math.random() * 100}%`;
|
||||
document.body.appendChild(element);
|
||||
});
|
||||
}
|
||||
|
||||
// Create connection nodes
|
||||
function createConnectionNodes() {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const node = document.createElement('div');
|
||||
node.className = 'connection-node';
|
||||
node.style.left = `${Math.random() * 100}%`;
|
||||
node.style.top = `${Math.random() * 100}%`;
|
||||
node.style.animationDelay = `${Math.random() * 4}s`;
|
||||
document.body.appendChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
// Create data flow lines
|
||||
function createDataFlows() {
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const flow = document.createElement('div');
|
||||
flow.className = 'data-flow';
|
||||
flow.style.top = `${Math.random() * 100}%`;
|
||||
flow.style.width = `${30 + Math.random() * 40}%`;
|
||||
flow.style.left = `${-Math.random() * 20}%`;
|
||||
flow.style.animationDuration = `${4 + Math.random() * 8}s`;
|
||||
flow.style.animationDelay = `${Math.random() * 6}s`;
|
||||
document.body.appendChild(flow);
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,7 @@
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="scripts.js"></script>
|
||||
<script src="darkThemeToggle.js"></script>
|
||||
<script src="digital_background.js"></script>
|
||||
<title>ValitovGaziz - Fullstack-разработчик</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
/* Digital Background for Software Development Website */
|
||||
/* CSS Variables for Theme Support */
|
||||
:root {
|
||||
/* Light Theme Colors */
|
||||
--bg-primary-light: #f8f9fa;
|
||||
--bg-secondary-light: #e9ecef;
|
||||
--accent-primary-light: #007bff;
|
||||
--accent-secondary-light: #6c757d;
|
||||
--text-primary-light: #212529;
|
||||
--particle-color-light: rgba(0, 123, 255, 0.1);
|
||||
|
||||
/* Dark Theme Colors */
|
||||
--bg-primary-dark: #121212;
|
||||
--bg-secondary-dark: #1e1e1e;
|
||||
--accent-primary-dark: #0d6efd;
|
||||
--accent-secondary-dark: #495057;
|
||||
--text-primary-dark: #f8f9fa;
|
||||
--particle-color-dark: rgba(13, 110, 253, 0.15);
|
||||
|
||||
/* Current Theme - defaults to light */
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--accent-primary: var(--accent-primary-light);
|
||||
--accent-secondary: var(--accent-secondary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--particle-color: var(--particle-color-light);
|
||||
}
|
||||
|
||||
/* Dark Theme Class */
|
||||
body.dark-theme {
|
||||
--bg-primary: var(--bg-primary-dark);
|
||||
--bg-secondary: var(--bg-secondary-dark);
|
||||
--accent-primary: var(--accent-primary-dark);
|
||||
--accent-secondary: var(--accent-secondary-dark);
|
||||
--text-primary: var(--text-primary-dark);
|
||||
--particle-color: var(--particle-color-dark);
|
||||
}
|
||||
|
||||
/* Auto Theme Detection */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.auto-theme {
|
||||
--bg-primary: var(--bg-primary-dark);
|
||||
--bg-secondary: var(--bg-secondary-dark);
|
||||
--accent-primary: var(--accent-primary-dark);
|
||||
--accent-secondary: var(--accent-secondary-dark);
|
||||
--text-primary: var(--text-primary-dark);
|
||||
--particle-color: var(--particle-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* Base Body Styles */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--bg-primary) 0%,
|
||||
var(--bg-secondary) 100%
|
||||
);
|
||||
color: var(--text-primary);
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Animated Background Elements */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 20% 80%,
|
||||
var(--particle-color) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
var(--particle-color) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
var(--particle-color) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: backgroundPulse 8s ease-in-out infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Binary Code Rain Effect */
|
||||
.binary-rain {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.binary-digit {
|
||||
position: absolute;
|
||||
color: var(--accent-primary);
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
animation: fall linear infinite;
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
}
|
||||
|
||||
/* Circuit Board Grid */
|
||||
.circuit-grid {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(
|
||||
var(--accent-secondary) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(90deg, var(--accent-secondary) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
opacity: 0.03;
|
||||
z-index: -1;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
/* Floating Code Elements */
|
||||
.floating-code {
|
||||
position: fixed;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
color: var(--accent-primary);
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.code-bracket {
|
||||
animation: float 15s ease-in-out infinite;
|
||||
}
|
||||
.code-parenthesis {
|
||||
animation: float 18s ease-in-out infinite reverse;
|
||||
}
|
||||
.code-brace {
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
.code-tag {
|
||||
animation: float 16s ease-in-out infinite reverse;
|
||||
}
|
||||
|
||||
/* Connection Nodes */
|
||||
.connection-node {
|
||||
position: fixed;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
opacity: 0.2;
|
||||
z-index: -1;
|
||||
animation: nodePulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Data Flow Lines */
|
||||
.data-flow {
|
||||
position: fixed;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--accent-primary),
|
||||
transparent
|
||||
);
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
animation: dataFlow 6s linear infinite;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes backgroundPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fall {
|
||||
to {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(100px, 50px) rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(50px, 100px) rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-50px, 75px) rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(40px, 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodePulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dataFlow {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Interactive Elements */
|
||||
.connection-node:hover {
|
||||
opacity: 0.6;
|
||||
transform: scale(2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Performance Optimizations */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.binary-digit,
|
||||
.floating-code,
|
||||
.connection-node,
|
||||
.data-flow,
|
||||
body::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.binary-digit {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.circuit-grid {
|
||||
background-size: 30px 30px;
|
||||
}
|
||||
|
||||
.floating-code {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user