PROVAAUTO by @Gianluca_Pet - Codewith.it

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

References

listCollega un elemento input con una lista di opzioni datalist
<p>Serve a definire paragrafi di testo
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
multipart/form-dataCodifica dei caratteri di un form
<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

02/02/24 Jajo talpa no gusta pelo

Immagini con didascalia

informatica 21/10 ii

Template Wheel Stripes

HTML, CSS altre cose

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;
        }
    }}
    }