Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Diagonal SLider

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #34774

    Here is a link to a screenshot of a design we have been cooking up here. Is something like this possible with CSS? https://skitch.com/exsite/gy4n8/slider

    Want to have this diagonal slider, but still save the images out as rectangles, instead of having to always slice a diagonal mask in the image and save as PNG.

    Any help or resources would be much appreciated.

    #89078
    TheDoc
    Member

    Definitely doable – I like the design, too!

    Something like this should help, I hope! http://jsfiddle.net/XRqTq/

    #89081

    @TheDoc, thanks, thats along the lines of where we need to get this.

    I played around with it and this is where im at: http://jsfiddle.net/XRqTq/6/ – Its messy… but its getting there. Got the pink overlay on top of a 2nd image, and a 2nd image and headline straight (your example the 2nd image was rotated). The issue here would be getting this to actually become a working slider, and getting it to animate smoothly.

    #89082
    TheDoc
    Member

    Yea, unfortunately my knowledge of jquery is pretty much nil, do I can’t help you much in the regard. I would recommend downloading something like the Anything Slider and see if you can mash up the CSS a bit from there.

    #89183
    noahgelman
    Participant

    hmmm…. This is interesting. A slider with a diagonal image cut. Is the whole image clickable to move the slider? or just the arrow? I can take a crack at building this, even make it usable in IE. It could take a couple days due to work being very busy though

    #89190

    i know right! very interesting, haha. Ideally the whole image would be clickable, but i was thinking that it would be too difficult to do it that way, and i would be happy with just the button as the link.

    #89191

    if you can take a stab at it that would be much appreciated!! :)

    #89192
    noahgelman
    Participant

    Ok, I think I know a way to do this, but in IE, it wont have diagnols, but I should be able to have it fall back to a normal looking slider

    #89193

    would love to see

    #89195
    TheDoc
    Member

    Atta boy, @noahgelman – thanks for helping out!

    #89235
    Mottie
    Member

    A while back, I was working on an “AnythingSlider Lite” version… I just never got around to finishing it. It lets you set the direction of the slide (change it using the radio buttons), and if you press enter inside of the input box at the top, it will cross-fade to the next slide.

    Feel free to use it if you want… someday I may get around to making it an “official” lite version :)

    #89254
    noahgelman
    Participant

    I assume you’re cool with using jquery to power it?

    #89255

    yes, jquery would be preferred.

    #89321
    cayoub88
    Member

    @TheDoc & @exsite_interactive, I like that, but wouldn’t you rather keep the html clean and get rid of that empty div? Maybe use :before or :after ?

    #89450

    @noahgelman , any luck?

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.