Results 1 to 8 of 8

Thread: Looking for a blur-slider

  1. #1
    Join Date
    May 2015
    Location
    Germany
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Looking for a blur-slider

    Dear friends of dynamicdrive,
    I'm a great fan of dynamicdrive, you have so much great codes and helps for web designers.

    Currently I'm looking for a blur-slider, such as here: www.notare-feist-kristic.de
    This are fine smooth transitions between the images. It is a fall-back to blurred images and are looking great for a decent noble design. But how they did it?
    Do you have an idea for a script? I find no way to copy and run well the script they have there on this site, although it is "only" jQuery. They are loading the images every new, but is this a good way?
    I'm not a coder but a designer ;-(

    Do you have an idea for this?

    Love and greetings from Germany
    Christoph Seher
    Last edited by jscheuer1; 10-21-2016 at 01:41 PM. Reason: format

  2. #2
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi

    Try http://wowslider.com/ you can download it and select pics and choice various option including "blur"

    rgds, Simon
    Last edited by jscheuer1; 10-21-2016 at 01:43 PM. Reason: illegal advice
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    That's actually just a fading slideshow. The only thing special about it is that the length of time you see each image is set separately as needed to give the blur effect. The blur is no trick of css or javascript though. Those are actual blurred images made in an image processing program. The fade slider slides to the blurred version of the current image (making it appear to get blurry), then quickly to the blurred version of the next image, then also quickly to the clear version of that next image making it appear to come into focus. Then it stays on that clear image for a longer time. Then the process repeats for the next image. The amount of time set for each transitional image varies as well as the amount of time allotted for each to fade in. Dynamic Drive has a fading slideshow which I modified awhile back to have this ability (varying display times and fade rates for slides). I'll see if I can locate it. If not, I can fairly easily recreate it. The basic slideshow is: http://www.dynamicdrive.com/dynamici...nslideshow.htm

    You might like it just as it is. But, as I say, it can be modified to have these varying times so that, if you make up the blurred versions of your images, you can get the same sort of effect you see in the page you linked to.

    I also think that using css3 one could get images to both fade and blur, but it wouldn't work in all browsers, only those that support the css3 filter property and its blur() function. But that might be a better approach because it would require less images and therefore less loading overhead.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2015
    Location
    Germany
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John for answer!

    Yes, the basic fade-in slideshow could be nice, I did consider it. I think currently the best way for browser-crossing is to make the blur images separatly in Photoshop or similar. If we would have the option to adjust the duration time of single images it would be the most simple way. If we have images 1, 2 and 3 and the blur versions 1-b to 3-b, we would need to set the times separately for 1 / 1-b / 2-b / 2 / 2-b / 3-b / 3 / ... This would give the nice blur effect. Maybe you can find the modified version?

    Greetings
    Christoph

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    That's exactly what I was thinking. The show you linked to had that same assortment of images. The script doesn't even need to be edited as I recall, it's initialization allows for tweaking that behavior.

    Why not setup your slideshow using the fadeslideshow script and your set of clear and blurred images? I should have the modification found or recreated by that time and it would be good to see what you have in order to help you fine tune it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    May 2015
    Location
    Germany
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Alright, thanks for help John!
    I did attempt to use this script, but something was wrong. Maybe I did delete too much from it, for I don't need this Wurfl scripts etc. I only need the slider. I'll try it again tomorrow. I thought, first I want to looking for at DD, maybe there is a good one. You have so much great scripts there. I think I also did donate earlier.
    Till tomorrow.
    Sorry for my english :-/

    Christoph

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,374
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I got this working (using images and blurred versions of them from css3, but it can also work with actual blurred images), either way you still need to have a working slideshow to add it to. Your English is probably better than my German (is it?). I'm not sure what you mean by Wurfl, I don't think that's a part of the fadeslideshow script. If Wurfl is something your host has and you cannot just put up a simple page, that might be a problem. I've seen cases like that before. But if you're just having trouble setting up a simple version of the slide show on a regular host, just do your best and make a link to it from here. I can tell you how to fix it.

    Demo:

    http://jscheuer1.com/garden/index_blur_timing.htm

    After experimenting, this appears to not blur (but degrades nicely) in IE, works OK in Chrome and Opera, great in Firefox. I'm sure it would go well in all browsers if we use actual blurred images instead of copies of the images blurred using css as in the above demo.

    Here's a demo using actual blurred images:

    http://jscheuer1.com/garden/index_bl...red_folder.htm
    Last edited by jscheuer1; 10-21-2016 at 11:17 PM. Reason: add results of experiments
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2015
    Location
    Germany
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you John, it's great!
    I can use both of it, I think the code with the real blurred images would maybe better work border cross.

    It's a great help, thanks verry much! I always wondering how someone can write such scripts ...

    The Wurfl script is a part of the js code of the page I had linked to. It is linked in it to wurfl.io/wurfl.js. It seems to have to do with apps and devices. I did try to delate, but than the page didn't work.

    If I have a question to the code I'll contact again.
    Begin of November I'll send you a donation. Thank you verry much!

    Greetings from indian summer in Bavaria.
    Christoph
    Last edited by Seher-Design; 10-22-2016 at 01:11 PM.

Similar Threads

  1. Resolved fieldset onfocus/blur
    By TheJoshMan in forum JavaScript
    Replies: 5
    Last Post: 12-07-2008, 06:46 AM
  2. Dynamic Motion Blur
    By killerchutney in forum Flash
    Replies: 3
    Last Post: 07-06-2007, 04:16 AM
  3. De-Blur News Updater Please
    By Snobound in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 12-16-2005, 04:37 AM
  4. Blur/Focus
    By holobyted in forum JavaScript
    Replies: 0
    Last Post: 06-01-2005, 10:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •