Remover target de slider css3

holasoycael · Novembro 12, 2019

Oi Pessoal!

Eu estou ultilizando um slide desenvolvido com css3. Vim pedir ajudar aos universitarios. Precisso personaliar este slide removendo a target e mantendo o efeito.

TARGET:

bar.jpg.294b033d65a9c3d3f28a25d455dd325b.jpg

bar2.jpg.85a3cfeeeffd031cdf246648164d53aa.jpg

bar3.jpg.d6532cb6d22aa78aac09c1c7fe9ed562.jpg

É natural pelo codigo css ao selecionar a tela no menu ele busque a target. É possivel buscar a targert sem aparecer na barra URL?

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 -->
<meta charset="utf-8"/><!-- HTML5 -->

<style type="text/css">
*{margin:0;outline:0;padding:0;text-align:left;list-style:none;border:none;vertical-align:baseline;outline:none;}

/*
 *Styling
 */

html,body {
        width: 100%;
        height: 100%;
        position: relative; 
}
body {
    overflow: hidden;
}

header {
    background: #fff; 
    position: fixed; 
    left: 0; top: 0; 
    width:100%;
    height: 3.5rem;
    z-index: 10; 
}

nav {
    width: 100%;
    padding-top: 0.5rem;
}

nav ul {
    list-style: none;
    width: inherit; 
    margin: 0; 
}


ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) {
    background: rgb( 0, 180, 255 );
}

ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) {
    background: rgb( 255, 65, 180 );
}

ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) {
    background: rgb( 0, 255, 180 );
}

ul li {
    display: inline-block; 
    margin: 0 8px;
    margin: 0 0.5rem;
    padding: 5px 8px;
    padding: 0.3rem 0.5rem;
    border-radius: 2px; 
    line-height: 1.5;
}

ul li a {
    color: #fff;
    text-decoration: none;
}

.panel {
    width: 100%;
    height: 500px;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

.panel h1 {
    font-family: sans-serif;
    font-size: 64px;
    font-size: 4rem;
    color: #fff;
    position:relative;
    line-height: 200px;
    top: 33%;
    text-align: center;
    margin: 0;
}

/*
 *Scrolling
 */

a[ id= "tela1" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "tela2" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}
a[ id= "tela3" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}

</style>

</head>
<body>

<a id="tela1"></a>
    <a id="tela2"></a>
    <a id="tela3"></a>
    <header class="nav">
        <nav>
            <ul>
                <li><a href="#tela1">Tela 1</a></li>
                <li><a href="#tela2">Tela 2</a></li>
                <li><a href="#tela3">Tela 3</a></li>
            </ul>
        </nav>
    </header>

    <section id="main">
        <article class="panel" id="tela1">
            <h1> Conteúdo 1</h1>
        </article>

        <article class="panel" id="tela2">
            <h1>  Conteúdo 2</h1>
        </article>

        <article class="panel" id="tela3">
            <h1>  Conteúdo 3</h1>
        </article>
    </section>

</body>
</html>

DEMO:

http://jsfiddle.net/ivanferrer/en0m7yk1/

Omar~ · Novembro 14, 2019

Poderíamos usar javascript para localizar os alvos e rolar a página até o mesmo.

Porém não dar para fazer pois seu HTML apresentado contém alguns erros que inviabilizam qualquer uso de script.

No caso elementos com #ID duplicados.

holasoycael · Dezembro 27, 2019

Em 14/11/2019 at 03:58, Omar~ disse:

Poderíamos usar javascript para localizar os alvos e rolar a página até o mesmo.

Porém não dar para fazer pois seu HTML apresentado contém alguns erros que inviabilizam qualquer uso de script.

No caso elementos com #ID duplicados.

Obrigado omar! Eu tive de ultilizar javascript para desenvolver o desejado... o apresentado é puro css... mais Muuito obrigado pela atenção! 10 para ti!

Entrar

Remover target de slider css3

Recommended Posts

holasoycael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

holasoycael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante