Pesquisar na Comunidade
Mostrando resultados para as tags ''scroll''.
Encontrado 7 registros
-
Eu estou fazendo uma página pra faculdade que só pode ser usado HTML e CSS, e nessa página eu gostaria de ter um scrolls, Porém, ao invés de usar o scroll do mouse, usar um botão dentro da própria página levando ela ao conteúdo desejado. No caso, a página seria uma só e teriam algumas camadas, a camada da página inicial que conteria todos os botões levando a todas as outras camadas, camada de baixo com algum conteúdo, outra camada com outro conteúdo... Como posso fazer? Além de querer saber como criar os scrolls, queria saber como criar backgrounds separados, página inicial de uma cor, conteúdo de outra, assim como no site. Desde já, agradeço. Site de exemplo: Arcadis.com
-
Pessoal, Antigamente eu dividia as minhas páginas, com <table>, lendo tutoriais, assistindo video aulas, fui vendo que isto não é a melhor forma de trabalhar, então me atualizei, e estou trabalhando com <div> e outras tag's para organizar meus projetos. O problema que estou encontrando, é que coloquei um formulário com vários <input>, para o preenchimento de dados, organizado dentro de um <fieldset>, fazendo a estilização da página por CSS. Bom nada fora do que deveria ser. Porem o cadastro é grande, e tem elementos que estão abaixo do limite da tela, e não exibe uma barra de rolagem. Revisei todo o meu CSS, não tenho nada com "overflow: hidden;" Na CSS, adicionei uma tentativa de solução, que não houve resultado. div { overflow: visible; }Alguém pode me dar uma ajuda??? Não deve ser nada complicado, mas não encontrei solução ainda.
-
Fala Galera, estou com um problema. O scroll animado não funciona de forma alguma. o script é muito simples, mas algo está acontecendo e não funciona a animação. <!DOCTYPE html> <html class="no-js" lang="pt-br"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'> <link href="css/animate.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-1.7.1.min.js"></script> <!----------------------------------------- SCROLL ANIMADO -------------------------------------> <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800); }); }); </script> </head> <body onload="document.getElementById('load-fadeIn').style.display='block';"> <div id="loading-page"> <div id="loading-page-ico"></div> <div id="load-fadeIn" class="animate fadeIn"> <div id="n-top2" class="top animate fadeInDownBig" style="width:100%; height:320px; position:relative; top:0; background:rgba(255,255,255,0.4);"> LINK COM A CLASSE SCROLL: <div id="seta-top"><a href="#content-text" class="scroll" style="width:100%; height:100%; display:block; text-decoration:none; color:#000;"></a></div> </div> Grato. </div><!-- FIM LOAD-FADEIN --> </div><!-- FIM LOAD-PAGE --> </body> </html>
-
Iae galera, criei uma conta aqui no fórum para ver se alguém pode me ajudar. É o seguinte: http://www.dotazoneapp.com/site/pt/ este site, tem um efeito bem interessante de scroll, que quando desce o scroll o background-image do elemento muda de poisção e desce também numa velocidade maior. E com isso gostaria de saber como fazer um efeito desse ou semelhante, pois não faço ideia de como seja feito. E também como o efeito de transição para cima do botão pode ser feito. Bem, é isso, desculpem-me por ter criado um tópico somente para isso. Obrigado desde já
-
Olá... Estou tentando resolver um problema com o script abaixo, mas não localizo o erro. Estou armazenando o valor de uma pesquisa efetuada no BD em uma Array e passando posteriormente para os campos que serão utilizados para compor script Java e o HTML. Quando processo, ele passa somente Array[0]... O que pode ser? Alguém pode me ajudar? O site para quem quiser ver é WWW.jornalagaxeta.com.br/teste/agaxeta. Ainda estou elaborando, mas tem muita coisa para arrumar. A ideia era montar o projeto no Xoops, mas enquanto não conheço direito para isso, estou tentando montar na mão. Seguem abaixo os códigos: function scroll(){ $selecao = "select id_materia, dt_publicacao, titulo, prioridade, id_secao FROM tbmaterias WHERE prioridade=14 ORDER BY dt_publicacao DESC LIMIT 4"; $query = $this->query($selecao); while ($lista = mysql_fetch_array($query)){ $pasta = "http://jornalagaxeta.com.br/img/".$lista[id_secao]; $foto[$i][0] = $pasta."/capa/".$lista[id_materia]."_capa.jpg"; $thumb[$i][1] = $pasta."/capa/".$lista[id_materia]."_capa.jpg"; $titulo[$i][2] = $lista[titulo]; $saida ="<div id=\"rokstories-47\" class=\"rokstories-layout1\">"; $saida .=" <div class=\"feature-block\" >"; $saida .=" <div class=\"image-container\" >"; $saida .=" <div class=\"image-full\" >"; $saida .=" <img src=\"$foto[0][0]\" style=\"visibility: visible; zoom: 1; opacity: 0; \">"; $saida .=" <img src=\"$foto[1][0]\" style=\"visibility: hidden; zoom: 1; opacity: 0;\">"; $saida .=" <img src=\"$foto[2][0]\" style=\"visibility: visible; zoom: 1; opacity: 1;\">"; $saida .=" <img src=\"$foto[3][0]\" style=\"visibility: hidden; zoom: 1; opacity: 1;\">"; $saida .=" </div>"; $saida .=" <div class=\"image-small\" style=\" width:350px\">"; $saida .=" <img src=\"$thumb[0][1]\" class=\"feature-sub\" alt=\"image\" style=\"visibility: visible; zoom: 1; opacity: 0.3;\">"; $saida .=" <img src=\"$thumb[1][1]\" class=\"feature-sub\" alt=\"image\" style=\"visibility: visible; zoom: 1; opacity: 0.3;\">"; $saida .=" <img src=\"$thumb[2][1]\" class=\"feature-sub\" alt=\"image\" style=\"visibility: visible; zoom: 1; opacity: 1;\">"; $saida .=" <img src=\"$thumb[3][1]\" class=\"feature-sub\" alt=\"image\" style=\"visibility: visible; zoom: 1; opacity: 0.3;\">"; $saida .=" </div>"; $saida .=" </div>"; $saida .=" <div class=\"desc-container\" >"; $saida .=" <div class=\"description feature-pad\" style=\"visibility: hidden; zoom: 1; opacity: 0;\">"; $saida .=" <a href=\"#\" class=\"feature-link\">"; $saida .=" <span class=\"feature-title\">$titulo[0][2]</span>"; $saida .=" </a>"; $saida .=" </div>"; $saida .=" <div class=\"description feature-pad\" style=\"visibility: hidden; zoom: 1; opacity: 0;\">"; $saida .=" <a href=\"#\" class=\"feature-link\">"; $saida .=" <span class=\"feature-title\">$titulo[1][2]</span>"; $saida .=" </a>"; $saida .=" </div>"; $saida .=" <div class=\"description feature-pad\" style=\"visibility: visible; zoom: 1; opacity: 1;\">"; $saida .=" <a href=\"#\" class=\"feature-link\">"; $saida .=" <span class=\"feature-title\">$titulo[2][2]</span>"; $saida .=" </a>"; $saida .=" </div>"; $saida .=" <div class=\"description feature-pad\" style=\"visibility: hidden; zoom: 1; opacity: 0;\">"; $saida .=" <a href=\"#\" class=\"feature-link\">"; $saida .=" <span class=\"feature-title\">$titulo[3][2]</span>"; $saida .=" </a>"; $saida .=" </div>"; $saida .=" </div>"; $saida .=" </div>"; $saida .=" </div>"; $i++; } return $saida; } INDEX.PHP <?php // inicio : includes include("lib/lib_capa.php"); include_once("lib/xtpl.php"); $iface=new Xtemplate("html/index.html"); $obj_capa = new capa; // fim includes // Destaque Superior $scroll = $obj_capa->scroll(); $iface->assign(SCROLL, $scroll); ….. $iface->parse("header"); $iface->out("header"); ?> INDEX.HTML <div id="scroll" class="colmask leftmenu"> <script type="text/javascript"> RokStoriesImage['rokstories-47'].push('$foto[0][0]'); RokStoriesImage['rokstories-47'].push('$foto[1][0]'); RokStoriesImage['rokstories-47'].push('$foto[2][0]'); RokStoriesImage['rokstories-47'].push('$foto[3][0]'); </script> {SCROLL} </div>
-
Olá Pessoal, Consegui fazer um menu fixo para deslizar sobre uma pagina inteira web, porem não estou estou conseguindo fazer o seguinte efeito: Como faço para uma das opções do menu ficarem destacadas enquanto vou para outra sessão? Suponha que no meu site, após o menu tenha a seção do home, noticias e contato, e quando eu rolar pela pagina o menu destacar a opção que seja da seção que estou. Como faço? Segue o código: /** .html **/ <nav id="menu" class="fixed-nav"> <div id="Navigation"> <ul class="menu unfixed""> <li class="button" id="#"><a href="#" class="link-menu">Home</a></li> <li class="button" id="#"><a href="#" class="link-menu">Sobre</a></li> <li class="button" id="#"><a href="#" class="link-menu">Notícias</a></li> </ul> </div> </nav> /** .cs **/ #menu{ margin-top: 0px; margin-right:0; } #menu ul li { display: inline; } #Navigation { position:relative; margin-left: 0px; margin-top: 0px; margin-right:0; background-color:#66f; width:100%; height:40px; box-shadow: #000 2px 2px 1px; } #Navigation ul.menu li.button { float:top; text-decoration:none; } #Navigation ul.menu li.button { float:top; text-decoration:none; } #Navigation ul.menu li.button a { display:inline-block; width:100px; line-height:10px; color:#fff; text-decoration: none; font-family:"Arial", sans-serif; text-align:center; padding:5px; padding-left:5px; padding-right:5px; margin:10px 30px 20px 10px; } #menu ul li a:hover { border-bottom:3px solid #fff; height:18px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .fixed-nav{ position:fixed; width:100%; top:0; left:0; z-index:999; } #Navigation .menu{ margin-top:0; } #Pag2{ margin-top: 50px; } div.quadro { position:relative; width: 100%; height:100px; margin-right:0; padding:20px; background-color:#f66; } /** .js **/ $(function(){ if($(window).scrollTop > $('#Pag2').offset().top){ $('#menu').addClass('fixed-nav'); }else{ $('#menu').removeClass('fixed-nav'); } $(window).scroll(function(){ if($(this).scrollTop() > $('#Pag2').offset().top){ $('#menu').addClass('fixed-nav'); }else{ $('#menu').removeClass('fixed-nav'); } }); });
-
Tenho uma tabela dentro de uma <div>. Quando o conteudo ultrapassa o tamanho da tela utilizo "overflow: scroll" para aparecer uma barra de rolagem. Porém, fica 2 barras de rolagem, a da tabela e a da página do site. Eu queria saber como deixar somente 1 barra mas que seja possível descer com o rolar do mouse para se ver o conteudo que ultrapassou a página abaixo. Se eu utilizar "overflow: hidden", a barra some, porém não é possível descer com o mouse para ver o conteúdo. Alguém tem alguma dica de como deixar somente 1 barra?
