Jak sprawić, by Twoja witryna była responsywna i interaktywna dzięki CSS i JavaScript?

Posiadanie witryny, która jest zarówno responsywna, jak i interaktywna, jest niepisanym wymogiem dla każdego właściciela witryny. Nie można przecenić korzyści płynących z posiadania interaktywnej strony internetowej, która idealnie dopasowuje się do każdego rozmiaru ekranu.

Powinieneś stworzyć spersonalizowane środowisko dla każdego użytkownika, który odwiedza Twoją witrynę, a dzięki kilku właściwościom CSS i kilku funkcjom JavaScript możesz to zrobić.

W tym samouczku dowiesz się, jak sprawić, by Twoja witryna HTML i CSS była responsywna i interaktywna.

Tworzenie interaktywnej witryny

Kiedy budujesz stronę internetową, zaczynasz od góry do dołu. Dlatego uczynienie witryny interaktywną to proces, który również należy rozpocząć od góry. Wziąć ta strona z portfolio zbudowaliśmy jako przykład. Ma przejrzysty wygląd, ale nie jest całkowicie interaktywny.

Każda pozycja menu zmienia kolor po najechaniu na nią kursorem, ale skąd wiesz, w której sekcji witryny jesteś? Cóż, są na to dwa sposoby — aktywuj pozycje menu za pomocą onscroll oraz na kliknięcie wydarzenia.

Aktywacja pozycji menu za każdym razem, gdy przewijasz stronę w górę lub w dół, będzie wymagała użycia funkcji JavaScript, którą możesz nazwać „activeMenu”. Ta funkcja będzie wymagała dostępu do elementów menu na pasku nawigacyjnym, a także do każdej sekcji witryny. Na szczęście możesz to osiągnąć za pomocą zapytanieSelectorAll Selektor DOM.

W katalogu projektu musisz utworzyć nowy plik JavaScript i połączyć go z plikiem HTML, używając następującego wiersza kodu:

W scenariusz tag, src wartość to nazwa pliku JavaScript, który w powyższym przykładzie to main.js.

Główny plik.js

// użycie javascript do aktywacji pozycji menu onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sekcja");
funkcja activeMenu(){
niech len=sek.długość;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktywny"));
li[len].classList.add("aktywny");
}
aktywneMenu();
window.addEventListener("przewiń", activeMenu);

ten zapytanieSelectorAll selektor w powyższym kodzie przechwytuje wszystkie pozycje menu za pomocą spinki do mankietów klasa. Przechwytuje również wszystkie sekcje witryny za pomocą Sekcja etykietka. ten aktywujMenu funkcja następnie pobiera długość każdej sekcji i usuwa lub dodaje „aktywną” zmienną w zależności od pozycji przewijania użytkownika.

Aby powyższy kod działał, musisz zaktualizować arkusz stylów witryny portfolio, aby zawierał następujący kod w sekcji paska nawigacyjnego:

#navbar .menu li.active a{
kolor: #fff;
}

Aktywacja pozycji menu po kliknięciu

 //używając jquery do aktywacji pozycji menu onclick
$(document).on('kliknij', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Dodanie powyższego kodu do pliku JavaScript aktywuje każdą sekcję, gdy użytkownik kliknie odpowiednią pozycję menu. Jednak używa jQuery (biblioteki JavaScript), która do wykonania tego zadania wymaga minimalnej ilości kodu.

Problem, który możesz napotkać, gdy aktywujesz każdy element menu po kliknięciu, polega na tym, że pasek nawigacyjny zakrywa górną część każdej sekcji. Aby temu zapobiec, możesz po prostu wstawić następujący kod w sekcji narzędziowej arkusza stylów:

Sekcja{
scroll-margin-top: 4,5rem;
}

Powyższy kod zapewni, że po przejściu do każdej sekcji przez kliknięcie pasek nawigacyjny pozostanie 4,5 rem nad każdą sekcją (lub 72 piksele). Kolejną fajną funkcją do dodania do swojej witryny jest płynne przewijanie, co możesz osiągnąć za pomocą następującego kodu CSS:

html {
zachowanie przewijania: gładkie;
}

Tworzenie interaktywnej strony głównej

Na większości witryn użytkownik zobaczy swój pierwszy przycisk na pasku nawigacyjnym lub na stronie głównej. Oprócz tego, że wygląda jak wezwanie do działania, przycisk powinien być również interaktywny. Świetnym sposobem na osiągnięcie tego jest CSS :unosić się selektor, który przypisuje nowy stan do elementu za każdym razem, gdy użytkownik najedzie na niego myszą.

W witrynie portfolio jedyny link na stronie głównej zawiera: btn klasa (co nadaje jej wygląd przycisku). Aby więc ten przycisk był interaktywny, możesz po prostu przypisać :unosić się selektor do btn klasa.

Korzystanie z selektora najechania kursorem

 .btn: najedź {
tło: #fff;
kolor niebieski;
obramowanie: niebieskie stałe ;
promień obramowania: 5px;
}

Dodanie powyższego kodu do sekcji narzędziowej witryny portfolio spowoduje, że przycisk przejdzie z jednego stanu do drugiego po najechaniu na niego kursorem.

Kolejną fajną funkcją strony głównej jest animacja pisania, która wykorzystuje typed.js (skrypt animacji pisania jQuery).

Korzystanie z typed.js

// jquery wpisuje skrypt animacji tekstu
var typed = new Typed(.typing", {
ciągi znaków: ["Programista"],
typPrędkość: 100,
Prędkość wsteczna: 60,
pętla: prawda
});

Po dodaniu powyższego kodu do pliku JavaScript musisz wprowadzić następującą zmianę w kodzie HTML:

A ja jestem 

W powyższym kodzie zastępujesz tekst „Software Developer” w oryginalnym kodzie klasą „typing”, tworząc animację pisania.

Tworzenie interaktywnych innych sekcji witryny

Tworzenie klasy narzędziowej przycisku i używanie unosić się selektor zapewni, że każda sekcja Twojej strony internetowej, która ma przycisk, będzie interaktywna. Właściwości przejścia i przekształcenia CSS mają również kilka świetnych funkcji animacji, które możesz dodać do swojej witryny.

Jeśli masz galerię lub dowolną sekcję obrazów w swojej witrynie, możesz użyć dwóch wymienionych powyżej właściwości, aby uzyskać efekt najechania na swoje obrazy. Dodanie następującego kodu CSS do obrazów w sekcji projektu witryny portfolio spowoduje efekt transformacji na obrazach w sekcji:

.img-kontener img{
maksymalna szerokość: 450px;
przejście: wszystkie 0,3 s luzy;
kursor: wskaźnik;
}
.img-container img: hover{
transformacja: skala (1.2);
}

Tworzenie responsywnej witryny

Tworząc responsywną witrynę internetową, należy wziąć pod uwagę cztery różne typy urządzeń — komputery stacjonarne, laptopy, tablety i smartfony. Ponadto każdy z tych typów urządzeń ma również różne rozmiary ekranu, ale posiadanie tych czterech kategorii to dobry początek.

Związane z: Jak używać zapytań o media w HTML i CSS do tworzenia responsywnych stron internetowych?

W obecnym stanie witryna portfolio dobrze wyświetla się na komputerach stacjonarnych i laptopach. Tak więc, aby był responsywny, będzie oznaczał stworzenie niestandardowego układu dla tabletów i smartfonów.

Najlepszym sposobem na uzyskanie responsywnego projektu za pomocą CSS i HTML są zapytania o media. Możesz umieścić zapytanie o media w pliku CSS lub HTML połączyć etykietka. To drugie podejście ułatwia skalowalność i jest to również metoda, którą zademonstruję.

Musisz utworzyć dwa dodatkowe pliki CSS. Pierwszy plik CSS utworzy strukturę układu dla małych laptopów i tabletów w trybie poziomym. Będzie miał maksymalną szerokość 1100 pikseli, jak widać w następującym tagu linku:

Wstawianie wiersza kodu powyżej w obrębie głowa tag Twojego pliku HTML (lub w tym przypadku pliku strony z portfolio) zapewni, że każde urządzenie o szerokości ekranu 1100 pikseli i pod użyje stylizacji w widescreen.css plik.

Plik widescreen.css

/* Dom */
#navbar .container h1 a span{
Nie wyświetla się;
}
#home .home-treść .text-3 span{
kolor: #000000;
}
/* Portfel */
.projektowanie{
uzasadnić-treść: centrum;
}
.projekt{
elastyczność: 0;
}
/* O */
.o-treści{
kierunek ugięcia: kolumna;
}
/* Kontakt */
.treść-kontaktu{
kierunek ugięcia: kolumna;
}

Powyższy kod wygeneruje responsywny układ na urządzeniach o rozmiarach ekranu 1100 pikseli i mniejszych, jak widać na poniższym wyjściu:

Drugi plik CSS utworzy strukturę układu dla smartfonów i tabletów w trybie pionowym. Będzie miał maksymalną szerokość 760px, jak widać w poniższym tagu linku:

Plik mobile.css

/* Pasek nawigacyjny */
#navbar .container h1 a span{
Nie wyświetla się;
}
#pasek nawigacyjny .kontener .menu{
margines lewy: 0rem;
}
#szynka-menu{
szerokość: 35px;
wysokość: 30px;
margines: 30px 0 20px 20px;
kursor: wskaźnik;
}
#navbar .kontener .menu-wrap .menu{
Nie wyświetla się;
}
.bar{
wysokość: 5px;
szerokość: 100%;
kolor tła: #ffffff;
Blok wyświetlacza;
promień obramowania: 5px;
przejście: łatwość 0,3 s;
}
#bar1{
przekształcenie: przetłumaczY(-4px);
}
#bar3{
transformacja: przetłumaczY(4px);
}
/* Dom */
#Dom{
wyświetlacz: elastyczny;
background: url("/images/home.jpg") bez powtarzania centrum;
wysokość: 100vh;
}
#dom .kontener{
marża: 6rem 1rem 2rem 1rem;
wypełnienie: 2rem;
}
#home .home-treść .text-1{
rozmiar czcionki: 20px;
marża: 1,2 rem;
}
#home .home-treść .text-2{
rozmiar czcionki: 45px;
grubość czcionki: 500;
marża: 1 rem;
}
#home .home-treść .text-3{
rozmiar czcionki: 22px;
marża: 1,2 rem;
}
#home .home-treść .text-3 span{
kolor: #0000ff;
grubość czcionki: 600;
}
#dom .kontener{
margines lewy: 4,5 rem;
}
/* O */
#o kontenerze{
wypełnienie: 0;
}
/* Kontakt */
#kontakt .kontener{
wypełnienie: 0;
}

Powyższy plik wygeneruje następujący responsywny układ smartfona:

Inne sposoby tworzenia responsywnych interaktywnych stron internetowych

Wiedza o tym, jak sprawić, by Twoja witryna była responsywna i interaktywna za pomocą CSS i HTML, to świetna umiejętność. Ale to nie jedyne metody, aby Twoja witryna była responsywna i interaktywna.

Wiele frontendowych frameworków, a nawet szablonów w usługach takich jak Joomla, ułatwia responsywne interaktywne projekty.

15 stylowych szablonów Joomla dla responsywnych stron internetowych

Chcesz stworzyć stronę internetową dla swojej firmy lub bloga? Wypróbuj te szablony Joomla.

Czytaj dalej

O autorze