Moving picture header

Developer
Jaflo
Size
2,984 Kb
Views
32,384
  1. Moving picture header Previews
  2. Moving picture header HTML Codes
  3. Moving picture header CSS Codes
  4. Moving picture header JS Codes

How do I make an moving picture header?

A demo showing a moving picture header, could be used as header. What is a moving picture header? How do you make a moving picture header? This script and codes were developed by Jaflo on 12 September 2022, Monday.

Moving picture header Previews
IQ Test

Moving picture header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moving picture header</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #wrap { position: absolute; top: 0; left: 0; width: 100%; height: 205px; margin: 0; padding: 0; overflow: hidden;
}
#header { position: absolute; top: 0; left: 0; width: 100%; height: 200px; margin: 0; padding: 0; animation: move 20s infinite linear;
}
@keyframes move { from { left: 0; } to { left: -2450px; }
}
#header > div { width: 600px; height: 200px; margin: 0; padding: 0; border-right: 2px solid black; background-position: center; background-size: 600px auto; display: block; position: absolute; border-bottom: 5px solid black;
}
#header > div.one { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rho_Ophiuchi.jpg/611px-Rho_Ophiuchi.jpg); margin-left: 0;
}
#header > div.two { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Dawn_at_swifts_creek_panorama.jpg/1280px-Dawn_at_swifts_creek_panorama.jpg); margin-left: 602px;
}
#header > div.three { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Mist_-_Ensay_region3.jpg/1024px-Mist_-_Ensay_region3.jpg); margin-left: 1204px;
}
#header > div.four { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg/1280px-Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg); margin-left: 1806px;
}
#header > div.five { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Mt_hotham_alpine_range_scenery.jpg/1024px-Mt_hotham_alpine_range_scenery.jpg); margin-left: 2408px;
}
#header > div.six { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Sydney_Harbour_Bridge_night.jpg/1024px-Sydney_Harbour_Bridge_night.jpg); margin-left: 3010px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="wrap"><div id="header"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Moving picture header - Script Codes CSS Codes

#wrap { position: absolute; top: 0; left: 0; width: 100%; height: 205px; margin: 0; padding: 0; overflow: hidden;
}
#header { position: absolute; top: 0; left: 0; width: 100%; height: 200px; margin: 0; padding: 0; animation: move 20s infinite linear;
}
@keyframes move { from { left: 0; } to { left: -2450px; }
}
#header > div { width: 600px; height: 200px; margin: 0; padding: 0; border-right: 2px solid black; background-position: center; background-size: 600px auto; display: block; position: absolute; border-bottom: 5px solid black;
}
#header > div.one { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rho_Ophiuchi.jpg/611px-Rho_Ophiuchi.jpg); margin-left: 0;
}
#header > div.two { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Dawn_at_swifts_creek_panorama.jpg/1280px-Dawn_at_swifts_creek_panorama.jpg); margin-left: 602px;
}
#header > div.three { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Mist_-_Ensay_region3.jpg/1024px-Mist_-_Ensay_region3.jpg); margin-left: 1204px;
}
#header > div.four { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg/1280px-Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg); margin-left: 1806px;
}
#header > div.five { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Mt_hotham_alpine_range_scenery.jpg/1024px-Mt_hotham_alpine_range_scenery.jpg); margin-left: 2408px;
}
#header > div.six { background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Sydney_Harbour_Bridge_night.jpg/1024px-Sydney_Harbour_Bridge_night.jpg); margin-left: 3010px;
}

Moving picture header - Script Codes JS Codes

/*
Maybe someone can help with the jumping back?
Pictures from wikipedia commons:
http://commons.wikimedia.org/wiki/File:Dawn_at_swifts_creek_panorama.jpg
http://commons.wikimedia.org/wiki/File:Mist_-_Ensay_region3.jpg
http://commons.wikimedia.org/wiki/File:Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg
http://commons.wikimedia.org/wiki/File:Mt_hotham_alpine_range_scenery.jpg
http://commons.wikimedia.org/wiki/File:Sydney_Harbour_Bridge_night.jpg
*/
Moving picture header - Script Codes
Moving picture header - Script Codes
Home Page Home
Developer Jaflo
Username jaflo
Uploaded September 12, 2022
Rating 3
Size 2,984 Kb
Views 32,384
Do you need developer help for Moving picture header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jaflo (jaflo) Script Codes
Name
SimpleGroove bookmarklet
Wobble menu change animation
A note
A Pen by jaflo
Styled calendar
Shopping cart
Scroll bar manipulation
Cloud upload
Random symbols
Share button for images
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!