Simple effect, slicing a texture into multiple rows, and rotating each individually

Here is something that I thought would be easier for me to manage, but it’s proving to be a challenge for me (mainly because of a lack of understanding of the math behind it). I am trying to separate a texture into multiple diagonal rows and have each row move forward or backwards at different rates. A similar effect is this:

varying vec4 vertTexCoord;
uniform sampler2D texture;
uniform float time;      
uniform vec2 pixels;     
uniform float rollRate;   
uniform float rollAmount;  

void main(void) {
  	vec2 p =;
	p.x -= mod(p.x, 1.0 / pixels.x);  
	p.y -= mod(p.y, 1.0 / pixels.y);

	p.y = mod(p.y + rollAmount * sin(rollRate * time * p.x + p.x), 1.0);   
  	gl_FragColor = vec4(texture2D(texture, p).rgb, 1.0);                

This is close, but it is first reducing the number of pixels of the texture and then just modulating each individually. I want to keep the original texture intact within the slices. Does anyone know of how I might want to get this started? Or if you have any advice of what I should look into to make this easier in the future? For example, I understand modulus, but I have a hard time making sense of it particularly within glsl…

What exactly are you rendering? One big quad? Triangle?
Why exactly can you not “slice” the texture by rendering more triangles? You shouldnt even need any custom glsl code for that.