Guia-POP

Guia POP :metal:

Um manual de instruções para as funções contidas no arquivo POP-IMAGE, falando a funcionalidade de cada e como você pode personalizar para seu próprio uso.

Função vai( url, descrição)

Essa função é a responsável por fazer todo um processo de encontrar um elemento, alterar o src de uma imagem (que até então está sem existir), pôr uma legenda abaixo da imagem fazendo um processo parecido com o da imagem, e exibir os elementos carregados.

Usando

Para a utilização é necessário você criar uma pequena estrutura, como preferir... e alterar o css para mostrar como preferir, caso não queira montar uma estrutura como essa, você pode importar uma folha de estilo do Texto-formatação que é a album.css.

Performance :beer:

Note que os seletores do arquivo JS correspondente a essa função usa a função document.getElementById() que é o mais performático entre todos os outros seletores.

Função go() :metal:

É a função responsável por navegação single-page (aquela que você clica em um ligar e ao invés de ser redirecionado você apenas tem em sua tela uma rolagem suave).

Usando

Para a utulização basta pôr um atributo em qualquer que seja o objeto, imagem, texto, âncora, botão, entre outras, basta adicionar o atributo com o evento desejado e disparar a função go() passando como argumento o id de onde deseja a rolagem. Exemplo:

     <img src="https://jul10l1r4.github.io/POP-image/logo.jpeg" alt="POP image" onclick="go( `#content` )"/>

Criei uma imagem com o atributo alt que é realmente muito necessário e com um evento que desparará a função go

Botão "de volta ao topo" :top:

Como o nome bem descreve é o botão responsável por ser exibido assim que o usuário desce o necessário para que não tenha trabalho de voltar ao topo.

Usando :fist:

Para usar basta criar algo: div, a, p. (pensando na semântica serial ideal para isso usar a) Acrescente um atributo classe com o nome de tutop e um evento que chame a função up() sem passar nenhum argumento, pois não será usado (uma vez que o local que deseja ir é ao topo ༼⍢༽ ). Exemplo:

 <a class="tutop" onclick="up()">
     <img src="https://jul10l1r4.github.io/HTTP_-_Resposta/img/backtotop.png" alt="Voltar ao topo" title="Topo"/>
 </a>

E apenas ponha uma imagem, ou um emoticom, como quiser que seja relacionado a voltar ao topo, a estilização dele como todos os códigos, podem ser usado e alterado conforme você queira.

Caso você queira utilizar uma folha de estilo para facilitar essa utilização usando o Texto-formatacao o arquivo totop.css e nela terá uma formatação já para o botão.

Dica

Caso você seja a pessoa que prefere a utilização das folhas de estilo e de todo o JS, e não tenha tempo para dá uma olhada no código, indico que pegue todo os códigos que você exportaria e ponha em apenas um arquivo, APENAS O QUE VOCÊ VAI USAR, pois o carregamento de dados influencia no carregamento do layout da sua página, e assim ela ficará singularmente mais performática.

Licença

Colabore :heart:

Você pode ajudar neste projeto, dê um fork nele aí, será uma honra ter sua presença para editar meus códigos e faze-los melhor.

Esse projeto é livre sob liceça GNU GPL-3 🐏

Use e abuse, cite-me e estará tudo certo :cat:. Leia sobre a licença GNU GPL-3