Efeitos com Css e Javascript - Marcação de texto


(Gabriel Antonio) #1

Olá, estou com o projeto de uma plataforma de estudos, onde eu preciso fazer um efeito que "marca" o texto, como se tivesse sido feito com aquelas canetas amarelas, enquanto um áudio da narrativa daquele texto toca, então o efeito de marcação tem de estar no ritmo do áudio, a cada palavra do narrador, o texto vai sendo marcado. Quero fazer esse projeto apenas com as tecnologias html, css e javascript, para que o usuário não tenha que baixar nada, apenas acessar e navegar. E não me importo com a complexidade, porem preciso de um ponto para poder desenvolver.


(Maykel Esser) #2

Você pode usar speechSynthesis, do JavaScript. Ele pega o leitor de voz do navegador a partir de um texto.

O texto a ser usado você pode obter com jQuery Selection. Exemplo: http://madapaja.github.io/jquery.selection/

O efeito da caneta amarela, use CSS através do seletor :::selection.
Exemplo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_selection


(Gabriel Antonio) #3

Obrigado pela ajuda! E desculpe pela demora em responder... Eu estou aplicando esta solução, baseada em sua orientação, e me parece que será promissora, assim que estiver pronto, eu posto o resultado.


(Maykel Esser) #4

Legal, cara! Espero ter dado uma luz aí! :wink: