how to scrolling image change html

Question

Rupesh Kahane · Answer

Yes you can do this. Apply some logic or take help from UI designer.

SELVAM P · Answer

fixed navbar how to change header logo in scrolling the page, there are two logo used in the navbar

Rupesh Kahane · Answer

Refer below links. These are working fine. 1) http://techstream.org/Web-Development/Javascript/Change-Page-Background-on-Scroll 2) https://www.w3schools.com/howto/howto_css_parallax.asp 3) http://prinzhorn.github.io/skrollr/ Smaple Code => html > head > script > function f() { t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg" t1.height = "319" t1.width = "330" } function f2() { t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG" t1.height = "319" t1.width = "330" } function f3() { t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg" t1.height = "244" t1.width = "330" } function f4() { t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg" t1.height = "244" t1.width = "350" } function f5() { t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" t1.height = "319" t1.width = "350" } script > head > body > div align = "center" style = "position: fixed; z-index: 20; left:38.5%; top:200" > img src = "no.png" height = "319" width = "330" name = "t1" > div > div > div class = "container" onmouseover = "f3()" style = "padding:0; margin:0; width:100%;" > img src = "https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width = "100%" > div > br > br > div class = "container" onmouseover = "f4()" style = "padding:0; margin:0; width:100%;" > img src = "https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width = "100%" > div > br > br > div class = "container" onmouseover = "f5()" style = "padding:0; margin:0; width:100%;" > img src = "https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width = "100%" > div > br > br > div class = "container" onmouseover = "f()" style = "padding:0; margin:0; width:100%;" > div > body > html > Note: Just do some changes according to your requirements.

how to scrolling image change html

Answers (3)