HTML/CSS/JS: Rollover-Effect for navigation-menu - javascript

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.

Related

How to scroll through whole images in CSS

I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy
Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.
Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.

How to animate text within div.card-img-overlay when hovering

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

Text animation with JavaScript

How do I create a text animation like on this page.
http://www.kikk.be/2016/
When you hover over Main Menu item this menu item starts random animate each latter in this menu titel.
The animation you are talking about, don't even use javascript. You can see this when you disable javascript and visit the site.
My guess would be, that they just use css for the animation and that it is not realy random, but just a set of animation frames played fast.
Here is an explanation on how to use css animations in general.
And here is an explanation on the hover selector in css which allows you to specify mouseover actions and can be simply used together with the animations.

jquery animate rainbow-like color change

Let's say i have this image:
The line color is a gradient from yellow to purple.
Now my question is this: is there a way to either create a gif or use jquery or other form of javascript to make a non stop animation of the colours changing from left to right?
Appreciate any help :)
What you're trying to do can be done using sprite animation.
Basically, you can use jQuery to rapidly change the background position of an element giving the illusion of animation.
There's a simple little plugin for this already, but one can also be written yourself quite easily.
http://spritely.net/documentation/

Javascript Inertial side scroll on mouseover

As I was looking through Killers Music html5 site, I wanted to do what they did with main navigation where when mouse is over to left or right, it will scroll infinite.
I have when through their javascript file, also inspected elements and one thing was for sure, they update left css property to scroll the background images.
I am not quite sure how to do that smoothly. I know I can use setTimeout to update the left but not sure what value I have to calculate to apply.
I am going to need someone's help or if there is any tutorial for it, it would be wonderful.
Please help.
It uses the jQuery easing plugin.
Some demo are available here: http://jqueryui.com/demos/effect/easing.html

Categories