- This topic is empty.
-
AuthorPosts
-
October 14, 2011 at 11:48 am #34774
exsite_interactive
MemberHere 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.
October 14, 2011 at 1:55 pm #89078TheDoc
MemberDefinitely doable – I like the design, too!
Something like this should help, I hope! http://jsfiddle.net/XRqTq/
October 14, 2011 at 2:46 pm #89081exsite_interactive
Member@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.
October 14, 2011 at 2:51 pm #89082TheDoc
MemberYea, 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.
October 17, 2011 at 6:05 pm #89183noahgelman
Participanthmmm…. 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
October 17, 2011 at 8:19 pm #89190exsite_interactive
Memberi 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.
October 17, 2011 at 8:27 pm #89191exsite_interactive
Memberif you can take a stab at it that would be much appreciated!! :)
October 17, 2011 at 8:28 pm #89192noahgelman
ParticipantOk, 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
October 17, 2011 at 8:44 pm #89193exsite_interactive
Memberwould love to see
October 17, 2011 at 10:05 pm #89195TheDoc
MemberAtta boy, @noahgelman – thanks for helping out!
October 18, 2011 at 12:09 pm #89235Mottie
MemberA 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 :)
October 18, 2011 at 5:15 pm #89254noahgelman
ParticipantI assume you’re cool with using jquery to power it?
October 18, 2011 at 5:26 pm #89255exsite_interactive
Memberyes, jquery would be preferred.
October 19, 2011 at 6:40 pm #89321cayoub88
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 ?
October 21, 2011 at 4:52 pm #89450exsite_interactive
Member@noahgelman , any luck?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.