Announcement

Collapse
No announcement yet.

SVG image slider

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • SVG image slider

    Hey,

    I am trying to learn a bit about SVG. So I decided to make a basic SVG slider (doesn't work fully in MS-Edge and IE at the moment by the way): https://codepen.io/RobMo/pen/vJpbyv?editors=1010.

    I figured I might as well post it and get some feedback .
    • What do you think about the general UI?
    • If you feel like it, play around with the css settings and share your favourite color scheme.
    • Have you seen any other cool effects in slideshows? If you did show me a link, so I can steal peoples ideas (mwuahahha). I can only use clipping effects in this slider by the way. Opacity will look really weird on pictures with different aspect ratios.
    • Any other feedback is welcome too of course.

  • #2
    I saw the code and both explanations but the slider is not moving. However bare in mind I am using both a guarded and unguarded web explorer. Not HTML5 related.

    Also remember "Do not recreate the wheel" but it looked interesting.

    Comment


    • RMo
      RMo commented
      Editing a comment
      With web explorer, do you mean internet explorer and/or MS Edge? I checked in MS Edge and there seem to be some problems there.

      It has to do with the technique I use to animate. One technique is supported in MS-Edge and not in Chrome. The other is working in Chrome, but not in MS-Edge. I'll definitively have to look into this. (there is no excuse why it shouldn't work in MS-Edge)

      About 'recreating the wheel'. Well it's my favourite passtime and a good way to learn how things work. That said with svg images you can theoretically create many effects 'regular' css sliders can't.

      Anyway, thanx a lot for the feedback, very useful.

  • #3
    Neat.

    In other neat things, you can make graphics into css (sometimes it's smaller):
    https://codepen.io/emad_elsaid/pen/bCaLE
    https://css-tricks.com/data-uris/

    Comment


    • #4
      SVGs can be rather big (but very expandable).

      Have you heard of base64?
      ..daww, it's in cute css too!
      https://css-tricks.com/data-uris/
      https://www.base64-image.de/

      Comment


      • RMo
        RMo commented
        Editing a comment
        I don't think the size of an image matters in svg vs css (since we are loading an image into the svg, not creating the images with svg).

        I did look in those particular images on my pc and it seems the time the server takes to make an initial request takes (0 - 10s) and the time to reply on the image request is (2 - 12s). The actual download is only like (30-100ms), which is acceptable. It's probably the server that is being used that is a bit slow (but hey, what can we expect from a free placeholder image service).

        In short: I don't think the image-slider is causing the delays here, but the images that are used for it do. I might do 'something smart' to affect the loading order however (since the slider only needs the first four images on pageload).

        Thx for the feedback, gives me something to think about .

    Search

    Collapse

    Sponsor

    Collapse

    Incredible Stock

    Latest Topics

    Collapse

    GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
    Working...
    X