Wprowadzenie do projektu

W tym poradniku stworzymy interaktywną siatkę punktów, która reaguje na ruch myszki, wykorzystując jQuery i proste efekty animacji. Projekt będzie składał się z HTML, CSS oraz JavaScript.

Zakres projektu

  1. Utworzenie struktury HTML.
  2. Stylizacja siatki punktów za pomocą CSS.
  3. Implementacja interakcji z jQuery.
  4. Dodanie efektów animacji.
  5. Testowanie i optymalizacja projektu.

Lista plików

  • index.html
  • styles.css
  • script.js

Pełna zawartość każdego pliku

1. Plik index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interaktywna Siatka Punktów</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="point" data-id="1"></div>
        <div class="point" data-id="2"></div>
        <div class="point" data-id="3"></div>
        <div class="point" data-id="4"></div>
        <div class="point" data-id="5"></div>
        <div class="point" data-id="6"></div>
        <div class="point" data-id="7"></div>
        <div class="point" data-id="8"></div>
        <div class="point" data-id="9"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Plik styles.css

body {
    margin: 0;
    padding: 0;
    background-color: #f4f5ef;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 20px;
}

.point {
    width: 100px;
    height: 100px;
    background-color: #6f8e58;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.point:hover {
    transform: scale(1.2);
}

3. Plik script.js

$(document).ready(function() {
    $('.point').on('mouseenter', function() {
        $(this).css('background-color', '#ffa500');
    }).on('mouseleave', function() {
        $(this).css('background-color', '#6f8e58');
    });
});

Uruchomienie

Aby uruchomić projekt, wystarczy otworzyć plik index.html w przeglądarce. Upewnij się, że masz dostęp do internetu, aby załadować jQuery.

Rozszerzenia

Możesz rozbudować projekt, dodając więcej punktów, zmieniając kolory w zależności od interakcji, a także implementując efekty dźwiękowe.

Częste błędy

  1. Brak jQuery - Upewnij się, że link do jQuery jest poprawny i że masz dostęp do internetu.
  2. Błędne selektory - Sprawdź, czy używasz poprawnych selektorów jQuery.
  3. Niepoprawne style - Upewnij się, że style CSS są załadowane przed skryptami JavaScript.

Podsumowanie

Stworzyliśmy interaktywną siatkę punktów, która reaguje na ruch myszki. Dzięki prostym animacjom z jQuery, projekt stał się bardziej atrakcyjny wizualnie. Możesz rozwijać ten projekt, dodając więcej efektów i interakcji.

Pytania i odpowiedzi

1. Jak dodać więcej punktów do siatki? Możesz dodać więcej <div class="point"></div> w pliku index.html zgodnie z potrzebami.

2. Jak zmienić kolory punktów? Zmodyfikuj wartości background-color w pliku styles.css oraz w skrypcie jQuery.

3. Jak dodać więcej efektów animacji? Możesz użyć innych właściwości CSS lub jQuery, takich jak fadeIn() lub slideUp(), aby dodać różne efekty.

4. Czy mogę używać innych bibliotek zamiast jQuery? Tak, możesz użyć czystego JavaScriptu, ale jQuery ułatwia manipulację DOM.

5. Jakie są inne przykłady interaktywnych projektów z jQuery? Możesz sprawdzić nasze poradniki, takie jak Jak stworzyć FAQ za pomocą jQuery lub Jak zrobić menu korzystając z jQuery.