15
Segue ai um exemplo basicão só com CSS, o principio é p mesmo, pois usa o filter: hue-matrix para controlar o histograma de cor da imagem. E como o filter() aceita transition vc consegue uma transição suave entre as cores.
A ideia é ter um grupo de radio-buttons escondidos com suas respectivas labels que são os btns visíveis da tela. Quando vc clica nessa ...
respondida 18/07/19 às 12:41
hugocsl
63,6mil1313 medalhas de ouro5252 medalhas de prata118118 medalhas de bronze
7
Primeiramente estou adicionando essa segunda resposta, pois a resposta anterior já ficou bem longa, e nela tratei apenas uma solução com CSS, porém o Autor da Pergunta parece necessitar mesmo de uma resposta em Javacript
Para não misturar os assuntos vou fazer essa outra resposta focando apenas no JS, e deixando a outra resposta só com CSS para consulta, ...
respondida 23/07/19 às 11:56
hugocsl
63,6mil1313 medalhas de ouro5252 medalhas de prata118118 medalhas de bronze
6
No TechMundo é utilizado um solução desenvolvida por eles, você pode ver o código fonte utilizando o Google Chrome e clicando com o direito na página e na opção Inspecionar elemento.
Clique então na aba console e cole o seguinte código.
window.ViewModel.NewsScrollViewModel
Você pode ver que existe comentários e é de fácil compreensão dos códigos e a lógica ...
4
TL;DR
Sim, sites de uma única página aparecem em buscadores, mas em geral é necessário um grande esforço adicional para isso.
Páginas tradicionais x dinâmicas
Os buscadores indexam vários tipos de conteúdo, principalmente HTML, que é a base da web tradicional.
Isso significa que se o conteúdo não estiver prontamente disponível no código HTML ele não ai ...
respondida 11/06/14 às 21:31
utluiz
71mil88 medalhas de ouro139139 medalhas de prata242242 medalhas de bronze
3
Já que não existe uma propriedade específica para background de vídeo em CSS, improvisei uma solução usando o tag <video> e um CSS que simula um background. Posicionando com absolute, e aplicando um z-index bem baixo, o vídeo "flutua abaixo" dos outros itens.
EDIT: Nova versão melhorada: http://jsfiddle.net/ra3qA/11/
(Versão antiga: http://jsfiddle....
2
Uma boa opção é usar o plugin Scrolld.js para JQuery. Ele permite fazer scrolling com extrema precisão.
http://scrolldjs.com/
Veja que a demo2 trata de funções que irão te interessar, como scrollDistance.
Ele permite uma série de animações com scroll e é uma biblioteca pequena de ser carregada na página.
Na prática, o que deve ser feito é monitorar a ...
respondida 5/03/14 às 21:12
PunchTheNewbie
54111 medalhas de ouro33 medalhas de prata1010 medalhas de bronze
2
Nosso amigo Guerra esta certo, o site mencionado usa particles.
Sua implementação básica é assim:
/* ---- particles.js config ---- */
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
...
2
Teoricamente é semelhante ao vertical, mas talvez ainda mais fácil.
Uma série de elementos são alinhados com float:left. Só um aparece na tela, com uma div com largura e altura de 100% e overflow:hidden. Tem um scroll:none no body também para não mostrar barras de rolagem.
Quando o mouse ou o teclado fazem o scroll, o body continua sem rolagem, mas o ...
1
Criei uma classe .inner com a propriedade transform para chegar a esse resultado.
Existem diversas maneiras de centralizar uma divem outra, segue uma pergunta bem interessante do SOen que mostra algumas destas alternativas.
body,
html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('http://vwgolftuning.com/wp-...
respondida 27/09/17 às 14:08
Mathiasfc
5.84911 medalhas de ouro99 medalhas de prata3030 medalhas de bronze
1
Jovem existem duas maneiras para fazer isso, a primeira é mais trabalhosa, mas é a que eu te indico por ser crossbrowser. A outra opção é com o position:sticky que não tem um bom suporte nos browsers ainda, porem demanda menos estilos no css.
Na opção com position:absolute vc precisa criar um elemento pai (usei o <main>)e colocar as sections dentro, ...
respondida 29/11/17 às 12:34
hugocsl
63,6mil1313 medalhas de ouro5252 medalhas de prata118118 medalhas de bronze
1
é esse
https://github.com/VincentGarreau/particles.js/
Não sei bem se aqui é o lugar certo para esse tipo de pergunta, mas ta ai.
respondida 21/07/16 às 15:37
Guerra
8.43344 medalhas de ouro2121 medalhas de prata3737 medalhas de bronze
1
Insira este código no seu .js e irá funcionar.
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
jsfiddle
respondida 8/05/16 às 13:04
Tiago S
4.18888 medalhas de ouro2020 medalhas de prata4141 medalhas de bronze
1
Resolvido,
era problema com o js do parallax que estava a fazer com que alterasse o background position para um valor negativo
Obrigado
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
parallax × 21html × 8
javascript × 7
jquery × 7
css × 7
css3 × 4
html5 × 3
posicionamento × 2
single-page-application × 2
android × 1
angularjs × 1
twitter-bootstrap × 1
ruby-on-rails × 1
ruby × 1
google-chrome × 1
menu × 1
busca × 1
jquery-ui × 1
seo × 1
materialize × 1
jquery-mobile × 1
background × 1
fullscreen × 1