PROVAAUTO by @Gianluca_Pet - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<h5>Titolo di intestazione di quinto livello
Inserisce un commento nel codice
valueValore alfanumerico o booleano contenuto in un elemento
<table>Tag primario per la creazione di tabelle
animationDefinisce i parametri dell'animazione di un elemento o selettore
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.

Users

Log in to search for users

Explore

Find inspiration

Saul Goodman Associates - Better C

Pagina Test-A D&D story

GreenBox - Giardinaggio a casa tua

Pagina prova html

Review of Functions I

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <title>AUTO TOP</title>
    <style></style>

<script>
</script>
  </head>
  <body>
    <div class="spacer"></div>
<div class="arrow" onclick="mySlideLeft()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowleft arimage"/></div><div class="slider-cont" id="slider-cont"><!--<div class="slider-layer"  id="slider-cont"></div>--><div class="test-slider">
            <div class="cont-slider" onclick="selectSliderElement(this)" id="ext-1"><img class="flat-w-image image-slider" src="https://www.picng.com/upload/bmw_logo/png_bmw_logo_63586.png"/>

			<img src="https://www.picng.com/upload/bmw_logo/png_bmw_logo_63586.png" class="image-w"/>
			</div>
			<div class="cont-slider" onclick="selectSliderElement(this)" id="ext-2">

            <img class="flat-w-image image-slider" src="https://www.freepnglogos.com/uploads/mercedes-logo-png/mercedes-logo-mercedes-benz-logo-png-transparent-svg-vector-bie-13.png"/><img src="https://www.freepnglogos.com/uploads/mercedes-logo-png/mercedes-logo-mercedes-benz-logo-png-transparent-svg-vector-bie-13.png" class="image-w"/></div>
<div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-3"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c468.png"/><img src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c468.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-4"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c18.png"/><img src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c18.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-5"><img class="flat-w-image image-slider" src="https://www.freeiconspng.com/thumbs/honda-logo-png/honda-logo-png-picture-20.png"/><img src="https://www.freeiconspng.com/thumbs/honda-logo-png/honda-logo-png-picture-20.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-6"><img class="flat-w-image image-slider" src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c5e.png"/><img src="http://assets.stickpng.com/images/580b585b2edbce24c47b2c5e.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-7"><img class="flat-w-image image-slider" src="https://www.freepnglogos.com/uploads/toyota-logo-png/toyota-logos-brands-10.png"/><img src="https://www.freepnglogos.com/uploads/toyota-logo-png/toyota-logos-brands-10.png" class="image-w"/></div><div 
            class="cont-slider" onclick="selectSliderElement(this)" id="ext-8"><img class="flat-w-image image-slider" src="https://purepng.com/public/uploads/thumbnail//purepng.com-renault-logorenaultgroupe-renaultautomobile-manufacturerrenault-automobilesrenault-logo-17015276106936zgwt.png"/><img src="https://purepng.com/public/uploads/thumbnail//purepng.com-renault-logorenaultgroupe-renaultautomobile-manufacturerrenault-automobilesrenault-logo-17015276106936zgwt.png" class="image-w"/></div>
        </div></div><div class="arrow" onclick="mySlideRight()"><img src="http://cerati.org/eoitecne/img/down.png" class="arrowright arimage"/></div>

    <p class=text1> SCEGLI IL TUO MARCHIO</p>



  </body>
</html>

.spacer{margin-top:100px;}
.alignleft {
    text-align:left;
}
.alignright {
    text-align:right;
}
#ext-1 {
    position:absolute;
    height:100%;
    z-index:5;
}
#ext-2 {
    position:absolute;
    height:100%;
    transform:scale(0.8) translateX(-20vw);
    z-index:4;}
#ext-2 .image-w{
    opacity:0.8
}
#ext-3 {
    position:absolute;
    height:100%;
    transform:scale(0.6) translateX(-30vw);
    z-index:3;}
#ext-3 .image-w{
    opacity:0.6
}
#ext-4 {
    position:absolute;
    height:100%;
    transform:scale(0.4) translateX(-20vw);
    z-index:2;}
#ext-4 .image-w{
    opacity:0.2
}
#ext-5
{
    position:absolute;
    height:100%;
    transform:scale(0.2);
    z-index:1;}
#ext-5 .image-w{
    opacity:0;
}
#ext-6 {
    position:absolute;
    height:100%;
    transform:scale(0.4) translateX(20vw);
    z-index:2;}
#ext-6 .image-w{
    opacity:0.2
}
#ext-7 {
    position:absolute;
    height:100%;
    transform:scale(0.6) translateX(30vw);
    z-index:3;}
#ext-7 .image-w{
    opacity:0.6
    
}
#ext-8
{
    position:absolute;
    height:100%;
    transform:scale(0.8) translateX(20vw);
    z-index:4;}
#ext-8 .image-w{
    opacity:0.8
}

.slider-cont {
    width:80%;
    position:relative;
    display:inline-block;
}

.image-slider {
    height:100%;
    position:absolute;
}

.cont-slider {
    display:inline-block;
    vertical-align:middle;
    transform-origin: top;
    transition:all 500ms cubic-bezier(0.71, 0.57, 0.01, 0.98);
}

.slider-layer {
    position:absolute;
    z-index:6;
    width:100%;
    height:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+26,0+50,0+77,1+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 77%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 77%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */


}

.test-slider {
    position:relative;
    width:30%;
    height:0;
    padding-bottom:30%;
    margin-left:35%;
}

.image-w {
    height:100%;
    position:absolute;
}

.arrow {
    display:inline-block;
    width:10%;
    opacity:0.3;
    vertical-align: top;
}
.arrow:hover{cursor:pointer}

.arimage {
    width:100%;
}

.arrowleft {
    transform:rotate(90deg)
}

.arrowright {
    transform:rotate(-90deg)
}

.flat-w-image {
    -webkit-filter:contrast(0) brightness(10);
    filter:contrast(0) brightness(10);
}

.text1 {
text-align: center;
color:grey;
font-family: Copperplate, Papyrus, fantasy;
font-size:80; 


}

window.onload=function(){
(function(d){/*  FUNZIONE EVENTI SWIPE DESTRA SINISTRA SU GIU'*/
 var
 ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
 nm=true,sp={x:0,y:0},ep={x:0,y:0},
 touch={
  touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
  touchcancel:function(e){nm=false}
 };
 for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);
var h=function(e){console.log(e.type,e)};
document.body.addEventListener('fc',h,false);// 0-50ms vs 500ms with normal click
    /*SWIPE A DESTRA*/
    document.getElementById('slider-cont').addEventListener('swr',mySlideRight,false);
    /*SWIPE A SINISTRA*/
document.getElementById('slider-cont').addEventListener('swl',mySlideLeft,false);
/*document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);*/
}
function mySlideRight(){
    /*SE SWIPE SULLA DESTRA*/
        /*Seleziona tutte le immagini della slide*/
        var sli=document.getElementsByClassName('cont-slider');
    for(var i=0;i<sli.length;i++){
        /*Se è la prima immagine, diventa l'ultima*/
        if(sli[i].id=="ext-1"){sli[i].id='ext-8'}else{
            /*Se non è la prima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre indietro di uno*/
            strnum--;
        sli[i].id='ext-'+strnum;
        }
    }
    
}
function mySlideLeft(){
    /*SE SWIPE SULLA SINISTRA*/
        /*Seleziona tutte le immagini della slide*/
    var sli=document.getElementsByClassName('cont-slider');
    for(var i=0;i<sli.length;i++){
        /*Se è l'ultima immagine, diventa la prima*/
        if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
            /*Se non è l'ultima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre avanti di unos*/
            strnum++;
        sli[i].id='ext-'+strnum;
        }
    }
}
function selectSliderElement(e){
    /*Se viene cliccato un elemento della slider, viene in primo piano*/
    var idd=e.id;
    var numstr = idd.match(/\d+$/)[0];
    var numid=parseInt(numstr);
    var sli=document.getElementsByClassName('cont-slider');
    if(numid==1){}else{
        var times=9-numid;
        for (var z=0;z<times;z++)
        for(var i=0;i<sli.length;i++){
        /*Se è l'ultima immagine, diventa la prima*/
        if(sli[i].id=="ext-8"){sli[i].id='ext-1'}else{
            /*Se non è l'ultima immagine...*/
        var eid=sli[i].id;
        var strnum = eid.match(/\d+$/)[0];
        var num=parseInt(strnum);
            /*...scorre avanti di unos*/
            strnum++;
        sli[i].id='ext-'+strnum;
        }
    }}
    }