A Side-Scrolling Header For Contempo...
May
7
2019
I wanted an animated background in my header, but, I didn't necessarily want a movie playing in the header. While, I think it might be possible, with some sophisticated engineering, to place a YouTube video in the header, I didn't really want something as over-the-top as a YouTube video. Instead, I decided to focus my efforts on using CSS animation techniques to make a background that scrolls sideways.
The first step is to pick a header image that is fairly wide and can repeat without showing a hard line. Using Theme > Customize > Background, I uploaded an image, set the alignment to tile and checked the box for scroll with page. When uploading background images, Blogger recommends an image be no wider than 1800 pixels and limits the file size to less than 300Kb. The height of the image should be at least, if not larger than, the height specified using: Theme > Customize > Advanced > Backgrounds > Background Height. So, if the background height is 480, then, the background image should have a height of at least 480.
By the way, the source image in this example is 3000x500, but, once uploaded, Google restricts the maximum width to 2000. So, the restricted size image ends up with dimensions of 2000x333. Since the Contempo template, stretches the background image to fit the header height, given the current configuration of this site, the dimensions actually end up at about 2880x480. But, because the source image was resized as a result of the upload process, the resulting stretched image is going to be a bit fuzzy. With the background in this example, that's not really an issue, but, for an image with more detail, the fuzziness might be more noticeable.
Once the image is uploaded, the next step is to add the animation. For my site, I wanted the animation to be delayed for 30 seconds and when it does start, I wanted the animation to start slowly and build up to speed, stop and then reverse. After many trips to W3Schools CSS Animation, I came up with the following CSS:
For fans of animation, the secondary image layer could be used with a single very wide image, instead of nine smaller images, to simulate the effect of multi-plane animation. For those who are interested, the primary background layer is at z-index 2 and the blog content is at z-index 20, so, with a lot more JavaScript and CSS, up to seventeen layers of animation (z-indexes 3 to 19) could be scrolling in the blog header. I'm not sure how many layers of animation it would take to bring a browser to its knees, but, the potential is certainly there. Have fun.
To add CSS code, use Theme > Customize > Advanced > Add CSS. To add JavaScript, use Layout > Add A Gadget > HTML/JavaScript. Copy and paste the JavaScript code into the space provided. Be sure to check the box for Show HTML/JavaScript. Select Save. If you drag and drop the new gadget to a different location on your layout, make sure to select Save Arrangement.
That's all I have for today. Enjoy.
The first step is to pick a header image that is fairly wide and can repeat without showing a hard line. Using Theme > Customize > Background, I uploaded an image, set the alignment to tile and checked the box for scroll with page. When uploading background images, Blogger recommends an image be no wider than 1800 pixels and limits the file size to less than 300Kb. The height of the image should be at least, if not larger than, the height specified using: Theme > Customize > Advanced > Backgrounds > Background Height. So, if the background height is 480, then, the background image should have a height of at least 480.
By the way, the source image in this example is 3000x500, but, once uploaded, Google restricts the maximum width to 2000. So, the restricted size image ends up with dimensions of 2000x333. Since the Contempo template, stretches the background image to fit the header height, given the current configuration of this site, the dimensions actually end up at about 2880x480. But, because the source image was resized as a result of the upload process, the resulting stretched image is going to be a bit fuzzy. With the background in this example, that's not really an issue, but, for an image with more detail, the fuzziness might be more noticeable.
Once the image is uploaded, the next step is to add the animation. For my site, I wanted the animation to be delayed for 30 seconds and when it does start, I wanted the animation to start slowly and build up to speed, stop and then reverse. After many trips to W3Schools CSS Animation, I came up with the following CSS:
Forward-Reverse Scrolling
In the CSS above, the image will scroll slowly to the left, stop, then scroll back to the starting position and the animation will repeat every 300 seconds. Also, please note, the animation is disabled for small screens with a width lest than 750 pixels. So, in this example if the image width is 3000 pixels then the background position needs to start at 3000. Depending on the width of your image, you might need to adjust the starting background-position (i.e.: 3000). If a starting point larger than the width of the image is selected (i.e.: 4000 or 5000), the image will move to the left for a longer period of time before reversing direction.@media only screen and (min-width: 750px) { @keyframes background_shift { from {background-position: 3000px 0px;} to {background-position: 0px 0px;} } .bg-photo { animation-timing-function: ease-in-out; animation-direction: alternate-reverse; animation-name: background_shift; animation-iteration-count: infinite; animation-duration: 300s; animation-delay: 30s; }}
Continuous Scrolling
For a continuously scrolling background to the right, I came up with the following CSS:
@media only screen and (min-width: 750px) {
@keyframes background_shift {
from {background-position: 3000px 0px;}
to {background-position: 0px 0px;}
}
.bg-photo {
animation-timing-function: linear;
animation-direction: normal;
animation-name: background_shift;
animation-iteration-count: infinite;
animation-duration: 300s;
animation-delay: 30s;
width:3000px;
}}
When setting up a continuously scrolling background, the width of the background and the endpoint for the animation needs to be the same width as the image. So, in this example if the image width is 3000 pixels then the background position and the width of bg-photo would need to also be 3000. For a continuous scroll to the left, simply, reverse the from and to background position values (i.e.: from {background-position: 0px 0px;} and to {background-position: 3000px 0px;}.Color Shifting
For an extra bit of pizzazz, I added a color shifting animation which appears as a light tint of the side-scrolling animation using the following CSS:
@keyframes bg-colorshift {
0% {background-color: purple;}
30% {background-color: black;}
60% {background-color: blue;}
80% {background-color: black;}
100% {background-color: purple;}
}
.bg-photo-overlay {
background-color: purple;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
opacity:0.25;
filter:alpha(opacity=25);
background-repeat:no-repeat;
background-image:none;
animation-name: bg-colorshift;
animation-duration: 30s;
animation-iteration-count: infinite;
border-bottom:2px solid black;
}
As part of the design of the Contempo template, there is a color filter that sits over the header that is used to apply color tinting to your header images. The CSS above adds a small shadow line at the bottom of the header and runs through a series of different colors over the course of the animation's duration, which in this case is 30 seconds. The first color of the animation and the initial color of the overlay should be the same. The level of tint in the example above is set to 25%. For a more aggressive tint, increase the opacity to 50% or 75%.Secondary Image Layer
After I got the animation working the way I wanted, I decided to complicate matters by adding a second layer of animation. I used the following JavaScript to add the images and create a second background layer:
<script type="text/javascript">
var d=document;
var secondheadercontent='';
var divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=="bg-photo-container") {
secondheadercontent+='<img src="YourImage1_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage2_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage3_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage4_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage5_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage6_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage7_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage8_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent+='<img src="YourImage9_GoesHere.jpg" width="200" height="200" alt="" />';
secondheadercontent='<div class="second-photo-container">'+secondheadercontent+'</div>';
var bgContent=new String(divs[i].innerHTML);
divs[i].innerHTML=secondheadercontent+bgContent;
break;
}//if bg-photo-container
}//for i
</script>
Then, I used the following CSS to animate the second background layer:
.second-photo-container {
width:4000px;
height: 300px;
z-index: 5;
position:absolute;
top: 30px;
left:0px;
overflow: hidden;
}
@media only screen and (min-width: 750px) {
@keyframes second_bg_shift {
from {left: -2000px;}
to {left: 0px;}
}
.second-photo-container {
animation-timing-function: ease-in-out;
animation-direction: alternate-reverse;
animation-name: second_bg_shift;
animation-iteration-count: infinite;
animation-duration: 300s;
animation-delay: 10s;
}}
.second-photo-container img {
float: left;
margin: 50px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
The CSS code above, first specifies the size of the second background layer as 4000 by 300 and places the layer at its starting position using absolute positioning. Again, for small screens with a width less than 750 pixels, the animation is disabled. For the images in the second background layer, I applied rounded corners and a small rotation of 5 degrees. To ensure that the images are all lined up in a row, I use float:left. Also, the size of the second background layer needs to be more than wide enough to hold all of the images (i.e.: 4000 and half that value for the from background position of 2000) or the excess images will either be cut off or not show at all. Like the first animation layer, the second animation layer moves to the left and then to the right, but, the delays are different. This results in the two layers becoming out of sync with each other and moving in opposite directions for part of their running times.For fans of animation, the secondary image layer could be used with a single very wide image, instead of nine smaller images, to simulate the effect of multi-plane animation. For those who are interested, the primary background layer is at z-index 2 and the blog content is at z-index 20, so, with a lot more JavaScript and CSS, up to seventeen layers of animation (z-indexes 3 to 19) could be scrolling in the blog header. I'm not sure how many layers of animation it would take to bring a browser to its knees, but, the potential is certainly there. Have fun.
To add CSS code, use Theme > Customize > Advanced > Add CSS. To add JavaScript, use Layout > Add A Gadget > HTML/JavaScript. Copy and paste the JavaScript code into the space provided. Be sure to check the box for Show HTML/JavaScript. Select Save. If you drag and drop the new gadget to a different location on your layout, make sure to select Save Arrangement.
That's all I have for today. Enjoy.
