Hello everybody!
Is it possible in Blocs
to create a page with automatically changing background images
with overlaid text?
See here the example:
http://www.isabella-wolf.com/rollen/
Many Thanks!
Thomas
1 Like
Actually, I want this to be doable with Blocs App haha… me… still no idea how… haha
Thomas, I’d say the example is really annoying.
Think twice about doing it - in the example I think it was a big mistake to do it. On some of the pages with some of the images it looks ridiculous and it’s really distracting for the content.
Don’t get me wrong, with specific images and layouts, the changing background can work, but changing the background and not having space to properly present the main subject well, obscuring it with other content, is a very bad use of the technique.
Sometimes TV programs present information panels over video. When that happens the main subject is always presented offset to one side with the information panel on the other side. You don’t obscure the main subject. Unless the main subject is Isabella Wolf, it seems.
How much better would the examples I grabbed have looked if the web developer had taken the time to stack the videos vertically at the side instead or horizontally. A similar technique could also have been used for the images (they are just too small anyway).
I really hate this gimmick on the site. The designer should have used stills and arranged overlayed content to suit the background.
I should think it’s done with a javascript timer changing the background image for the page.
3 Likes
Dear Pauland,
thanks for the design-technical explanation …
I would agree with you personally, but it is a wish of a friend of mine who would like to have his side in this style.
I am in Blocs no professional, rather the contrary … so therefore my question.
A “javascript timer” is possibly the solution - Thanks.
Now, of course, the next questions:
a) Where to find the Java code
b) How to set it correctly in Blocs.
Thanks a lot
Thomas 
A quick search took me here: Simple jQuery Background Image Slideshow with Fade Transitions - Background Cycle | Free jQuery Plugins
This is the kind of thing you need.
I think this is as far as I really want to go to help you commit a “design crime”. If I had more time I’d build an example.
In cases like this I normally explain to my clients why it’s a very bad idea.
@pauland,
Thanks … now I had to laugh!
I will share your view on it without any extenuation …
and try to work with your tip.
Many Thanks
Thomas
This is just my opinion. I think it’s as important to consider why a technique is being used and what advantage it may have. Properly done the technique can be good. I have never used it (sorry mackyangeles).
If you look at my screengrabs, I don’t see how that is a good end-effect to swap images and get that result. I wouldn’t use static stills to get that result, so why use an image rotator?
1 Like
@pauland
I’ve already understood your thoughts with your uploaded screenshots …
but what you want to say, it’s not your own site.
Thx again
Thomas
I’m planning to do a Hero Bloc with Slideshow as background, haha get the idea… Let me know if you know how to implement it. Great trick
1 Like
I too would like to be able to do this directly in Blocs and can think of a few situations in which the effect can work well. I have created the following page using EverWeb + third party widgets:
http://www.turnbullgroup.co.uk
So far, the closest I have been able to get using Blocs is to use a carousel with the counters hidden and the arrows removed using a code found elsewhere in the Blocs Forum and added to the page preferences. The added problem with this approach is that images will not automatically transition.
Exactly this way I also tried.
My next problems were:
I could not put a global menu over it
and in the tablet and mobile view I got the background images not full screen.
Perhaps a genius Blocs user has mercy and shows us bunglers a step by step manual
… if at the moment it is possible in Blocs at all.
Thx a lot
I am thinking about finding a solution for that. (using only Blocs, of course)
I want to understand what exactly do you want to archive.
Is this something similar to what you what?
2 Likes
How did you do it? WAH!!!
1 Like
I’ve just added the navigation bloc above fullscreen carousel, and used negative margin custom class to hide this nav bloc behind carousel.
I didn’t do any testing or anything, but I would assume that you would have to create a separate navigation for tablet and mobile modes to make this solution work perfectly.
@Eldar
Wow - Great - and Thx!
Exactly what I (we) wanted.
If I have more time, I will try to implement it immediately.
A step by step video would be great, of course -
especially for the tablet and mobile view.
And … do not forget, to pack this into your upcoming video-course.
Many Thanks! 
Thomas
What am I doing wrong?
If I move the nav-bloc behind the carousel per minus-margin,
I see the menu no longer.
Thank you for an answer.
Is it visible when previewing in browser?
Before I write a lot,
I try to show you my way by video.
Many Thanks!
Sorry, dropbox link does not seem to work.
So I place the link in brackets, so that the link is not embedded here.
( Dropbox - My attempt.mov - Simplify your life )
1 Like
I do the same except I set the image, and preview the project in external browser (not inside the app)