How do we achieve this Background Slide show effect?

HTML & CSS
1

Hello,

We would like to achieve a Background Slide show effect as you can see for example here:

http://www.capstone-technologies.com/router/

So the Key things we need are:

1- The background image with Text on it slides to the left on a timed fashion, lets say every 10 Seconds
2- The background image with Text on it slides to the left with a click on an (Arrow) button on the right of the slide

Can you kindly provide the Code to implement this effect?
And No JQuery. Javascrpt and CSS only Please.

Regards,
Dean @ Anoox.com

2

Can you show us any code you might have from your attempt at doing this and we could probably help you with any issues you had?

Otherwise, have you considered hiring someone to do it? We like to help but I don’t think people here would do all the work for free.

2 Likes
3

Also, it’s not that there’s a lack of free solutions on the web… :-)

2 Likes
4

Well then can you point me to ONE such “Free Solution”.
And so then I can smile at this as you have :slight_smile:
Because I searched for this and find NO such “Free Solution”! Or did I miss it, in case I look forward to seeing such URLs from you.

5

WM,

Well I can create the Full Screen background image with Text on it. No problem.
What I need the JS/CSS Code is the gradual Slide show slide to the left effect, upon click on a related button.
And JS code that does this Slide Auto every X seconds.

Regards,

6

Can I ask why you do not want to use JQuery? All it is, is a JavaScript library and there are many JQuery plugins out there that are very close to what you want to accomplish.

7

This CSS example…

bg-image swop.zip (197.1 KB)

…is 95% successful. :sunglasses:

coothead

8

Literally dozens! Although you might find solutions utilising jQuery easier to adapt (and possibly more versatile). A quick search spits out this list of 100 (!) free jQuery image slider plugins. jQuery allows developers to concentrate on the functionality at a higher level, thus you might find plugins with a more elaborate functionality and API.

That said, I can understand the reluctance to use jQuery… so feel free to write your own non-jQuery solution, or use one of those pure JS/CSS solutions. If you get stuck with the implementation we’d happily help you out! ;-)

9

Hi,
We have our reasons not to want to use JQuery.
Basically we do not like loading JQuery Library files and find pure JS solution easier to maintain.

10

Hi there WorldNews,

I always find it reassuring to find another soul for whom
Sledgehammer coding is anathema. :flushed:

Check out the attachment, the background fading in and
out is CSS and the JavaScript for the buttons is just 1KB.

World-News.zip (197.6 KB)

coothead

11

Was one of these supposed to be fader0?

@keyframes fader1 {
    0%  {opacity:0;}
    25%  {opacity:0;}
    35%  {opacity:1;}
    65%  {opacity:1;}
    75%  {opacity:0;}
    100% {opacity:0;}
 }
@keyframes fader1 {
    0%  {opacity:1;}
    25%  {opacity:1;}
    35%  {opacity:0;}
    65%  {opacity:0;}
    75%  {opacity:1;}
    100% {opacity:1;}
 }
1 Like
12

Hi there Paul,

thanks for proof reading my CSS. :ok_hand:

I keep getting my “mucking fords in a wuddle”. :mask:

The animation did not seem as smooth as expected
but I failed to follow it up with a code check.

I should have typed “fader1 and fader2”.

My post has now been edited, thanks again for coming
to my rescue.

coothead

1 Like
13

Hi,

Do you have this on a Web page so that we can see it at work without downloading a ZIP file.
As our security does not like downloading ZIP files.

Much thanks.

So hopefully you do have the pure CSS & JS Code for this purpose.

14

Here you go…

http://coothead.co.uk/worldnews/

coothead

2 Likes
15

No worries. Nice demo :slight_smile:

16

coothead, thanks for this online Demo.
But these images (Slides) are not Sliding slowly in from Left to Right, which is what we need. But instead poping in=, upon click on the Arrows!

Thanks.

17

There are a lot of possible choices for you to experiment with. You should be able to study coothead’s example and come up with what you’re wanting.

4 Likes
18

Well I was hoping I Can grab some code already out there to create the Slide Show effects that we want.
But, it seems like Lots of Studying about this is what I need to do.
Thanks.

19

Hey Guys,

I have looked through all your provided links, and cannot find still one Good Sliding page effect that is in CSS & JavaScript only. So I though to ask again. Can any of you provide the Code or ref to the page that provides the Code or knowhow to do a Sliding page effect as it is here for example:

http://www.ppblawyers.com/index.php

So the KEY effects we need as per above example are:

1- Image takes the entire full screen
2- Image is moving with the Text (HTML) on top of the Text.
3- The image+HTML on it, the DIV, is sliding on Timer basis as well as Click

Much thanks.

Dean

20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.