Kategoria: HTML

Opublikowane w

Ś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>
Opublikowane w

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();
      });
Opublikowane w

HTML5 Video element autoplay fail

Niektóre przeglądarki nie pozwalają na auto-odtwarzanie video dopóki użytkownik nie wykona jakiejś interakcji ze stroną. Wyjątkiem są wyciszeone filmy.

To Spowodowało mi problem z auto-odtwarzaniem video w headerze strony po załadowaniu. Rozwiązaniem jest dodanie do elementu <video> atrybutu „muted”

            <!-- sajan mod -->
            <video id="video-header-sajan" autoplay loop muted>
                <source src="http://postepstudio.pl/wp-content/uploads/przykladowe_video_postepstudio.mp4" type="video/mp4">
            </video>