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: white;
    color: white; 
}
a:link,a:visited,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('menu3');
   window.onscroll = function() {
       menu.className = (document.documentElement.scrollTop + document.body.scrollTop > menu.parentNode.offsetTop && document.documentElement.clientHeight > menu.offsetHeight) ? "fixni-menu" : "";
   }
   var img;
   var active = 0;
   var imgCount;

function change() {
       img[active].className = "";

if (active == (imgCount - 1)) {
           active = 0;
       } else {
           active = active + 1;
       }
       img[active].className = "show";
   }

JS

Autoformát
jQuery
Umístění JS