July 25, 2014

Weebly Tricks #63 - Full Page Image Slideshow Background

Posted by Domz at 7/25/2014

Image slideshow Background for Weebly


Finally, I was able to succeed applying a full page slideshow background to our Weebly Template based on the original code made by Mary Lou of codrops. At this point, we will learn new topics regarding image optimization and positioning. This slideshow background is applicable to normal pages so with splash and store. I offer free support and installation for my FeedBuner subscribers.




INTRODUCTION

It requires 6 HD images with sizes around 1020x768 and you need to optimize them first. Image Optimization greatly reduces the file size while maintaining its quality. This is important to keep your page loading fast even a full image background is applied. You can do this online for free and you don't have to download any software. Here are the steps:

1. Prepare your High Quality images.

2. Go to jpeg-optimizer.com.

3. There will be a simple panel for your photo. Upload your photo, keep the compression level to default and edit your preferred output width (1020 is ok). Click “Optimize Photo”.

4. The output will be automatically proportionalized. It will show you a comparison between the original image properties and the optimized image.

5. Simply right click on the output photo and choose "save image as".

Your image is now optimized and ready to use. You can upload and host your own images, just read Managing Files in Editing Weebly CSS/HTML.

Back to the slideshow, the CSS has a “fixed” position and will stretch to our viewport. The images has also a property of “background-size:cover” which means your screen will be 100% covered. With these settings, we need to configure some HTML on our Weebly template. Some elements should be positioned relatively while some need to be hidden. These adjustments depends on the theme you are using. Now let's proceed to the tutorial.


HEADER CODE
Where to place these codes? Click Here!


<style>
.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url() repeat top left;
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(http://mwtdatabase.weebly.com/files/theme/bss6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}
</style>
<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
    </li>
    <li>
        <span>Image 02</span>
     
    </li>
    <li>
        <span>Image 03</span>
     
    </li>
<li>
        <span>Image 04</span>
     
    </li>
<li>
        <span>Image 05</span>
     
    </li>
<li>
        <span>Image 06</span>
     
    </li>
</ul>

<style>
#header-container{
visibility:hidden;}
.no-header-page #banner-wrap {
display:none;
}
.myfooter{
background: none !important
}
.myfooter, #nav-wrap-inner, #main-wrap .container {
position: relative;
}
</style>

Notes:
Green text – These are your image source link.
The last part is the settings for your Weebly site. This differs from template and themes. You don’t have to insert anything into your site’s body.


CONCLUSION






The code is pretty simple yet can only be accomplished if properly placed on our template. As a young CSS learner, I used trial and error for this tutorial with few researches of course. Before I forgot, the images are also responsive, try it by resizing your browser. This Slideshow Background is usually used for landing pages. I will be glad to help you insert it on your site. More features and details on the code source found at the demo page.

Isn't this useful for you? Let me know!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

7 comments:

  1. Hi,

    I've used this code to create a splash page slideshow and it's worked great. However, the main (default) background image which I chose as part of the splash design in Weebly (which is also the first image in the slideshow), appears for a split second during each transition between images. Do you know how I could fix that?

    Thank you

    ReplyDelete
    Replies
    1. Hi Drzej,

      Please post this on the forum so with your site address. On that way, I could check your site and lend you more detail.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Sorry Drzej,

      I cannot help you if you wont post it in the forum.

      Delete
  3. Do you know if this code could work for Weebly's latest templates with background images used as the widescreen header images? For example the widescreen image on their landing pages? Example: http://cuisineweebly.weebly.com/. It is very frustrating Weebly does not offer slideshow options for all their latest templates. Thanks!!

    ReplyDelete
  4. I would also like some help with my website if you have a chance.

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top