Home ยป CSS Transitions on BBC Style Scroller
WordPress 3
TechnologyNovember 30, 2022

CSS Transitions on BBC Style Scroller

 

How to add CSS Transitions on BBC Style Scroller

Seems like ages since I did a blog post so I’m going to ease myself into it gently with a quick one about CSS and a slider.

So I am building a custom WordPress site at the moment on behalf of The Loft up in Glasgow for a financial services company. I won’t say who at the moment but I’ll come back and Add a link when it’s done. There is going to be an HTML5 animated splash page a bit like the Apple one that they did when they won the rights to sell the Beatles back catalogue on iTunes. It will also have a BBC style homepage slider that couples some aspects of the Goldman Sachs slider (but not the animation of individual components).

So on first look there are a few Stack overflow and Theme Forest threads from people asking about the BBC slider;

http://stackoverflow.com/questions/8821037/bbc-co-uk-style-jquery-slider
http://stackoverflow.com/questions/8384514/what-slider-does-the-bbc-use
http://themeforest.net/forums/thread/slider-like-on-wwwbbccouk/62386

It seems it use to be run using their own Glow JavaScript library but now runs on jQuery. The truth of the matter is that it doesn’t really matter which slider script you use – those answers are talking about Nivoslider, jCarousel, CarouFredsel, Touch Carousel….. None of them by default look or act exactly like the BBCs so you are going to have to do a bit of work.

I’ve used all of the ones in the previous paragraph (except the last one) but I went with my personal favourite, Flexslider 2. The reason? It is;

  • Extremely well written.
  • Can handle more than images, can animate lots of HTML blocks.
  • Can be set to scroll vertically if you want.
  • Lots of built in parameters
  • Touch wipeable
  • Responsive
  • Call-back functions

It’s the last one that’s most important. Once you have clicked the slide to transition it I wanted to be able to fire an event that updated the text on the hover state of the direction navigation that showed the name of the next/previous slide (like the Goldman Sachs example).

Here’s a tip that took me a while to figure out – you want to be able to see the previous and next sections behind the opaque white background so you have to remove the setting ‘overflow: hidden’ for the overflow on the flex-viewport. You do that by modifying the unminified JS. However, that only works for the first slide, thereafter they are hidden. Why? It’s the smoothheight parameter that’s doing it, Flexslider 2 allows you to include images which are all different heights and animates the height transition by setting the other slides visibility to false. In your onload flexslider() call set;

smoothHeight: false,

The second point of this blog post – CSS transitions. Flexslider, by default, uses a transition on the direction buttons. I am using text on those buttons and didn’t want that aspect of it to transition but I didn’t know how to affect transitions on specific multiple CSS properties (the default is ‘all’). There’s not much online about that unusually, and the W3Schools talks about a comma separated list but there’ no example. I was writing my list like width, colour, background .3s ease etc. This is wrong, thanks to Remi Breton in this SO answer;

http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties

It is;

    -webkit-transition:width .3s ease,color .3s ease;  
    -moz-transition:width .3s ease,color .3s ease;  
    -o-transition:width .3s ease,color .3s ease;  
    transition:width .3s ease,color .3s ease;

Of course the added benefit of that is that you don’t have to give them all the same easing or timings.

Now I’m onto the second phase, incorporating the slider into the WordPress backend. I’m as yet undecided whether to set up a custom post type for it (the trouble is there will be nothing in the main content pane – all custom meta, and I hate that) or go for a section in Options Tree for it. Here goes!!

Related posts