Design da página raiz do site http://gastosabertos.org

[aivuk]

Colocar aqui links para o design final.

[sibigauer]

Há duas opções, com diferenças no bloco "Faça parte e Ferramentas", para avaliação que ainda não teve aprovação.

[everton137]

@sibigauer pode ajudar colocando o links das versões para aprovação, por favor?

[sibigauer]

https://drive.google.com/open?id=0BwlESUhjI_hiZWpsbEp6Qng2MWc https://drive.google.com/open?id=0BwlESUhjI_hidmFYaUkxdVVJWXM

[everton137]

Decidiu-se pelo segundo.

[sibigauer]

@aivuk @LuizArmesto , esse segundo design tem viewport animation ao carregar e mouse over com easing (size up, repositioning com a linha seguindo, como se o mouse, ao passar em cima, aumentasse a bolinha e desse uma mexida nela e na linha, com um efeito suave). A gente pode usar também para carregar e reordenar os posts.

Segue alguns exemplos de animação on scroll: http://www.sitepoint.com/scroll-based-animations-jquery-css3/ http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/ http://jackonthe.net/css3animateit/ http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/ http://plugins.compzets.com/animatescroll/# http://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html https://scrollrevealjs.org http://www.webdesigncrowd.com/demo/dynamic-flat-shadow-8.4.12/ http://lab.hakim.se/scroll-effects/ http://rodrigoludgero.com/rlsmooth/rlsmooth.html http://cardume.github.io/scrollAnimate/ http://codepen.io/elemental-shift/pen/kHjcu/ http://nickavi.com/responsive_3dfoldscroll/ http://davegamache.com/parallax/ http://demonstration.easy-development.com/jquery-story-tale/

E uns exemplos de animação em over: http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html http://ianlunn.github.io/Hover/ http://www.creativebloq.com/css3/animation-with-css3-712437 http://www.html5templatesdreamweaver.com/hover-effects.html https://www.freshdesignweb.com/image-hover-effects/ http://www.jqueryrain.com/demo/jquery-image-hover-effect/ http://www.the-art-of-web.com/css/css-animation/

E esse cara aqui que eu amo. Aliás, vale uma olhada no menu elements, tem uns exemplos muito bons.
http://demos.artbees.net/jupiter/shortcodes/animated-columns/ Os exemplos são só exemplos, viu, não é pro site sair rodopiando! :D

[LuizArmesto]

@sibigauer É muito link com muita informação... Qual é a animação que você pensou no scroll e em quais elementos?

O mouse passa sobre o que? os quadrados "_blog", "_cursos", etc ou nos circulos "Faça parte", "Ferramentas"? Ou não é nada disso? Que elemento que se move/aumenta?

Se tiver em algum dos links a animação em questão, separa ele dos demais.

[sibigauer]

@LuizArmesto , é Mouse over sobre os quadrados blog curso, etc. Esses são os que se movem/aumentam e são links para suas respectivas páginas.

O scroll trigger pode ser no conteúdo inteiro dos quadrados, no conteiner sem os bg verde. Não precisa, necessariamente, mas animação de content fica bonitinho nas páginas. Na dúvida, vai de fade in.

Eu deixei os assets com os ícones soltos, se facilita para vc posso gerar na moldura (quadrado branco com borda arredondada) e os dois do meio com círculo. Me avisa que subo na pasta assets do vbeta.

O gradiente dos bgs levam os valores de verde da paleta, não tem nenhum valor diferente ali. Só note que o bg gradiente fica dentro do main grid e o bg de fora é somente a cor de fora do radial gradient. Aí a parte clara não sai fora do sync com o content.

[LuizArmesto]

@sibigauer Blz, dúvidas sanadas :thumbsup:

Se puder colocar os ícones já com as molduras ajuda sim. Obrigado

[sibigauer]

prefere eles no tamanho maior (resultado do mouse over) ou tamanho menor (before)?

[LuizArmesto]

maior

[sibigauer]

Tão na Assets da VBETA, @LuizArmesto