Have a look at this picture:
http://oi43.tinypic.com/5cdm5g.jpg
This is my idea to design an slide show, which each slide can be a div tag and congaing some text or image and the small behind slide is the next one which is a bit transparent and when the user press the space bar or click somewhere the top slide fades out and the next one moves to forward and replaces, then another slide replace as the next one.
I know it is possible by JS, but what about CSS3? I know I have to put code here, but I have just started and do not know where to start. It would be great if some one help me and gives me some hints.
The best resource I have found for CSS3 questions is http://css-tricks.com/
This is another good resource and is updated regularly by the owner. http://css3.bradshawenterprises.com
It will be some advanced CSS3 techniques you'll be using such as transitions, transforms etc..
Good luck
Related
I would like to use the card element to forward to a blog post. My idea was to have the heading displayed permanently and the respective description when entering the mouse.
As soon as the mouse leaves the element, the description should disappear again. The heading should be moved to the original position.
To illustrate my thoughts, I have created this sketch.
My current progress is relatively modest.
I have already tried to use both fadeInUp and fadeOutDown (animate.css). This turned out to be a bit unsatisfying. You can find a preview here.
Here, you can find a preview without animations.
In principle, the desired animations are in place. However, the heading does not end up in the original position, which of course is caused by the use of fadeOutDown.
Personally, I feel uncomfortable integrating Animate.css when I want to implement a fairly simple animation. Can you give me your advice at this point?
How would you rate my progress? Was that a good approach?
Here is your solution. Fiddle
Just add
.removeClass().addClass("card-title fadeInDown down animated");
to
$(this).find('.card-title').removeClass().addClass('card-title
fadeOutDown animated')
In hover callback
for the integrating Animate.css Part. You dont have to use the whole css file just use the part that you need
I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael
I want to create custom banner or download one.
The banner has following requirement,
I could add images and text in this banner.
On each slide you can add multiple images and text, for an example slide one has two images and text on sides, then slide two has three images and text on the sides.
IMPORTANT – if the images are small thumbnails the text should fill the blank areas or around the image. The banner should be responsive to the element inside (could be an div). If the image is big the text should go underneath the
image or on the side.
slides left or right
left and right navigation button, as well pagination
Example: http://www.bbc.co.uk - main banner at the top
I had a look on the internet i tried the following:
flexslider - very good, meet all the requirements apart from point 3. but dont know how to make it responsive.
orbit slider - good but flexslider it easier to style.
Note: this banner will not be used on mobile device.
Seems like you didn't get any answers because there's no such thing as a perfect finished solution. It's not difficult to change any of the mentioned sliders and make them responsive IF you know some css. I'd suggest that, depending on how many of these works you want to do, you give it a try. You can find good free tutorials online.
I found this one plugin though, worth a try: http://marktyrrell.com/labs/blueberry/
And some more: http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins
if i have a link on my page, i want that link (and if this can be done easily through css or something, all links) to make the entire body slide off to the left as it fades to white. also, most of the pages that these links go to will be designed to do something else i don't have a clue how to do: Fade up from white, and slide on from the right. Any help is greatly appreciated!
You'd probably do it the way Github do with their Tree Slider. They blogged about it
Here you have a good reference
You'll have to notice that it is going to be a little hard to apply it if your website is already done.
Could you please tell me how this photo animation effect is achieved - see the pictures that slide seamlessly to the left every say 3 seconds (the pictures just below the BIGSTOCKPHOTO logo).. Site- www.bigstockphoto.com
I have noted this effect being used in many other sites.. And none of them seem to employ flash for making this. Please let me know whether this is just JS or whether its purely a CSS based effect, and probably a place where i can read on how to make this.
Thanks.
here you go..
example:
http://cssglobe.com/lab/easyslider1.7/01.html
info:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider