Unha das técnicas "máis quentes" na web hoxe é o desprazamento de paralaxe. Todos estivemos nos sitios onde xira a roda de desprazamento no rato e o contido na páxina móvese cara a arriba ou abaixo ou sobre a páxina mentres xira a roda do rato.
Para aqueles novos para o deseño web e deseño gráfico, esta técnica pode ser moi difícil de acadar debido á cantidade de CSS necesaria.
Se iso o describe, hai unha serie de aplicacións que poden acudir a artistas gráficos. Usan basicamente un enfoque familiar de deseño de páxinas para páxinas web, o que significa que non hai moita codificación. Unha aplicación que realmente creceu de relevo é Adobe Muse.
O traballo que realizan os profesionais de gráficos usando Muse é bastante sorprendente e podes ver unha mostra do que podes facer visitando o sitio web de Muse. Aínda que os profesionais da web tenden a considerar a Muse como unha especie de "xoguete de liquidación", tamén está sendo usado polos deseñadores para crear prototipos móbiles e web que eventualmente serán entregados aos desenvolvedores no seu equipo.
Unha técnica que é increíblemente fácil de realizar con Muse é o desprazamento de paralaxe e, se queres ver a versión completa do exercicio, percorreremos o teu navegador a esta páxina. Cando roda a roda de desprazamento do rato, o texto parece que se move cara a arriba ou cara a abaixo e as imaxes cambian.
Comezamos.
01 de 07
Crea unha páxina web
Cando abras Muse faga clic na ligazón Nova páxina . Isto abrirá as propiedades do novo sitio . Este proxecto estará deseñado para unha aplicación de escritorio e pode seleccionalo no menú despregábel de deseño inicial . Tamén pode establecer os valores para o número de columnas, ancho de canal, márgenes e recheo. Neste caso, non estabamos moi preocupados con isto e simplemente premei OK .
02 de 07
Formatear a páxina
Cando configura as propiedades do sitio e fai clic en Aceptar, foi levado ao que se chama Vista do plan . Hai unha páxina de inicio na parte superior e unha Páxina principal na parte inferior da xanela. Só necesitabamos unha páxina. Para chegar a Design View, fixemos dúas veces na páxina de inicio que abriu a interface.
Á esquerda hai algunhas ferramentas básicas e, á dereita, hai unha variedade de paneis usados para manipular o contido na páxina. Ao longo da parte superior están as propiedades, que se poden aplicar á páxina ou calquera cousa seleccionada na páxina. Neste caso, queriamos ter un fondo negro. Para lograr isto, facemos clic no chip de cor do recheo do navegador e elixe o negro do selector de cores.
03 de 07
Engadir texto á páxina
O seguinte paso é engadir un texto á páxina. Seleccionamos a ferramenta de texto e debuxamos un cadro de texto. Entramos na palabra "Benvido" e, nas Propiedades configurou o texto a Arial, 120 píxeles de branco. Centro aliñado.
Despois cambiámonos á ferramenta Selección, prememos no cadro de texto e fixamos a súa posición Y a 168 píxeles desde a parte superior. Coa caixa de texto aínda seleccionada, abrimos o panel Aliñar e alineamos a caixa de texto cara ao centro.
Finalmente, coa caixa de texto seleccionada, mantivo presionadas as teclas Option / Alt e Shift e fíxose catro copias da caixa de texto. Cambiamos o texto e a posición Y de cada copia para:
- A, 871
- Gráficos, 1621
- Software, 2371
- @ About.com, 3181
Notarás, cando configura a situación de cada caixa de texto, a páxina redimensiona para acomodar a localización do texto.
04 de 07
Engadir marcadores de imaxes
O seguinte paso é poñer imaxes entre os bloques de texto.
O primeiro paso é seleccionar a ferramenta rectangular e debuxar unha caixa que se estende desde un lado da páxina cara á outra. Co rectángulo seleccionado, fixamos a súa altura ata 250 píxeles ea súa posición Y a 425 píxeles . O plan é ter que sempre estirar ou contratar o ancho da páxina para acomodar a vista do navegador dun usuario. Para lograr isto, fixemos clic no botón de 100% de ancho das Propiedades. O que fai isto é gris para fóra do valor X e para asegurar que a imaxe sempre sexa o 100% do ancho da vista nun navegador.
05 de 07
Engadir imaxes aos marcadores de imaxes
Co Rectángulo seleccionado fixemos clic na ligazón de recheo, non no chip de cor, e fai clic na tinta I mage para engadir unha imaxe no rectángulo. Na área Fitting , seleccionamos Scale To Fit e prememos o control central na área de Posición para asegurar que a imaxe escale desde o centro da imaxe.
A continuación, usamos a técnica Opción / Alt-Maiúspora-arrastrar para crear unha copia da imaxe entre os dous primeiros bloques de texto, abriu o panel de recheo e cambiou a imaxe por outro. Fixemos isto para as dúas imaxes restantes tamén.
Con imaxes no lugar, é hora de engadir o movemento.
06 de 07
Engadir Parallax Scrolling
Existen varias formas de engadir o desprazamento de paralaxe en Adobe Muse. Amosámosche unha forma sinxela de facelo.
Cando abra o panel de recheo, faga clic na páxina de desprazamento e, cando se abra, faga clic na caixa de verificación Mover .
Verá valores para o movemento inicial e final . Estes determinan a rapidez coa que se move a imaxe en relación á roda de desprazamento. Por exemplo, un valor de 1.5 moverá a imaxe 1,5 veces máis rápido que a roda. Usamos un valor de 0 para bloquear as imaxes no lugar.
As frechas horizontais e verticais determinan a dirección do movemento. Se os valores son 0, as imaxes non se moverá independentemente da frecha que faga clic.
O valor medio - Posición clave - mostra o punto onde as imaxes comezan a moverse. A liña superior á imaxe comeza, para esta imaxe, 325 píxeles desde a parte superior da páxina. Cando o scroll alcanza ese valor a imaxe comeza a moverse. Pode cambiar este valor cambiándoo no cadro de diálogo ou premendo e arrastrando o punto na parte superior da liña ou arriba ou abaixo.
Repita isto para as demais imaxes da páxina.
07 de 07
Proba de navegador
Neste punto, terminamos. O primeiro que fixemos, por razóns obvias, era seleccionar File> Save Site . Para a proba do navegador, simplemente seleccionamos Ficheiro> Páxina de visualización no navegador . Isto abriu o navegador predeterminado da nosa computadora e, cando se abriu a páxina, comezamos a desprazarse.