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/
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 am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place.
And not sure what's the best search term for this.
I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.
https://dribbble.com/shots/2623261-Landing-Page-Animation
Is CSS possible? Or SVG? If yes, what areas should I be investigating?
*Updated: I have found the article for this.
https://css-tricks.com/reverse-text-color-mix-blend-mode/
It is possible with CSS.
Check the answer here. It is simple effect.
Basically, you add multiple text. One with white and one with black color in different div and you add clipping to each div, so when you scroll, it appears like the effect you want.
I wonder if there exists some kind of tear apart image animation effect with jQuery today?
Not like into one millions pieces, but instead like tearing a picture apart effect at the middle? Moving towards the sides. Or is this something which requires the use of Flash animations??
Thanks!
You can accomplish this with javascript and css3.
Simply have javascript duplicate an image (probably a div with the background as an image) and paste it over itself. Then have the left image show the first pixels 0 to 50% and the right image should show pixels 50% to 100% with the background aligned right. You can then have css or jquery move each side apart. You would need to add some extra styles to create that rip look but it is completely doable.
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 have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)
The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!
Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
hide the current image, position the DIV on this image .position()
fade our DIV in/out
reset image visibility
Let me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding
Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html