Simple scrolling text effect let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px webkit text stroke 1px black webkit text fill color transparent window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px webkit text stroke 1px black webkit text fill color transparent background clip text webkit background clip text webkit text fill color transparent window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image url https notebook xbdev net var images pieces jpg console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background Take it a bit further scroll the background image as well let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px background image url https notebook xbdev net var images pieces jpg div webkit text stroke 1px black background clip text webkit background clip text webkit text fill color transparent filter blur 10px backdrop filter blur 5px window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image none console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background Take it a bit further scroll the background image as well let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px background image url https notebook xbdev net var images pieces jpg div webkit text stroke 1px black background clip text webkit background clip text webkit text fill color transparent filter blur 5px window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image none console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background Take it a bit further scroll the background image as well let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px background image url https notebook xbdev net var images pieces jpg div webkit text stroke 0px black background clip text webkit background clip text webkit text fill color rgba 0 0 0 0 3 filter blur 2px filter drop shadow 16px 16px 20px blue window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image none console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready
d let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background Take it a bit further scroll the background image as well let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px background image url https notebook xbdev net var images pieces jpg div webkit text stroke 1px black background clip text webkit background clip text webkit text fill color transparent filter blur 5px window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image none console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready Simple scrolling text effect with image in the background Take it a bit further scroll the background image as well let style document createElement style document body appendChild style style type text css style innerHTML border 0 pading 0 margin 0 height 500px background image url https notebook xbdev net var images pieces jpg div webkit text stroke 0px black background clip text webkit background clip text webkit text fill color rgba 0 0 0 0 3 filter blur 2px filter drop shadow 16px 16px 20px blue window onload function let div document createElement div div id txt div style position absolute div style left 0px div style line height calc 500px 0 975 div style font size calc 500px 1 43 div style height calc 500px 1 2 div style border 1px solid grey div innerHTML NOTEBOOK XBDEV NET document body appendChild div div style background image none console log clientWidth div clientWidth end onload let left 0 setInterval function let div document getElementById txt if div undefined return div style left left px left left 1 make the background image move in the opposite direction at a different speed div style background position left 1 0 px 0 if left 8050 left 0 10 console log ready