Utilizando VanillaJS
Para fazer esse efeito é bastante simples, basta utilizar o método window.scroll.
Com esse método você pode alterar as coordenadas X
e Y
. Ex:
window.scroll(x-coord, y-coord);
Pronto! Não tem segredos.
Caso você queira algo menos "travado", você pode utilizar o método window.requestAnimationFrame
Para pausar basta armazenar o ID retornado pela função requestAnimationFrame
e utiliza-lo na função cancelAnimationFrame
.
Segue exemplo:
let scrollPosition = 0;
const velocity = 2;
let animation; //Armazena o ID da animação. Isso servirá para quando quiser pausa-la.
/* Botão para iniciar animação */
document.querySelector("#play").addEventListener("click", () => {
rolarPagina("#cifra2")
});
/* Botão para pausar animação */
document.querySelector("#pause").addEventListener("click", () => {
cancelAnimationFrame(animation)
});
/* Função para rolar a página */
function rolarPagina(element) {
window.scroll(0, scrollPosition += velocity);
if (document.querySelector(element).offsetTop <= scrollPosition) {
return;
}
animation = requestAnimationFrame(() => {
rolarPagina(element);
})
}
#pause, #play {
position:fixed;
right: 0;
width: 50px;
}
#play {
right: 55px;
}
<button type="button" id="pause">▌ ▌</button>
<button type="button" id="play">►</button>
<div id="cifra">
<h3>Epica - Cry For The Moon</h3>
<pre><b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>A7</b>
Forever and ever!
<b>Dm/A</b> <b>Bb/F</b>
Indoctrinated minds so very often
<b>Dm/A</b>
Contain sick thoughts
<b>Bb/F</b> <b>C/G</b> <b>Dm/A</b>
And commit most of the evil they preach against
Instrumental: <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>E5</b> (2x)
<b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>D#5</b> <b>C5</b>
<b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>F5</b> <b>E5</b>
<b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>E5</b>
<b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>G5</b> <b>A7</b>
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Don't try to convince me
<b>D5</b>
With messages from God
<b>D#5</b> <b>D5</b> <b>D5</b> <b>D#5</b>
You accuse us of sins
<b>C/G</b>
Committed by yourselves
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
It's easy to condemn
<b>D5</b> <b>D#5</b> <b>D5</b>
Without looking in the mirror
<b>D5</b> <b>D#5</b> <b>C/G</b> <b>Bb/F</b> <b>A7</b>
Behind the scenes (Behind the scenes opens... reality)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget
<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Virginity has been stolen
<b>D5</b> <b>D#5</b>
At very young ages
<b>D5</b> <b>D5</b> <b>D#5</b>
And the extinguisher
<b>C/G</b>
Loses it's immunity
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Morbid abuse of
<b>D5</b> <b>D#5</b> <b>D5</b>
Power in the Garden of Eden
<b>D5</b> <b>D#5</b> <b>C/G</b> <b>Bb/F</b> <b>A7</b>
Where the apple (Where the apple gets a youthful face, a youthful face!)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget
<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>A7</b>
Forever and ever!
(Instrumental)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Em</b>
Forgiveness is not for sale Nor is the will to forget
<b>Em</b> <b>C</b> <b>B7</b> <b>C</b> <b>B7</b>
You can't go on hiding yourself Behind
<b>Em</b> <b>C</b>
Old fashioned fairytales
<b>B7</b> <b>C</b> <b>B7</b> <b>Em</b>
And keep washing your hands in innocence</pre>
</div>
<div id="cifra2">
<h3>Epica - Storm The Sorrow</h3>
<pre>Intro 2x: <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
<b>Bm</b> <b>G</b> <b>Bm</b>
Along the way I find myself
<b>D</b> <b>D/C#</b>
To be confined within me
<b>Bm</b> <b>G</b> <b>D</b> <b>Em</b> <b>C</b>
No place for any other's mind to interfere,
<b>Bm</b>
To grasp the meaning of it all
<b>D</b> <b>D/C#</b>
To overcome my limits
<b>Bm</b> <b>D</b> <b>Em</b> <b>F#</b>
And dance away from any void and empty tones,
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Just tell me why
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Just tell me how I can survive this time
<b>Bm</b> <b>G</b> <b>Bm</b>
Believe yourself and look away
<b>D</b> <b>D/C#</b>
From all that's right within you
<b>Bm</b> <b>G</b> <b>D</b> <b>Em</b> <b>C</b>
Leave all your worries at the door and drift away,
<b>Bm</b> <b>G</b> <b>Bm</b>
I've tried to peer into the core
<b>D</b> <b>D/C#</b>
But could not storm the sorrow
<b>Bm</b> <b>D</b> <b>Em</b> <b>F#</b>
My hollow heart has bled me dry, left me to stray
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Another time without a trace,
<b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Condemn me now
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Send me to hell For I'm already failing
(refrão I)
<b>Em</b>
Intertwine the lines
<b>Bm</b>
That swim beneath the dark
<b>D</b>
Realize the pain we live in
<b>A</b>
Demonize the need we reel in, no
<b>Em</b> <b>Bm</b>
In my memories I'll dig deep enough to know
<b>D</b>
Centuries of dreams unending
<b>A</b> <b>Bm</b>
Another me that yielded tears when someone had betrayed
<b>Bm</b> (<b>G</b>) <b>Bm</b>
No time should ever go to waste
<b>D</b> <b>D/C#</b>
It's not that complicated
<b>Bm</b> <b>G</b> <b>D</b>
You're free to live your life at ease
<b>Em</b> <b>C</b>
No more restraints
<b>Bm</b> (<b>G</b>) <b>Bm</b>
No heed for shadows on your way
<b>D</b> <b>D/C#</b>
That try to steal your laughter
<b>Bm</b> <b>D</b> <b>Em</b>
Your light will drive them all away
<b>F#</b>
Be confident
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will I refrain?
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Can I repent?
<b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will you be there?
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Erase the page For I'm alone and ailing
(volta para refrão I)
<b>C</b>
<b>Bm</b> <b>C</b>
So, this is my life and it can't break me down
<b>Bm</b> <b>C</b>
Go, I will decide who can come in and heal my disease
<b>Bm</b>
Burn it in flames
<b>Bm</b>
Kill it and maim
<b>C</b>
Why can't you see that you need to be freed?
(refrão II - piano)
<b>Em</b> <b>Bm</b>
Intertwine the lines beneath the dark
<b>D</b>
Every bit of pain we're feeling
<b>A</b>
Every other solemn life, no
<b>Em</b> <b>Bm</b>
In the memories you will find somehow
<b>D</b>
There used to be a dream unending
<b>A</b>
No more need to be alone
(refrão III - sobe 1 tom)
<b>F#m</b>
Intertwine the lines
<b>C#m</b>
That swim beneath the dark
<b>E</b>
Realize the pain we live in
<b>B</b>
Demonize the need we reel in, no
<b>F#m</b> <b>C#m</b>
In my memories I'll dig deep enough to know
<b>E</b>
Centuries of dreams unending
<b>B</b> <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Another me that yielded tears when someone had betrayed
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Someone had betrayed
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b></pre>
</div>
Os botões Play e Pause também servirá para aumentar e diminuir a velocidade.
Utilizando jQuery
Com jQuery também é bem fácil. Basta utilizar o método animate
Para pausar basta utilizar:
$('html, body').stop();
Exemplo:
$("#play").click(function() {
/* Captura o elemento que desejamos ir */
var target = $( $("#cifra2") );
$('html, body').animate({
scrollTop: target.offset().top //Captura a posição do elemento
}, 1000); //Tempo de animação em milissegundos
});
$("#pause").click(function() {
$('html, body').stop();
});
#pause, #play {
position:fixed;
right: 0;
width: 50px;
}
#play {
right: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="pause">▌ ▌</button>
<button type="button" id="play">►</button>
<div id="cifra">
<h3>Epica - Cry For The Moon</h3>
<pre><b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>A7</b>
Forever and ever!
<b>Dm/A</b> <b>Bb/F</b>
Indoctrinated minds so very often
<b>Dm/A</b>
Contain sick thoughts
<b>Bb/F</b> <b>C/G</b> <b>Dm/A</b>
And commit most of the evil they preach against
Instrumental: <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>E5</b> (2x)
<b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>D#5</b> <b>C5</b>
<b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>B5</b> <b>F5</b> <b>E5</b>
<b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>E5</b>
<b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>D5</b> <b>F5</b> <b>G5</b> <b>A7</b>
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Don't try to convince me
<b>D5</b>
With messages from God
<b>D#5</b> <b>D5</b> <b>D5</b> <b>D#5</b>
You accuse us of sins
<b>C/G</b>
Committed by yourselves
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
It's easy to condemn
<b>D5</b> <b>D#5</b> <b>D5</b>
Without looking in the mirror
<b>D5</b> <b>D#5</b> <b>C/G</b> <b>Bb/F</b> <b>A7</b>
Behind the scenes (Behind the scenes opens... reality)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget
<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Virginity has been stolen
<b>D5</b> <b>D#5</b>
At very young ages
<b>D5</b> <b>D5</b> <b>D#5</b>
And the extinguisher
<b>C/G</b>
Loses it's immunity
<b>D5</b> <b>D5</b> <b>D#5</b> <b>D5</b>
Morbid abuse of
<b>D5</b> <b>D#5</b> <b>D5</b>
Power in the Garden of Eden
<b>D5</b> <b>D#5</b> <b>C/G</b> <b>Bb/F</b> <b>A7</b>
Where the apple (Where the apple gets a youthful face, a youthful face!)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget
<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b> <b>F</b> <b>Gm</b> <b>A7</b>
Behind a fairytale forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b> <b>F</b> <b>Gm</b>
The soul of this sick bulwark forever and ever
<b>A7</b>
Forever and ever!
(Instrumental)
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b> <b>Bb/F</b> <b>A7</b> <b>Bb/F</b> <b>A7</b> <b>Em</b>
Forgiveness is not for sale Nor is the will to forget
<b>Em</b> <b>C</b> <b>B7</b> <b>C</b> <b>B7</b>
You can't go on hiding yourself Behind
<b>Em</b> <b>C</b>
Old fashioned fairytales
<b>B7</b> <b>C</b> <b>B7</b> <b>Em</b>
And keep washing your hands in innocence</pre>
</div>
<div id="cifra2">
<h3>Epica - Storm The Sorrow</h3>
<pre>Intro 2x: <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
<b>Bm</b> <b>G</b> <b>Bm</b>
Along the way I find myself
<b>D</b> <b>D/C#</b>
To be confined within me
<b>Bm</b> <b>G</b> <b>D</b> <b>Em</b> <b>C</b>
No place for any other's mind to interfere,
<b>Bm</b>
To grasp the meaning of it all
<b>D</b> <b>D/C#</b>
To overcome my limits
<b>Bm</b> <b>D</b> <b>Em</b> <b>F#</b>
And dance away from any void and empty tones,
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Just tell me why
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Just tell me how I can survive this time
<b>Bm</b> <b>G</b> <b>Bm</b>
Believe yourself and look away
<b>D</b> <b>D/C#</b>
From all that's right within you
<b>Bm</b> <b>G</b> <b>D</b> <b>Em</b> <b>C</b>
Leave all your worries at the door and drift away,
<b>Bm</b> <b>G</b> <b>Bm</b>
I've tried to peer into the core
<b>D</b> <b>D/C#</b>
But could not storm the sorrow
<b>Bm</b> <b>D</b> <b>Em</b> <b>F#</b>
My hollow heart has bled me dry, left me to stray
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Another time without a trace,
<b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Condemn me now
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Send me to hell For I'm already failing
(refrão I)
<b>Em</b>
Intertwine the lines
<b>Bm</b>
That swim beneath the dark
<b>D</b>
Realize the pain we live in
<b>A</b>
Demonize the need we reel in, no
<b>Em</b> <b>Bm</b>
In my memories I'll dig deep enough to know
<b>D</b>
Centuries of dreams unending
<b>A</b> <b>Bm</b>
Another me that yielded tears when someone had betrayed
<b>Bm</b> (<b>G</b>) <b>Bm</b>
No time should ever go to waste
<b>D</b> <b>D/C#</b>
It's not that complicated
<b>Bm</b> <b>G</b> <b>D</b>
You're free to live your life at ease
<b>Em</b> <b>C</b>
No more restraints
<b>Bm</b> (<b>G</b>) <b>Bm</b>
No heed for shadows on your way
<b>D</b> <b>D/C#</b>
That try to steal your laughter
<b>Bm</b> <b>D</b> <b>Em</b>
Your light will drive them all away
<b>F#</b>
Be confident
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will I refrain?
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Can I repent?
<b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will you be there?
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Erase the page For I'm alone and ailing
(volta para refrão I)
<b>C</b>
<b>Bm</b> <b>C</b>
So, this is my life and it can't break me down
<b>Bm</b> <b>C</b>
Go, I will decide who can come in and heal my disease
<b>Bm</b>
Burn it in flames
<b>Bm</b>
Kill it and maim
<b>C</b>
Why can't you see that you need to be freed?
(refrão II - piano)
<b>Em</b> <b>Bm</b>
Intertwine the lines beneath the dark
<b>D</b>
Every bit of pain we're feeling
<b>A</b>
Every other solemn life, no
<b>Em</b> <b>Bm</b>
In the memories you will find somehow
<b>D</b>
There used to be a dream unending
<b>A</b>
No more need to be alone
(refrão III - sobe 1 tom)
<b>F#m</b>
Intertwine the lines
<b>C#m</b>
That swim beneath the dark
<b>E</b>
Realize the pain we live in
<b>B</b>
Demonize the need we reel in, no
<b>F#m</b> <b>C#m</b>
In my memories I'll dig deep enough to know
<b>E</b>
Centuries of dreams unending
<b>B</b> <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Another me that yielded tears when someone had betrayed
<b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Someone had betrayed
(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b></pre>
</div>
Dica do Dia: Apesar de, às vezes, o jQuery parecer bem mais fácil e mais cômodo, utilize sempre o VanillaJS, ou o JavaScript Puro. Com isso você vai realmente aprender a programar na linguagem e não vai ficar "refém" de uma biblioteca.