Jump to content
holasoycael

Remover target de slider css3

Recommended Posts

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/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By douglas79
      Boa tarde, pessoal!!!
       
      Estou com um pequeno problema com essa tag aí. O que acontece?? Fiz tudo certo no código e no css, porém ao atualizar a página, o vídeo aparece, mas não executa. 
      Eis o código:
       
      <div class="box-esquerdo">
                      <video class="institucional" src="https://youtu.be/90uPbUirZ3I" controls="controls" autoplay="autoplay"></video>
       </div>
       
      Procurei em diversos tutoriais e falam pra atualizar o browser, porém já está atualizado e mesmo assim o erro continua. E no Edge (uso o Windows 10 64 bits), diz que a fonte é inválida.
      O que pode estar havendo??
      Alguém pode me ajudar nessa???
      Aguardo respostas!!!
      []'s
    • By BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
    • By teuzero
      esse é o link do meu site:https://xraros.000webhostapp.com/
       
      o problema é que no arquivo css test.css no bloco de código:
      eu escrevi esse código:
       
      @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código:
      .barra { background:url(../img/barra.png)no-repeat; }  
      no index da pagina tem a div:
      <div class="barra"> </div>  
      mais no site não carrega essa imagem.
      como eu carrego essa imagem via css dentro de um div?
    • By DinhoPHP
      estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php
       
      Segue o código:
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 
    • By Webster Moitinho
      Criei um sistema de mensagens em que a notificação aparece como um "bullet" com a quantidade de mensagens não lidas sobre a logomarca do sistema. Todavia eu gostaria de que, se a quantidade de mensagens fosse maior que 0 (zero), o sistema emitisse um alarme sonoro.
       
      Meu código está assim:
       
      <?php //verifica se o numero de linhas é maior que 0 (zero) $num_rows = 2; if($num_rows > 0){ //toca o som de alerta echo "<script> play();</script>"; // <-- O elemento audio só vai ser criado daqui algumas linhas, // não tem como ele ser tocado ainda. } ?> <audio id="autoplay"> <source src="libraries/gopi.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio> <script type="text/javascript"> audio = document.getElementById('autoplay'); function play(){ audio.play(); } </script>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.