Scrollmagic: divertido web design

No web design, uma tendência é como o estilo adotado para a realização dos sites, que é fortemente aceito pelos usuários, geralmente em períodos temporários. Parte das tendências até agora em 2016 e, aparentemente, continuará a dar o tom em 2017, são as animações e seções longas com bastante rolagem.

Não é segredo que esse estilo é bastante atraente e divertido para o usuário, com as animações que podemos tornar a navegação no site intuitiva e divertida, desde que bem utilizadas. Por esse motivo, criamos um tutorial para incluir pergaminhos animados em seu site, usando o plugin jQuery ScrollMagic.

ScrollMagic: Fun Web Design

ScrollMagic é uma biblioteca feita em javascript para obter interações ao mover sites. É uma reescrita completa do seu predecessor Superscrollorama e sua arquitetura é baseada em plugins que oferecem fácil personalização e extensibilidade.

É ideal se queremos implementar algumas das seguintes coisas:

• Animação baseada na posição ou no deslocamento do site. Acione a animação ou sincronize-a com o movimento do pergaminho. Adicione efeito de paralaxe sem muito esforço. Crie uma página com rolagem infinita, manipulando o carregamento de conteúdo com ajax.

Recursos do ScrollMagic

• Desempenho otimizado, é leve, flexível e permite extensibilidade.Gerenciamento de eventos e programação orientada a objetos.Ele suporta web design adaptável.Tem suporte para movimentos nas duas direções (horizontal e vertical).Tem suporte para movimentos dentro de contêineres (div), mesmo vários em uma página.Ele funciona perfeitamente para navegadores: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9.+ Em seu repositório GitHub, ele possui documentação detalhada e muitos exemplos de aplicativos.

Obter ScrollMagic

Está disponível para obtê-lo de várias maneiras.

1: GitHub

git clone git: //github.com/janpaepke/ScrollMagic.git

2: Caramanchão

caramanchão instalar scrollmagic

3: gerenciador de pacotes do nó

npm install scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Você também pode ler Como personalizar o design de um email no Outlook

Instalação e uso

A instalação é bastante simples, apenas incluímos o arquivo do kernel nos arquivos html em que queremos usá-lo.

;

Para uso, o plug-in fornece um padrão de design orientado ao controlador, ao qual uma ou mais cenas são adicionadas. Essas cenas são usadas para definir o que acontece nos contêineres quando eles se movem para um ponto específico.

Este seria um exemplo básico:

// controlador de inicialização var controller = new ScrollMagic.Controller (); // cria uma cena new ScrollMagic.Scene ({duration: 100, // a cena deve durar uma distância de rolagem de 100px offset: 50 // inicia essa cena depois de rolar para 50px}).setPin ("# my-sticky- elemento ") // fixa o elemento pela duração da cena.addTo (controller); // atribui a cena ao controlador

Um exemplo mais avançado seria obter várias compensações, seu código-fonte seria:

$ (function () {// aguarde o documento pronto // init controller var controller = new ScrollMagic.Controller (); // constrói tween var tween = TweenMax.to ("# animate", 0, 5, {scale: 3, facilidade: Linear.easeNone}); // constrói a cena var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", duração: 400, deslocamento: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // adiciona indicadores (requer plug-in).addTo (controller); // init controller horizontal var controller_h = new ScrollMagic.Controller ({vertical: false}); // cria interpolação horizontal var tween_h = TweenMax.to ("# animate", 0, 5, {rotação: 360, facilidade: Linear.easeNone}); // constrói a cena var scene_h = new ScrollMagic.Scene ({duration: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // adiciona indicadores (requer plug-in).addTo (controller_h);});

Você pode encontrar muitos outros exemplos com o código fonte na documentação do plugin.

Como fazer uma instalação limpa do Windows 10 usando um pendrive