SIMPLE PARALLAX (CSS3/HTML5/JS)

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 58

  • @yanistancheva3076
    @yanistancheva3076 8 лет назад +33

    I don't understand Portuguese and somehow I didn't need to:) very good tutorial, thank you so much

  • @johncovv
    @johncovv 5 лет назад +5

    [PRA QUEM PRECISA QUE A IMAGEM INICIE EM UMA POSIÇÃO ANTES DA ALTERAÇÃO.] ##################################
    Primeiro você veja qual é a posição que precisa deixar na tela alterando no elemento ou no css.
    Eu por exemplo precisei colocar no elemento layer_1 um top: 30%;
    Após definir o valor no meu top, fiz a alteração no js, usando o mesmo valor que coloquei no elemento, para que ele iniciasse com top 30% e aumentasse com o tamanho da tela.
    layer_1.style.top = 30 + (window.pageYOffset / 20) + '%';
    ao fazer isso, o javascript já vai começar com 30% e vai somar com o tamanho da pagina e adicionar o % após isso.
    para tirar %, simplesmente troque o "+" pelo "-" que vai subtrair o tamanho da tela pelo tamanho já definido.
    ################################

  • @SrJuniormanuel
    @SrJuniormanuel 9 лет назад +1

    MUITO OBRIGADO PELA AULA, NEM ACREDITO QUE ESTOU FAZENDO ISSO, ISSO É FANTÁSTICO.... Muito obrigado mesmo, continue assim, que eu estou orando por VOCÊ FERREIRA #

    • @leonardoferreira.design
      @leonardoferreira.design  9 лет назад

      +Jú Junior muito obrigado! Suas orações são fundamentais, continue nos acompanhando meu amigo. Grande abraço. ;)

  • @GilbertoGoncalvesFaktusWeb
    @GilbertoGoncalvesFaktusWeb 8 лет назад

    Ola, Mateus, tenho visto este tipo de efeito explicado de forma bem complicada, ótimo o seu modo de construção, pergunto, desejo conter este efeito dentro de uma div específica, testei algumas funções de meu conhecimento, mas não consegui, as imagens flutuantes permanecem soltas na página. Alguma dica?

  • @sibeleira
    @sibeleira 6 лет назад +5

    Exatamente o que eu estava procurando, vc explica super bem, obrigada!

  • @MiqueiasSilva-design
    @MiqueiasSilva-design 7 лет назад

    Parabéns pelo tutorial. Realmente é muito bom.
    Você poderia me ajudar com uma dúvida: Como faço para que as divs se movam na diagonal?
    Desde já, agradeço.
    Forte abraço.

  • @fekbr5284
    @fekbr5284 8 лет назад

    Gostei, bem claro e objetivo, teria como upar de novo o código seu, pois tentei montar aqui passo, mas acho que errei em algo.
    Obrigado.

  • @cireneuguilherme730
    @cireneuguilherme730 6 лет назад

    Excelente explicação. Uma dúvida, é possível adicionar como evento o movimento do ponteiro do mouse somente com Javascript?

  • @viniciocoelho3538
    @viniciocoelho3538 6 лет назад

    Ficou bem legal. O Ricardo Sanches tem um vídeo sobre isso que tbem é bem bom. Parabéns.

  • @mariocidade5634
    @mariocidade5634 8 лет назад

    Lindo, fazendo com CSS e JS externo o programa é executável Ferreira?

  • @RegiltonBezerra
    @RegiltonBezerra 7 лет назад

    show, mas como faz para manter o efeito em uma unica div???.. pois apliquei esse efeito nas imagens e elas passam a rolar na página inteira.. e não em um só content....

  • @otaviowill
    @otaviowill 5 лет назад

    Parabéns
    muito show, vc tem um dom para explicar que fiquei de cara!

  • @pamqk_
    @pamqk_ 8 лет назад

    Pratico, objetivo e organizado. Parabéns! Muito obrigada!

  • @paulosumemo
    @paulosumemo 7 лет назад

    Boa Noite! meu amigo eu não sei se ainda está fazendo esse trabalho de dar aula, mas vc esta de parabéns muito obrigado

  • @marcybarret
    @marcybarret 8 лет назад

    suas aulas são maravilhosas.. ajuda muitooo, Parabéns

  • @mavasites2515
    @mavasites2515 9 лет назад +1

    efeito simplesmente show , ta parabéns suas vídeo aula

  • @mateuscerqueira8788
    @mateuscerqueira8788 8 лет назад +1

    Parabéns, efeito top, queria colocar em meu portfólio só que horizontalmente, como faço isso? Obrigado.

  • @williamroger9375
    @williamroger9375 9 лет назад +2

    Cara muito obrigado por compartilhar conhecimento conosco! ótimo vídeo!

  • @Rubafix989
    @Rubafix989 8 лет назад +3

    Please precise video language when using english title, that helps a lot when searching for informations

  • @laysa4486
    @laysa4486 6 лет назад +1

    Oi, queria tirar uma dúvida minha imagem não ta aparecendo, até agora eu fiz isso olha


    for(var i=1; i < 50; i++)
    {
    document.write(' testando parallax'+1+'

    • @laysa4486
      @laysa4486 6 лет назад

      Desculpa já achei o erro :/

  • @Joaquimjcv
    @Joaquimjcv 8 лет назад

    Ferreira, montei o Parallax conforme vc instruiu no vídeo e funcionou 100%, mas quando tentei colocar em uma página, que tenho um mecanismo de rolagem suave em Jquery deu conflito, e o Jquery só funciona UMA VEZ (quando entro na página), depois para. Vc ou alguém pode me ajudar ?

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      Joaquin, poderia subir seu código no jsfiddle e colocar o link aqui? Abraços!

    • @Joaquimjcv
      @Joaquimjcv 8 лет назад

      jsfiddle.net/bdz1mh9s/ Desde já agradeço a atenção

    • @Joaquimjcv
      @Joaquimjcv 8 лет назад

      Oi Ferreira, tentei resolver e descobri o seguinte, que Códigos "Scroll" JavaScript, não compatibilizam com "Scroll" Jquery, (se não te causar nenhum contratempo) você teria como ensinar este mesmo Código em JQuery !

  • @TecGrubOficial
    @TecGrubOficial 8 лет назад

    Aee man, o link dos arquivos estão off... parabéns pelo vídeo muito bom... o meu não funfo queria achar o erro vendo o seu !!

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      +TecGrub já arrumei. www.dropbox.com/s/6ux2pyhmr6i1d27/aula-parallax.rar?dl=0 ;)

    • @TecGrubOficial
      @TecGrubOficial 8 лет назад

      Ferreira Studios ® Aee man descobri meu erro, eu tinha trocado o pageYOffset por pageXOffset ai não tava funcionando vlww !!

  • @evillynoliveira5982
    @evillynoliveira5982 4 года назад

    Massa dms

  • @evertonvargas1484
    @evertonvargas1484 7 лет назад

    Não deu certo pra mim, não consigo fazer a imagem aparecer. Já me certifiquei várias vezes q copiei o código certo. Alguém pode me ajudar

  • @danilomicaias9667
    @danilomicaias9667 7 лет назад

    Como eu faço para colocar a imagem por trás de algum conteúdo que tem na página?

  • @thyagofranca9299
    @thyagofranca9299 2 года назад

    Top man, valeww

  • @rosanawalle
    @rosanawalle 7 лет назад

    EXCELENTE PARABENS!!!!!!!!

  • @brunohirai9875
    @brunohirai9875 9 лет назад +1

    muito bom cara.

  • @jruallipahn
    @jruallipahn 8 лет назад +2

    Thanks Bruh!! Even if i dont understand what your saying... youre such a big help!! :)

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      +ralph julian rodriguez já arrumei. www.dropbox.com/s/6ux2pyhmr6i1d27/aula-parallax.rar?dl=0 ;)

  • @marianocuenca746
    @marianocuenca746 7 лет назад +1

    muy buen tutorial, exelente! Muchas gracias hermano!

  • @Garr1tano
    @Garr1tano 8 лет назад

    Ferrerira Studios, eu queria saber como eu faço esse parallax:
    enterthearena.digitalsurgeons.com/the-game
    O que me chamou a atenção, é que você dá um scroll na página, mas mesmo assim os pontos sobrepostos continuam se movimentando.
    Ah propósito, bela aula e excelente efeito!
    Obrigado!

  • @felipecss3295
    @felipecss3295 5 лет назад

    minhas imagens nao aparecem

  • @TheRicardoal100
    @TheRicardoal100 7 лет назад

    Cara cria legendas em inglês, francês, espanhol e outras línguas, esse teu vídeo é muito bom, mas com legendas em outra linguagem seria ótimo.

  • @cpdrenato
    @cpdrenato 6 лет назад

    Gostei.

  • @wallacebarbosa5793
    @wallacebarbosa5793 8 лет назад

    esse negocio de colocar no-repeat n ta mostrando a imagem

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      +menos maior !!! já arrumei. www.dropbox.com/s/6ux2pyhmr6i1d27/aula-parallax.rar?dl=0 ;)

  • @juliocesargc125
    @juliocesargc125 8 лет назад

    Ta pronto??

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      +Julio C GC já arrumei. www.dropbox.com/s/6ux2pyhmr6i1d27/aula-parallax.rar?dl=0 ;)

  • @juliocesargc125
    @juliocesargc125 8 лет назад

    Tem como mandar outro link pra download das imagens?? pq esse n ta funcionando

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      Estou reupando todos os arquivos. Faltam apenas os de programacão.

    • @juliocesargc125
      @juliocesargc125 8 лет назад +1

      Obrigado, gostei muito da apresentação, vou usar no meu tcc, quando terminar envie o link por favor

    • @leonardoferreira.design
      @leonardoferreira.design  8 лет назад

      +Julio C GC já arrumei. www.dropbox.com/s/6ux2pyhmr6i1d27/aula-parallax.rar?dl=0 ;)

  • @777colombe
    @777colombe 8 лет назад +1

    Cara! Use jQuery e seja mais feliz!

  • @iam.molder
    @iam.molder 6 лет назад

    foda

  • @pahadilovers8540
    @pahadilovers8540 7 лет назад

    what you want to say??? :P

  • @Max-bh8tg
    @Max-bh8tg 7 лет назад

    Using top is EXTREMLY inefficient.