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
Related
I'm kind of new to this and couldn't find any solutions so far that works.
I want to achieve the effect present on the images here: http://www.apple.com/macbook/
When the user scrolls down, the image is going up and vice versa. I took a look into their javascript files (line 28928 in overview.build.js), found the lines that do this but couldn't understood it exactly.
On my website when I want to use this effect I have the image inside a div container as img tag, but I can also place it as background-image.
Thank you for yor time!
I think what you are referring to is a parallax effect. There are a wide variety of jQuery plugins to achieve this effect.
The plugin that I use:
https://github.com/jalxob/cool-kitten
You can find tons of other options by googling "parallax effect"
I would appreciate little help on this.
I wanna add an image/text overlay hover on images of this slider below.
So when someone's hovering the image will appear a 50% transparent black block and the "details" image/text in the middle.
This is an example of hovering (the zoom and details buttons) : http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/
This is the slider I wanna use : http://codepen.io/anon/pen/Alzhn
Thanks in advance !
No need to reinvent the wheel. Consider the following projects:
http://wowslider.com/jquery-slideshow-huge-demo.html
http://bxslider.com/examples/image-slideshow-captions
For overlays, you can also consider
http://buildinternet.com/project/mosaic/1.0/
Try any of the above links for implementation and be more specific with your question.
For example, I am having issue with X, I want to do Y and I have tried solving this using XYZ. Your JS fiddle is just a copy of your existing project with no indication of what you have tried to solve your problem.
As with any learning environment, I would take small steps first. In your use case, I would tackle the problem as follows:
Require on hover caption
Require slider
Then when step#1 is completed, you can build on top of that and so forth.
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
I got another CSS/JS question: I want to make a navigation menu, where there is at the beginning a div with just a text in it. If I hover with the mouse on it, there should appear a background from the left to the right.
Is this only possible with JS (so if hover, an interval gets startet which moves the background behind the text) or are there any other possibilities?
I hope you understood what I tried to say ...
Thanks for help!
Flo
EDIT: It's something moving just like this navigation here: http://iipvapi.com/, but only a simple background from the left to the right.
You could use the :hover CSS selector. This will not provide animation functionality though. It will just apply the style or not based on whether you are hovering.
You could do it with pure JavaScript, but it would be a little awkward if you want animation.
You could do it with JavaScript using jQuery, which provides animation functionality and is easy to use. You probably want the animate function, as it sounds like a bit more of a custom solution than functions such as slideDown would provide.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.