CSS – Ninja Intranet

2024-05-292024-05-29

Wp FSE navigation breakpoint mobile/desktop menu


/*/////////////////////////////////////////////////// NAVIGATION BREAJKPOINT ////////////////////////////////////////////////////*/

/* Change the WordPress default css to a 1023px media query */
@media (min-width: 796px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}
/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

2024-04-142024-06-02

Śmigacz całe obiekty nieskonczone przewijanie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nieskończona karuzela</title>
    <style>
        .smigacz {
            overflow: hidden;
            display: flex;
            white-space: nowrap;
        }

        .marka {
            flex: 0 0 200px; /* Każdy div 'marka' ma stałą szerokość 300px */
            width: 200px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            background: #ccc; /* Tło dla lepszej widoczności */
            box-shadow: inset #000 10px 10px;
        }
    </style>
</head>
<body>
    <div class="smigacz">
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tvp.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tvn.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_tok-fm.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_showmax.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_polskie-radio.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_polsat.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_player.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_netflix.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_hbo.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_amazon-prime-video.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_disney-plus.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_radio-zet.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_rmf-fm.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_canal-plus.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_cinemax.jpg" class="markaimg">
        </div>
    </div>
    
    
    
        <div class="smigacz">
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_zalando.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_t-mobile.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_samsung.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_rossmann.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_pzu.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_play.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_pko-bp.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_orange.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_mcdonalds.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_loreal.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_ikea.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_decathlon.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_coca-cola.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_audi.jpg" class="markaimg">
        </div>
        <div class="marka">
            <img alt="" src="https://glosydoreklam.pl/wp-content/uploads/2024/04/marka_allegro.jpg" class="markaimg">
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    const szerokoscMarki = 200; // Stała szerokość jednej marki
    const czasAnimacji = 500; // Czas trwania animacji przewijania w milisekundach
    const czasPauzy = 500; // Czas pauzy między kolejnymi animacjami w milisekundach

    jQuery('.smigacz').each(function() { // Pętla po każdej instancji .smigacz
        const jQuerysmigacz = jQuery(this);
        const marki = jQuerysmigacz.find('.marka').clone(); // Klonujemy marki wewnątrz tego śmigacza

        // Funkcja dodająca marki do śmigacza i ustawiająca odpowiednią szerokość
        function setupCarousel() {
            jQuerysmigacz.empty().append(marki).append(marki.clone()); // Dodajemy sklonowane marki do zapewnienia płynności
        }

        // Funkcja odpowiedzialna za przewijanie marek
        function przesunMarki() {
            function autoScroll() {
                jQuerysmigacz.animate({scrollLeft: '+=' + szerokoscMarki}, czasAnimacji, 'linear', function() {
                    // Przenosimy pierwszą markę na koniec listy
                    const firstMark = jQuerysmigacz.find('.marka:first');
                    firstMark.appendTo(jQuerysmigacz);
                    jQuerysmigacz.scrollLeft(jQuerysmigacz.scrollLeft() - szerokoscMarki);
                    
                    // Ustawiamy kolejną animację po określonym czasie pauzy
                    setTimeout(autoScroll, czasPauzy);
                });
            }
            autoScroll();
        }

        setupCarousel(); // Konfigurujemy karuzelę przy ładowaniu strony
        przesunMarki(); // Rozpoczynamy przewijanie marek
    });
});
</script>




</body>
</html>

2024-03-142024-03-14

JS Funkcja sprawdzajaca czy obiekt został zescrollowany poza ekran

Ta funkcja sprawdzi, czy dany element znajduje się powyżej górnej granicy ekranu podczas przewijania strony, i w zależności od tego doda lub usunie klasę zescrollowany. Aby zastosować tę funkcję do konkretnego elementu, wystarczy wywołać czyZescrollowany(document.querySelector('.twojaKlasa')), zastępując .twojaKlasa selektorem CSS dla elementu, który chcesz monitorować.

W tym podejściu, zamiast sprawdzać bieżącą pozycję elementu względem widoku, funkcja porównuje pozycję przewijania okna (window.pageYOffset) z początkową pozycją górnego krawędzi elementu. Jeśli pozycja przewijania przekroczy tę początkową pozycję, element jest traktowany jako „zescrollowany”, co odpowiada Twoim wymaganiom dotyczącym zachowania funkcji niezależnie od zmian w stylu CSS elementu po jego „zescrollowaniu”.

function czyZescrollowany(element) {
  let timeout = null; // Zmienna do przechowywania identyfikatora opóźnienia
  // Zapisanie początkowej pozycji Y elementu
  const initialTopPosition = element.getBoundingClientRect().top + window.pageYOffset;

  const checkPositionAndToggleClass = () => {
    // Aktualna pozycja przewijania
    const currentScrollPosition = window.pageYOffset;

    // Sprawdzenie, czy element jest powyżej górnej granicy ekranu względem jego początkowej pozycji
    if(currentScrollPosition > initialTopPosition) {
      // Nadanie klasy tylko, jeśli element jest "zescrollowany" i nie ma jeszcze klasy 'zescrollowany'
      if (!element.classList.contains('zescrollowany')) {
        element.classList.add('zescrollowany');
      }
    } else {
      // Usunięcie klasy, jeśli element jest poniżej górnej granicy ekranu i ma klasę 'zescrollowany'
      if (element.classList.contains('zescrollowany')) {
        element.classList.remove('zescrollowany');
      }
    }
  };

  const debounceCheckPosition = () => {
    // Czyszczenie poprzedniego opóźnienia, jeśli istnieje
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    // Ustawienie opóźnienia dla funkcji sprawdzającej pozycję
    timeout = setTimeout(checkPositionAndToggleClass, 100); // Opóźnienie 100ms
  };

  // Nasłuchiwanie przewijania okna i uruchomienie funkcji z opóźnieniem
  window.addEventListener('scroll', debounceCheckPosition);
  
  // Wywołanie funkcji na starcie, aby od razu ustawić poprawny stan klasy
  debounceCheckPosition();
}

// Użycie funkcji z konkretnym elementem, np. document.querySelector('.jakisElement')
// czyZescrollowany(document.querySelector('.jakisElement'));

2023-12-032024-03-11

Nawigacja Doklejana

Nawigacja która nie znajduje się na górze strony ale przykla się do niej gdy zescolluje się stronę poniżej jej

Nad nawigacją umieszczamy pusty element z id=”nawigacja-polorznie” który będzie referencją połlorzenia normalnego nawigacji gdy nawigacja dolei się i bedzie miała połorzenie top0 na position fixed.

<div id="nawigacja-polorzenie"></div>
<div id="nawigacja">....</div>

Do tego css jak ma wyglądać nawigacja przyklejona:

#nawigacja.zescollowana {
    position: fixed;
    top: 0px;
    width: 100%;
}

I nasz js sterujący nadaniem klasy „przescollowana” gdy element nawigacja polorzenie znajdzie się nad lnią foldu:

document.addEventListener("DOMContentLoaded", function () {
            var nawigacjaPolorzenie = document.getElementById("nawigacja-polorzenie");
            var nawigacjaElement = document.getElementById("nawigacja");
            var czyZescrollowany = false;

            function obslugaPrzewijania() {
                var prostokat = nawigacjaPolorzenie.getBoundingClientRect();

                // Sprawdź, czy górna część elementu jest powyżej widoku
                if (prostokat.top <= 0) {
                    nawigacjaElement.classList.add("zescollowana");
                    czyZescrollowany = true;
                } else if (czyZescrollowany && prostokat.bottom >= 0) {
                    nawigacjaElement.classList.remove("zescollowana");
                    czyZescrollowany = false;
                }
            }

            // Dodaj nasłuchiwanie zdarzenia przewijania z opóźnieniem
            var debounceTimer;
            window.addEventListener("scroll", function () {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(obslugaPrzewijania, 50);
            });

            // Sprawdź początkowy stan przy ładowaniu strony
            obslugaPrzewijania();
      });

2023-12-022024-03-11

Sparkle FSE menu mobilne z submenu w nowym blok edytorze

Próg zawijania menu do mobilki można ustalić w:
wp-includes/blocks/navigation/style.min.css
Domyślny próg jest między 599px a 600px with.

Opcja z podstronami ze wszystkim rozwiniętym, mieszczącym się w pionie na mobile’u.

Menu mobilne w modelu fse z bloków ma dość skomplikowaną strukturę, i trzeba się czasem nieźle namęczyć żeby zdefinoiować sobie odpowiedni wygląd.


@media(max-width:599px) {
    #modal-1.is-menu-open {

        height: fit-content;
        /* zmniejszenie otwartego menu do potrzebnej wysokości żeby nie przysłaniało całej strony */
        padding-bottom: 15px;
        box-shadow: rgb(0 0 0 / 20%) 0px 9px 20px;
    }
    
    #modal-1-content {
        gap: 0px;
        padding-top: 0;
    }
    
    #modal-1-content > ul {
        /* wyśrodkowanie menu*/
        margin: auto;
    }
    
    .wp-block-navigation__responsive-dialog {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    #modal-1-content .wp-block-navigation li {
        /* elementy menu rozciągniecie do możliwego miejsca odstępy i podziałka borderem*/
        width: 100%;
        border-bottom: 2px #0000002e solid;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #modal-1-content .wp-block-navigation li > a {
        width: 100%;
        /*rozciągnięcie klikalnosci na czałąszerokość*/
    }

    /* korekta podziałek borderów */
    #modal-1-content .wp-block-navigation li:first-child {
        border-top: 2px #0000002e solid;
    }

    #modal-1-content .wp-block-navigation li:last-child {
        border-bottom: none;
    }

    /* submenu */
    ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        position: relative;
        padding-top: 0px !important;
        padding-right: 0 !important;
        padding-left: 15px !important;
        padding-bottom: 5px;
        position: relative !important;
        top: 7px !important;
    }

    /* zaykacz menu wyśrodkowanie */
    button.wp-block-navigation__responsive-container-close {
        position: static;
        margin: auto;
        margin-top: 20px;
    }
    
    /* wyłączenie sociala z mobilki*/
    .wp-block-social-links {

        display: none !important;
    }
}

2023-11-182024-02-25

Animacje CSS na scoll do elementu płynne przewijanie


// Nadaj klase na scoll to do animacji elementów

function odslonElementy() {
    var odslaniane = document.querySelectorAll(".animowane");

    for (var i = 0; i < odslaniane.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = odslaniane[i].getBoundingClientRect().top;
        var elementVisible = 150;

        if (elementTop < windowHeight - elementVisible) {
            odslaniane[i].classList.add("anim-ctive");
        } else {
            odslaniane[i].classList.remove("anim-active");
        }
    }
}

window.addEventListener("scroll", odslonElementy);

przykladowe css:

/****************  animka fotek ****************/


@keyframes wjazdfoty {
    
  0% {transform: scale(1.5); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}

/* obrazki w tresci*/


.obrazek-w-tresci img {
    border-radius: 15px;
    box-shadow: #0000006b 4px 7px 4px;

    /* na start animacji*/

    opacity: 0; /*- stan początkowy okryte*/


}

.obrazek-w-tresci.anim-ctive img{
    animation: wjazdfoty 0.4s ease-out;
    animation-fill-mode: forwards; /*parametr forwads istotny by animacja zatrzymała się na ostatniej klatce*/
}

2022-09-142023-10-02

Uwidocznienie grup w edytorze WP esitor (must have)

Parę styli bo editor-style.css, które modyfikują wygląd edytora wizualnego w WordPress’ie dla wygody działania, w szczególności z sekcjami i grupami.

{ Twoj projekt }\wp-content\themes\twentyseventeen\assets\css\editor-style.css

Rozszerza panel edytora (nie wiedzieć dlaczego taki wąski)
Uwidocznia Grupy „div” i „section”
Elementów Header i Footer
Oznacza nagłównik h1, h2, h3, h4
Oznaczenie paragrafów


@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@700&display=swap'); /*--- to wrzucić na początku css ---*/
/* #############################################################################################################################################
###############################################            MOJE STYLE EDYTORSKIE SAJAN           ###############################################
############################################################################################################################################# */ 


/*--------------------------------------------------------------- ELEMENT HEADER --------------------------------------------------*/

/* Oznaczenie grup <header> */
.block-editor-block-list__layout header::before{
    content: 'HEADER'!important;
    background: #0aed00!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}

.block-editor-block-list__layout header {
    border: dashed 3px #0aed00;
    padding: 24px 8px 8px 8px!important;
}

/*--------------------------------------------------------------- ELEMENT FOOTER --------------------------------------------------*/

/* Oznaczenie grup <footer> */
.block-editor-block-list__layout footer::before {
    
    content: 'FOOTER'!important;
    background-color: #0aed00!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}
.block-editor-block-list__layout footer {
    border: dashed 3px #0aed00;
    padding: 24px 8px 8px 8px!important;
}

/*--------------------------------------------------------------- GRUPY SECTION --------------------------------------------------*/

.block-editor-block-list__layout section.wp-block-group {
    border: dotted 5px #00900f;
    padding: 24px 8px 8px 8px!important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.block-editor-block-list__layout section.wp-block-group::before {
    content: 'sekcja';
    font-size: 12px;
    font-weight: bold;
    background-color: #00900f;
    padding: 5px;
    color: #fff;
    position: relative;
    top: -17px;
    left: -15px;
    border-radius: 0 0 12px 0px;
}

/*--------------------------------------------------------------- GRUPY DIV --------------------------------------------------*/
.block-editor-block-list__layout div.wp-block-group {
    border: dashed 3px #f58787;
    padding: 24px 8px 8px 8px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
.block-editor-block-list__layout div.wp-block-group::before {
    content: 'DIV'!important;
    background-color: #f58787!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}


/*--------------------------------------------------------------- PARAGRAFY --------------------------------------------------*/

.block-editor-block-list__layout p {
    border: dashed 1px;
    padding: 24px 8px 8px 8px!important;
}

.block-editor-block-list__layout p::before {
    content: 'P'!important;
    background-color: #000!important;
    
    color: #fff!important;
    position: absolute!important;
    top: 0px!important;
    left: 0px!important;
    border-radius: 0 0 9px 0px!important;
    
    font-size: 11px!important;
    font-family: 'Ubuntu Mono', sans-serif!important;
    letter-spacing: 0.5px!important;
    padding: 0px 4px 0px 3px!important;
    
    width: unset!important;
    height: unset!important;
}


/* Rozszerzenie panelu edytora */
.block-editor-block-list__layout .wp-block {max-width: unset;}
/* Oznaczenie nagłówków */
.block-editor-block-list__layout h1:before{content: 'H1';}
.block-editor-block-list__layout h2:before{content: 'H2';}
.block-editor-block-list__layout h3:before{content: 'H3';}
.block-editor-block-list__layout h4:before{content: 'H4';}
.block-editor-block-list__layout h1:before, h2:before, h3before, h4:before {
    font-weight: bold;
    font-family: monospace;
    font-size: 10px;
    background-color: #255093;
    padding: 4px;
    color: #fff;
    border-radius: 18px;
    position: relative;
    top: -18px;
}