AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
- Background Sliderbackground Slider For Weebly Sections Templates
- Background Sliderbackground Slider For Weebly Sections Step By Step
Now you can use a slideshow as the background for sections, columns, and even inner-sections. This can help you build more complex structures and layouts, while still preserving a transition effect. As opposed to using a slider widget, which allows you to use specific layout and limited design options, the background slideshow feature gives. Background Slider. Background slider for Weebly sections. Force columns inline. Element package for Weebly. Smooth animations on scroll.
Weebly offers a traditional image slideshow element to add sliders to your site. Unfortunately, this is nowhere nearer to modern slideshows offered by third party providers or plugins. You can create beautiful looking custom accordion style sliders made purely with CSS.
Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn’t just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the “old” screen and revealing more of the “new” screen those closer you have it to being in full view.
Let’s try and pull it off on the web.
The HTML
Like any slider, there are three main components:
- The container that holds everything into shape
- A sliding container that is as wide as all the slides in a row
- Each individual side container
We won’t bother too much with content inside the slide. I’ll just add the temperature to show each slide can indeed hold content on top.
The container might be a <section>, slides might be <article>. It really depends. I’ll let you make the semantic choices for your own needs.
The layout plan is like this:
The CSS
The “slider” (visual container) and the slides need to have explicity the same size. We’ll use pixels here but you could make it work with anything.
Floating those slides to the left isn’t going to make them line up in a row, because the parent element of the slides isn’t wide enough to let them do that. That’s one of the reasons we need the holder element. It will be 300% wide (Num. of slides × 100%) which will fit three slides exactly.
Each one of our slides has a unique ID. This is useful because, if we choose, we can create anchor links that link to those ID’s and the slider will “jump” to those slides. We’ll add JavaScript to do some actual “sliding”, but our slider will work even without that. ID’s make that possible, so let’s use them here to drop in some lovely background images.
With all this in place, our layout comes into shape:
The CSS (black fading)
Just as a small detail, the temperature set in white may be in danger of not being visible depending on the photo behind it. To ensure that it is, we can make the photo subtly fade to black toward the bottom. A pseudo element will do nicely.
A picture explanation is in order here:
The JavaScript (background sliding)
We’re going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn’t do the cool hide/reveal more effect we’re looking for. Based the amount scrolled (which we can measure in JavaScript), we’ll adjust the background-position. Alone, that would look something like this:
Background Sliderbackground Slider For Weebly Sections Templates
The “6” and “-100” in there are magic numbers. Not CSS magic numbers that are prone to frailty, but traditional magic numbers. Just some numbers that happen to make the effect work. A bummer, perhaps, but not that big of a deal. Design-y things are sometimes like that. Perhaps best to leave a comment in the code to that effect. These particular numbers are based on the images I used and their size and what looked good.
The effect here is the background shifting we’re after:
The JavaScript (imparting structure)
That little snippet of JavaScript looks lonely up there without any structure behind it. A slider is a great excuse to look at a simple way to structure JavaScript.
We can make everything slider-related one object.
Then we’ll group up the related elements into one area, bind our events together, and write little functions that do very specific things.
The HTML (adding navigation)
Adding swipe stuff would be super (super) sweet (hint). But for now let’s add little press-able links to change slides, rather than relying on the scrollbar. You might even remove the scrollbar in real life (straight up overflow: hidden; on the container). What we need is anchor links that link to the ID’s of the individual slides.
Style those as you will. For the demo, I make them little tiny gray circles with the text hidden.
Background Sliderbackground Slider For Weebly Sections Step By Step
The JavaScript (adding navigation)
Our structure is more useful now. We simply add a few more elements we’re dealing with, add a new event we’re watching for (clicks on nav), and write a little function to deal with that event.
We know how far to animate the scroll position when a nav link is clicked from the ID on the link itself. The link might be href=”#slide-1″, which we can get “1” from easily. Then the position we need to scroll to is (1 × width of slide), so 300 in our case. We’ll store that 300 value right in the JavaScript.
We have an “active” class on the nav links just to use in CSS to visually indicate which slide is active. We handle that by removing “active” from all links and then adding it back to the one that was clicked.
Demo!