V&V|Vodní dýmka – živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

body {
background-image: URL('Images/Background.PNG');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: black;
color: white; }

a:link    {color: black}
a:visited    {color: black}
a:active    {color: black}

.menu3 {list-style: none; padding: 0; margin: 0; text-align: center}
    .menu3 li {display: inline}
    .menu3 a {text-decoration: none; border-bottom: 0; background: URL('Images/Menu-block.PNG'); padding: 5px; display: inline-block; width: 150px; line-height: 30px}
    .fixni-menu {position: fixed; left: 0; top: 0; width: 100%; background: URL('Images/Menu.PNG'); text-align: center; z-index: 1}
    
.slideshow {
    width: 600px;
    position: relative;
    max-width: 100%;
}

.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity .4s;
}

.slideshow .show {
    opacity: 1;
    filter: alpha(opacity=100);
}

.slideshow .stoped {
    z-index: 1;
}

.slideshow :first-child {
    position: relative; 
    display: block;
}

CSS

Autoformát
CSS reset
Až na konci

var menu = document.getElementById('fixni-menu');
    window.onscroll = function () {
      menu.className = (
        document.documentElement.scrollTop + document.body.scrollTop > menu.parentNode.offsetTop
        && document.documentElement.clientHeight > menu.offsetHeight
      ) ? "fixni-menu" : "";
    }

JS

Autoformát
jQuery
Umístění JS