CAH pro 2.0 by @nutriandrea - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<input>Definisce un area di input per l'invio di dati e informazioni
<embed>Tag per l'incorporamento di contenuti multimediali
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
langSpecifica la lingua del contenuto di un elemento
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

Esercizi 05/03/2024 es4

Esercitazione tabelle

Basketball Legends

test-wrap-with-grid

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manifesto Cyber Art</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
      font-family: 'Courier New', monospace;
      background-color: #000;
      color: #FFF;
      height: 100vh;
      overflow: hidden;
      position: relative;
      z-index: 1;
      animation: fadeIn 2s ease-in-out;
    }
    /* Sidebar (menu bar) con effetto glass e sfondo bianco opacità 10% */
    #sidebar {
      position: fixed;
      top: 20px;
      left: 20px;
      width: 200px;
      height: calc(100% - 60px);
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 20px 30px rgba(0,0,0,0.5);
      padding: 20px;
      transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 3;
    }
    #sidebar nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #sidebar nav ul li {
      margin-bottom: 20px;
      font-size: calc(1rem + 0.5vw);
      font-weight: regular;
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
    }
    #sidebar nav ul li:hover {
      transform: scale(1.1);
    }
    /* Bottone hamburger per mobile */
    #menu-toggle {
      display: none;
      position: fixed;
      top: 15px;
      left: 15px;
      background: transparent;
      border: none;
      font-size: 2rem;
      color: #FFF;
      z-index: 4;
      cursor: pointer;
    }
    /* Canvas di sfondo */
    #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      filter: blur(20px);
    }
    /* Container del manifesto */
    #manifesto {
      margin: 40px 20px;
      padding: 20px;
      height: calc(100vh - 60px); /* 40px top + 20px bottom */
      overflow-y: auto;
      background: transparent;
      z-index: 2;
      max-width: 800px;
    }
    .content {
      font-size: calc(1rem + 1vw);
      font-weight: 300;
      letter-spacing: 2px;
      opacity: 0;
      animation: slideIn 0.5s forwards;
      transition: opacity 0.5s ease-in-out;
      text-align: left;
      margin-bottom: 20px;
      white-space: pre-line;
    }
    .asterisks {
      font-size: calc(1rem + 0.5vw);
      font-weight: bold;
      opacity: 0;
      animation: fadeInAsterisks 0.5s forwards;
      margin-bottom: 20px;
      text-align: center;

    }
    
    @keyframes glitch {
      0% { transform: translate(0); opacity: 1; }
      20% { transform: translate(-3px, 3px); opacity: 0.8; }
      40% { transform: translate(3px, -3px); opacity: 1; }
      60% { transform: translate(-3px, 3px); opacity: 0.9; }
      80% { transform: translate(3px, -3px); opacity: 1; }
      100% { transform: translate(0); opacity: 1; }
    }

    .glitch-transition {
      animation: glitch 0.3s linear;
    }

    }
    @keyframes slideIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInAsterisks {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    /* Mobile: Sidebar nascosta e manifesto a tutto schermo con margini laterali */
    @media (max-width: 768px) {
      #sidebar {
        transform: translateX(-120%);
      }
      #menu-toggle {
        display: block;
      }
      #manifesto {
        margin: 40px 20px;
        height: calc(100vh - 60px);
      }
    }
    /* Desktop: aggiungi padding-left al body per spostare il contenuto a destra della sidebar */
    @media (min-width: 769px) {
      body {
        padding-left: 240px;
      }
    }
  </style>
</head>
<body>
  <!-- Bottone hamburger per mobile -->
  <button id="menu-toggle">&#9776;</button>
  <!-- Sidebar (menu bar) -->
  <aside id="sidebar">
    <nav>
      <ul>
        <li>Home</li>
        <li>Manifesto</li>
        <li>Progetti</li>
        <li>Collab</li>
        <li>Articoli</li>
        <li>Papers</li>
      </ul>
    </nav>
  </aside>
  <div id="canvas-container"></div>
  <div id="manifesto"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // Stato del menu mobile
    let menuOpen = false;
    const sidebar = document.getElementById('sidebar');
    const menuToggle = document.getElementById('menu-toggle');

    // Funzione per aprire il menu: mostra la sidebar e nasconde il bottone hamburger
    function openMenu() {
      sidebar.style.transform = 'translateX(0%)';
      menuToggle.style.display = 'none';
      menuOpen = true;
    }

    // Funzione per chiudere il menu: nasconde la sidebar e mostra il bottone hamburger
    function closeMenu() {
      sidebar.style.transform = 'translateX(-120%)';
      menuToggle.style.display = 'block';
      menuOpen = false;
    }

    // Toggle del menu hamburger (mobile)
    menuToggle.addEventListener('click', function(event) {
      event.stopPropagation();
      if (!menuOpen) {
        openMenu();
      }
    });

    // Chiude il menu se si clicca fuori dalla sidebar (solo su mobile)
    document.addEventListener('click', function(event) {
      // Se il menu è aperto e il click non è all'interno della sidebar...
      if (menuOpen && !sidebar.contains(event.target)) {
        closeMenu();
      }
    });

    // Inizializza Three.js
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 15000);
    camera.position.z = 3200;
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('canvas-container').appendChild(renderer.domElement);

    // Crea una sfera
    const sphereGeometry = new THREE.SphereGeometry(100, 40, 40);
    const sphereMaterial = new THREE.MeshNormalMaterial();
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    scene.add(sphere);

    // Crea cilindri
    const cylinderGeometry = new THREE.CylinderGeometry(0, 10, 50, 24);
    cylinderGeometry.rotateX(Math.PI / 2);
    const cylinderMaterial = new THREE.MeshNormalMaterial();
    for (let i = 0; i < 1000; i++) {
      const mesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
      mesh.position.x = Math.random() * 4000 - 2000;
      mesh.position.y = Math.random() * 4000 - 2000;
      mesh.position.z = Math.random() * 4000 - 2000;
      mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 2 + 1;
      scene.add(mesh);
    }

    // Luci
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const pointLight = new THREE.PointLight(0xffffff, 1);
    pointLight.position.set(5, 5, 5);
    scene.add(pointLight);

    // Movimento del mouse
    let mouseX = 0, mouseY = 0;
    let windowHalfX = window.innerWidth / 2;
    let windowHalfY = window.innerHeight / 2;
    document.addEventListener('mousemove', onDocumentMouseMove);
    function onDocumentMouseMove(event) {
      mouseX = (event.clientX - windowHalfX) * 10;
      mouseY = (event.clientY - windowHalfY) * 10;
    }

    // Animazione Three.js
    function animate() {
      requestAnimationFrame(animate);
      const time = Date.now() * 0.0005;
      sphere.position.x = Math.sin(time * 0.7) * 2000;
      sphere.position.y = Math.cos(time * 0.5) * 2000;
      sphere.position.z = Math.cos(time * 0.3) * 2000;
      for (let i = 1, l = scene.children.length; i < l; i++) {
        scene.children[i].lookAt(sphere.position);
      }
      camera.position.x += (mouseX - camera.position.x) * 0.05;
      camera.position.y += (-mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', onWindowResize);
    function onWindowResize() {
      windowHalfX = window.innerWidth / 2;
      windowHalfY = window.innerHeight / 2;
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // Testo del manifesto
    const manifestoText = [
      "We are people of the present. We live in front of screens and cut ourselves on paper. We are children of transition, of the hybrid between the physical and the digital. Our reality is shaped between electronic impulses and tactile sensations that dissolve.",
      "Our tools are bits, relays, lights, and numbers. They build our language, our expressive code. The machine is not just a means, but an extension of human intellect, an exploration of the unforeseen.",
      "We live in an era where change is not only social, historical, and economic. The very essence of communication has transformed. Paper, the witness of civilization for millennia, burns and dissolves, making way for digital signals, for movable type that becomes data streams.",
      "Our senses narrow. Touch, smell, and taste fade, replaced by the absolute dominance of sight and hearing. We are reduced to observers and listeners.",
      "Digital art is art. Code is the new technique, the algorithm the new brushstroke, software the new canvas. Creating through the machine does not mean losing humanity, but redefining it.",
      "We explore new horizons, like adventurers navigating the net. Our exploration lies in the invisible, in the infinitely small of data, in the macrocosm of information.",
      "Generative art is art. We believe in the power of data and its unpredictability. The error is not a limit, but a new interpretation. We want to push beyond human understanding, to probe other possible elaborations, beyond the boundaries of the biological brain.",
      "We want to free the expression of machines. No more confining them to models controlled by humans. Let us give them free outputs, let the algorithm dream, let the machine create beyond our comprehension.",
      "The immediate is our beauty, the processor our muse. The digital age is not just a tool, but a new artistic landscape, a universe to explore with a pioneering spirit. We want instant travel, mental teleportation, creation without waiting. Our time is now, our space is everywhere.",
      "We reject art imprisoned in display cases, distant from modern times, reduced to relics of what has been. Representation is here, now, vibrant and in constant transformation. Art must be alive, it must challenge, it must be an act of revolution.",
      "We celebrate connected humanity, digital crowds, flows of information that reshape collective consciousness. We sing of the network as a new public space, cyberspace as the new frontier of art and communication.",
      "We stand on the extreme promontory of the centuries. Time and space dissolve into data streams. We already live in the absolute, immersed in the omnipresent eternity of the network."
    ];
  
    function glitchEffect(element, text, callback) {
      const words = text.split(' ');
      let index = 0;
      function glitchNextWord() {
        if (index < words.length) {
          let word = words[index];
          const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=|<>?';
          let i = 0;
          let glitchInterval = setInterval(() => {
            if (i < word.length) {
              let glitchedText = word.substring(0, i + 1) + characters.charAt(Math.floor(Math.random() * characters.length));
              element.innerHTML = words.slice(0, index).join(' ') + ' ' + glitchedText;
              i++;
            } else {
              clearInterval(glitchInterval);
              index++;
              glitchNextWord();
            }
          }, 10);
        } else {
          setTimeout(callback, 150);
        }
      }
      glitchNextWord();
    }

    function createManifesto() {
      const container = document.getElementById('manifesto');
      let currentIndex = 0;
      let buttonAdded = false;
  
      function isAtBottom() {
        return container.scrollHeight - container.clientHeight - container.scrollTop < 5;
      }
  
      function generateBlock() {
        const newText = document.createElement('div');
        newText.classList.add('content');
        container.appendChild(newText);
  
        glitchEffect(newText, manifestoText[currentIndex], function() {
          const asterisks = document.createElement('div');
          asterisks.classList.add('asterisks');
          asterisks.textContent = '***';
          container.appendChild(asterisks);
  
          currentIndex++;
  
          if (isAtBottom()) {
            container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
            setTimeout(showNextText, 150);
          } else {
            container.addEventListener('scroll', onScrollToBottom);
          }
          updateBlurEffect();
        });
      }
  
      function onScrollToBottom() {
        if (isAtBottom()) {
          container.removeEventListener('scroll', onScrollToBottom);
          generateBlock();
        }
      }
      function loadMoreText() {
      const manifestoContainer = document.getElementById('manifesto');
      const lastContentEl = manifestoContainer.querySelector('.content:last-child');
      const nextTextIndex = parseInt(lastContentEl.dataset.textIndex) + 1;

      if (nextTextIndex < manifestoText.length && isNearBottom(manifestoContainer)) {
        fetchNextText(nextTextIndex);
      }
    }

      function isNearBottom(container) {
        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
        return distanceFromBottom < 200; // Valuta la distanza desiderata dall'alto della finestra
      }
      function showNextText() {
        if (currentIndex < manifestoText.length) {
          if (isAtBottom()) {
            generateBlock();
          } else {
            container.addEventListener('scroll', onScrollToBottom);
          }
        }
      }
      showNextText();
    }
  
    window.onload = createManifesto;
  </script>
</body>
</html>

#manifesto {
    max-width: 80%;
    margin: 0 auto;
    padding: -5 px;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth; /* Abilita lo scroll fluido */

}

.content.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.content {
    opacity: 1;
    transform: translateY(0);
}