Design de site: como adicionar efeitos de rolagem e animações no Editor por Wix

1. Boas-vindas ao curso!: Oi, meu nome é Patti e bem-vindo à minha aula Skillshare. Sou especialista em marketing digital e trabalhei na indústria há vários anos, ajudando pequenas e grandes empresas criar os sites e aconselhando-os sobre as melhores práticas para dar isso usa a melhor jornada de navegação. Nesta classe, vamos nos concentrar em usar animações e efeitos de rolagem na plataforma Editor X. Esta é uma plataforma intuitiva e muito bem projetada para ajudar usos como você a criar sites em um maneira muito fácil de usar. Este site específico que você vê à sua frente é um exemplo que vamos usar, que estava na minha primeira classe de corrida de edição. Então, se você não se registrou ou se juntou a esse, peço-lhe que faça para que você possa me seguir enquanto passamos por essa aula em particular. Nesta classe, vamos analisar usando paralaxe, revelar recursos, diferentes técnicas de animação e onde colocá-las e como fazer isso usando o sistema intuitivo que wits tem publicado, que é o Editor X. O que você está esperando. Eu realmente espero que você se junte a mim nesta aula e estou ansioso para vê-lo lá. E, como sempre, se houver alguma dúvida, depois de participar, sinta-se à vontade para colocá-las na área de discussão e eu vou ter certeza de voltar para você. 2. Como tornar um site mais envolvente: Então, quando se trata de criar um site imersivo, uma das principais atrações para o espectador ou para o usuário é o quão imersivo o site é. Isso permite que o usuário se sinta transportado para o produto ou o serviço que você está oferecendo. E uma das maneiras que muitas vezes podemos fazer o site parecer mais imersivo é incluir muitas imagens, vídeos, adicionar efeitos, animações , rolando animações para o site que realmente ajude a amplificar essa experiência para o usuário. 3. Começando com a imagem de desembarque de heróis: Então o que vamos fazer é retomar de onde paramos. Então, se você ainda não assistiu minha primeira classe na criação deste site da empresa de turistas naturais. Sugiro que você comece por aí e depois se junte a nós aqui , onde vamos ser um pouco mais avançados e adicionar algumas animações agradáveis, efeitos de rolagem, que realmente fazem o site aparecer e se destacar. 4. Razões para efeitos e animações: Você sempre pode pensar nessa classe como sendo um complemento para a anterior, onde vamos alterar a configuração das imagens e textos que temos aqui para tentar torná-la mais imersiva, utilizando os recursos avançados que Editor X tem para tentar tornar a experiência mais imersiva. Uma das primeiras coisas que vamos fazer é olhar para tornar essa imagem de herói, que é a imagem da landing page mais imersiva e ter alguma rolagem de paralaxe. rolagem de paralaxe significa essencialmente que esse contêiner, que tem a imagem nele, se torna uma janela e a imagem é colocada atrás disso. Então, quando você rola, você pode fazer com que a imagem se mova para cima e baixo em relação ao movimento de rolagem do mouse. 5. Como adicionar efeitos e animações: Uma das coisas óbvias que podemos fazer é quando clicamos nesta área de imagem e nos certificamos de que as imagens selecionadas, podemos entrar na guia de animação. Agora, esta guia de animação terá várias animações para escolher. E se você passar o mouse sobre cada um, você verá como ele dá uma boa visualização de como poderia ser. Agora, isso é obviamente animações muito básicas e elas podem servir a um propósito no site. Mas eu não me sinto como uma imagem de herói de pouso, eles fazem mais sentido. Uma das coisas que vamos fazer é abrir a coluna do inspetor e podemos ir para algumas das propriedades à direita aqui. Agora, antes de tudo, queremos ter certeza de que a imagem em si é fluida e está fluida e está dentro desse contêiner, o que obviamente é. E você pode dizer isso olhando para a caixa azul embaixo do menu Configurações rápidas, onde diz seção e imagem. Isso significa que a imagem é colocada dentro desse contêiner. No lado direito aqui, você verá diferentes opções que temos. Podemos querer escolher a capacidade fazer com que isso desça um pouco. Isso será útil para tornar o título do site mais proeminente. Você pode escolher um plano de fundo, então o plano de fundo será uma sobreposição. Mas queremos fazer é que eu mencionei antes é adicionar alguns efeitos de rolagem a esta imagem principal. Para fazer isso, entramos nas configurações. Essas coisas abrirão uma caixa pop-up. Podemos mover isso se você quiser. Aqui você tem a opção de ajustar as configurações da imagem, como o gradiente, a tonalidade, o brilho, o contraste, etc. Mas também temos a opção aqui de ter o comportamento de rolagem. Agora, o comportamento estragado é o que vamos nos concentrar. Aqui você tem duas opções, sua paralaxe e você revelou. Se clicarmos em paralaxe, você verá como a imagem agora tem uma perspectiva diferente. Isso porque o Wix entende automaticamente o tamanho da imagem e a quantidade de movimento que pode acontecer em toda a imagem enquanto se mantém em resolução. Agora clicamos em paralaxe. Vamos clicar na pré-visualização e ver o que isso se parece. Agora, se eu rolar para baixo, você verá como a imagem se move quase lentamente atrás do texto enquanto você rola para baixo. Isso torna uma experiência imersiva muito legal para o usuário. E isso quase o torna um efeito 3D. Agora, eu realmente gosto disso. E uma das coisas que podemos fazer é que eu sei antes de mencionarmos ter animações que podem parecer um pouco chatas. Vamos adicionar um fade in. Então, se clicarmos em fade-in e vamos personalizá-lo. Agora queremos que seja muito rápido e rápido. Então, em vez de ser 1,2 segundos, vamos colocar isso em cerca de cinco de segundo. Também podemos optar por ter um atraso, mas vamos manter isso como está porque queremos que ele carregue instantaneamente. Agora vamos testá-lo. Veja essa animação muito rápida no estilo. Isso é exatamente o que estamos procurando. Esse é apenas um exemplo de uso de paralaxe. O outro exemplo que temos é o recurso revelar. Agora, eu pessoalmente gostei muito do recurso revelador porque ele permite que você tenha uma imagem quase estática, especialmente se houver sobreposições diferentes que você deseja colocar em cima essa imagem. Então, vamos fazer uma nova seção e dar um exemplo e ver como isso se parece. Se chegarmos aqui e abrirmos uma nova seção. Então, vamos adicionar uma nova seção, seção em branco aqui. E vamos adicionar alguns elementos aqui. Podemos chegar rapidamente à ferramenta de composição. Isso nos dá algumas boas predefinições. Sempre podemos usar um desses, ou podemos simplesmente ir a uma adição rápida e importar nossas próprias coisas lá. Primeiras coisas primeiro, vamos adicionar um layout que é uma grade. Então isso nos ajuda a compartimentalizar a seção. Então, novamente, eu cobri tudo isso no meu vídeo anterior. Portanto, certifique-se de voltar lá se quiser saber mais sobre como todas essas funções funcionam, colocarei um link Na descrição desta aula se você quiser ir que vamos colocar em uma grade. Então, vamos colocar uma grade aqui e esticar isso é que ela cobre toda a área da seção. Agora, de um lado, vamos ter texto do outro lado, teremos uma imagem. Agora, você pode usar funções reveladoras como uma forma de contar uma história. Então, por exemplo, se quiséssemos reutilizar uma dessas imagens daqui de baixo. Por exemplo, poderíamos usar o Reino Unido. O que vamos fazer é contar uma história sobre o Reino Unido. Então, talvez queiramos manter mencionados os países ou desculpas, as cidades ou municípios ou diferentes pontos de interesse dos turistas no Reino Unido. Isso será uma história para contar. No lado esquerdo, vamos adicionar algum texto. Podemos fazer isso diretamente aqui. Ou, se você tiver algum ativo pré-carregado, poderá trazê-los da pasta ativos salvos aqui. Para isso, vamos apenas trazer um cabeçalho. Então, vamos arrastar e soltar isso aqui e garantir que isso esteja centralizado. Você pode fazer isso usando as Configurações rápidas aqui. Portanto, certifique-se de que esteja no centro. E bem no meio. Lá vamos nós. Vamos chamar isso de Reino Unido. E esse texto é bem grande. Então, vamos colocar isso para 70. E estique-o também para que ele vá em uma linha. E, em seguida, certifique-se de que, novamente, esteja bem centrado. Isso é um. Podemos escolher o plano de fundo para que possamos obviamente fazer isso qualquer cor que quisermos . Tendo em mente. Vamos ter uma foto no lado direito, então ela cobrirá onde quer que o plano de fundo escolhermos. Podemos escolher por enquanto apenas um belo fundo branco em branco. E no lado direito, agora vamos incluir alguns arremessos. Se seguirmos para a seção Mídia, teremos alguns exemplos de imagens que já temos. Então, vamos aqui. E, obviamente, essas imagens refletem Londres. Mas com o Wix, se você tiver a capacidade de procurar qualquer tipo de imagem. Então, se apenas digitarmos no Reino Unido, nada surge que aprenda a segurar. Vamos tentar Unsplash. Aqui vamos nós. Vamos usar algumas dessas imagens de caras. Unsplash ou imagens de alta resolução gratuitas que você pode usar em seu site relativamente, Vamos usar esta imagem aqui. Então, vamos adicionar essas duas páginas e depois trazê-la para o lado direito. E você verá essa caixa aparecer. Isso significa que vamos anexá-lo a esta seção. Se clicarmos aqui e esticarmos, isso agora preencherá o lado direito da área. Legal, isso parece muito bom. Mas o que dissemos que queríamos fazer era contar uma história. O que vamos fazer agora é copiar e colar esta seção de grade. É só copiar e colar. Então esse é um controle C e V no Windows, ou Command C e V no Mac. O que temos aqui agora são duas das mesmas seções exatas. O que faremos aqui talvez seja mencionada Londres como nossa primeira localização. Coloque isso um pouco mais alto e vamos adicionar um pouco mais de texto. Isso pode ser apenas algum texto de parágrafo. Agora isso pode ser qualquer coisa. Não vou ficar muito louco neste tutorial, mas obviamente você pode escolher o que deseja incluir. Fios tão pequenos. Mais uma vez, apenas um exemplo. Londres é a capital do Reino Unido que abriga alguns dos locais históricos e arquitetônicos mais exclusivos do país . Agora, o que podemos fazer é definir alguma animação para esta seção. Então clique com o botão direito aqui e vamos para as configurações e vamos escolher Revelar. Agora é importante aqui porque clicamos em Revelar. Podemos fazer com que o próximo também tenha revelado. O que podemos ouvir agora é o que a revelação faz é que ela coloca a imagem atrás da janela quando você está rolando por ela, a ilusão é que o texto esquerdo se move enquanto a imagem direita permanece. Então, vamos dar uma prévia a isso. Veja como isso parece lá. O que isso é feito é dar a ilusão de que a imagem está presa e estacionária enquanto o texto à esquerda está se movendo. Se eu for para a seção, você provavelmente notou que havia algum tipo de linha branca entre elas. Isso porque demos a seção da cor de fundo do branco. Podemos mudar isso e podemos fazer que isso não tenha cor de fundo. Nós sempre podemos ir nada 0. E isso deve se livrar do inferior. E então vamos fazer o primeiro também. Desculpe, imagem, opacidade da imagem está lá. Vamos fazer com que não tenha imagem de fundo. E o mesmo vale para este. Então eles são agora os dois Background menos Lá vamos nós. Dessa forma, você obtém a ilusão de este site em particular ter uma imagem por trás dele. Agora, esse é um recurso realmente único que muitos sites atualmente estão incorporando. Porque, como você pode imaginar, às vezes é bom contar uma história. Antes tínhamos essas funções em que tínhamos efeitos de focalização, onde a cor muda com base em movimentos de pairar, onde agora temos a capacidade passar por diferentes seções pois você tem a opção aqui para ir o mais fundo que você quiser. Tanto quanto você quiser. Existem duas das principais paralaxe e revelam animações de rolagem que podem realmente fazer um site parecer legal. Outra coisa que as empresas gostam de fazer ou sites gostam de ter é a rolagem do Azure. Animações diferentes surgem em momentos diferentes. Se seguirmos para uma página em branco. Então, neste caso específico, estamos usando locais. E vamos reutilizar a mesma seção com Londres lá. Então vá aqui e vamos nos concentrar no Reino Unido. Agora, o que vamos fazer é ao adicionar uma seção e as pessoas percorrem este site. Veja animações diferentes aparecerem à medida que elas rolam. Uma das maneiras que podemos fazer isso é adicionar outra seção. Aqui vamos nós. Vamos torná-lo uma grade de dois por dois. Isso está novamente nos permitindo ter elementos diferentes ou ativos diferentes em lados diferentes. E vamos adicionar uma composição pré-feita. Que tal usarmos, vamos usar algo um pouco mais interessante. Vamos usar este aqui. Neste momento, temos uma imagem pré-criada muito legal. Vamos substituir essa imagem traseira algo um pouco mais interessante. Vamos colocar uma pessoa trabalhando, andando por uma floresta. Obviamente floresta existente no Reino Unido também. Então, não estamos muito longe. Nós visualizamos isso rapidamente. Você verá como isso fica bem aqui e, obviamente, começou a mudar o texto. Mas uma das coisas que podemos fazer é adicionar algumas animações a isso. Então, à medida que você está rolando o pop-up, vamos duplicar isso. Copie e cole que temos dois deles. E vamos mudar essa imagem para outra coisa. Então, só por causa disso, vamos usar essa imagem de praia. Então, agora temos duas imagens separadas. O que podemos fazer é mudar o ponto focal. Então, agora você pode ver que estamos começando aqui. Talvez queiramos usar mais desse canto inferior direito com as conchas. Isso é como uma coisa que poderíamos fazer é adicionar animações. Animações como essa parecem muito bonitas se elas fluem ou desaparecem. Eu sempre gosto de flutuar em função porque faz parecer. É uma animação de experiência de rolagem mais intuitiva. Então, pegamos o carro alegórico e só animamos na primeira vez. Isso é muito importante porque a última coisa que queremos é que toda vez que alguém carrega a página constantemente anima, ela pode ficar bastante irritante depois de um tempo. Vou bater vindo da esquerda. Então, preferimos animação. Isso parece bom. Podemos fazer o mesmo aqui. Mas o que vamos fazer é mover esta caixa para a esquerda. Dessa forma, temos um pouco de diferença entre os dois. Vamos fazer o mesmo aqui, mas desta vez vamos animá-lo da direita. Flutue, personalize o animate da direita. Agora, se visualizarmos isso, você verá como a animação só vem quando você chegar à janela de exibição. vez, um toque muito bom. Isso pode ser feito para qualquer coisa no Wix, qualquer elemento ou ativo que você trazer, você pode adicionar animações a ele. Então, apenas por exemplo, vamos colocar algumas decorações aqui. Podemos colocar uma boa imagem grande aqui. Vamos colocar algum texto aqui, o que vai dizer, vai dizer uma venda de 50% de desconto ou algo assim. 50% livro até o quinto 2022. Este é um exemplo que temos aqui. Vamos colocar isso no lugar central no recipiente. Então essa é uma coisa que fiz que eu mudei e segurei os dois, que é colocado no contêiner. Agora isso significa que você pode ver a forma básica e colocá-la lá. Copie isso, agrupe esses juntos. E vamos editar rapidamente esse texto para que ele pareça um pouco melhor do que o que ele faz. Então, 50% do livro até o quinto de dezembro. Agora vamos deixar esse texto branco porque todos sabemos que o branco fica melhor em cinza. Lucro. O que queremos fazer é animar esse grupo também. Para que possamos fazer animação. Clique em fluxo ou expanda. Voando talvez. Mais uma vez, animações legais aqui. Vamos fazer o fluxo novamente. Bom, isso é bastante profissional. Na verdade, podemos tornar o comprimento dele um pouco mais curto. Não chegamos tarde demais. Deixe-me 0,8 novamente animar pela primeira vez. Se começarmos isso de novo. Veja como ele vem bem e devagar. Novamente, animações e você pode adicionar botões, eles podem ir para formulários de contato e coisas assim. Então eles conseguiram coisas realmente úteis. E isso é uma pequena coisa que você pode usar um complemento para melhorar a experiência do seu site. 6. e e isso é um WRAP!: Então, eu realmente espero que você tenha achado essa classe muito curta útil. Eu não queria fazer isso muito tempo. Pretendo fazer uma série de vídeos de aula de dez a 15 minutos todas as semanas que se concentram em tópicos específicos usando o Editor X. O primeiro foi cerca de uma hora e meia porque eu queria apresentar o plataforma para você como um novo usuário. E desta vez tratava-se focar apenas nos efeitos de animação, rolagem e paralaxe. O próximo que vamos fazer é no gerenciamento de conteúdo. Portanto, procure a próxima classe em que essencialmente criaremos um banco de dados de gerenciamento de conteúdo cheio de imagens que podem ser colocadas em páginas dinâmicas. Então, uma vez que esse banco de dados obtém imagens, ele é automaticamente adicionado a determinadas páginas e páginas dinâmicas , o que pode ser muito útil, especialmente para usuários que desejam criar lojas ou e-⸺- sites de comércio onde, à medida novas imagens surgem para anúncios ou dispositivos ou serviços personalizados, o que você tem? Você pode simplesmente alterar um banco de dados e ele é enviado para outras partes do site sem ter o processo tedioso de adicionar imagens constantemente a diferentes páginas e se perder em perder tempo fazendo isso. Então, definitivamente, procure o próximo vídeo. E se você tiver outras perguntas, deixe-as na seção de perguntas. E ficarei grato se você pudesse rever este e o vídeo anterior se você já os assistiu. E estou ansioso para vê-lo em uma aula no futuro.