Text animation with JavaScript - 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.

Related

CSS animation play only once when section is visible on the screen

I got inspired by this website: https://brittanychiang.com/ especially the animations.
The ones which appear at the header when page is loaded are just typical css animations with delay or something. But when you scroll down and the another sections are visible the animation appears again and only once. Can you do it with pure CSS or you need to include JS?
Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.
Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.

Customize Sequencejs sliders

I've been working on the Sequence slider from www.sequencejs.com. The slider is very intuitive but it can only do one kind of animation on an object, from what i've observed so far, here's how the slider works:
1.the html section consist of an unordered list which in turn have list-items
2.the js file edits the li's class to "animate-in" marking the rest of them "animate-out"
3.after 5s, the second li is marked "animate-in" and rest are marked "animate-out"
4.the css file uses the css3 transitions to animate classes when "animate-in" is triggered on that class
What i need?
I need to do multiple animations on one object. But not together, rather one after another, for instance, an image would slide in from the right; then scale up.
Maybe there's some way of doing it that i might not know, i would appreciate your help with that
Or, I was thinking if the javascript file could add more classes at certain times, I could get the effect. I went through the javascript but I'm not skilled enough to understand that yet.
Could you guys take a look at it and explain me which parts handle the class changing? How can I make it add more classes between "animate-in" and "animate-out"?
You can get the slider from here: sequencejs.com/slider-parallax/
Hope I was clear enough.

Plugin for having elements "fly" on/off screen when scrolling

does anyone know of a javascript/jQuery plugin that will "fly" elements onto and out of the screen as I scroll down a page?
To better describe:
I'm picturing a long, vertically scrolling page, where all the content is in little "content boxes", then as a result of different actions (in this case, as a result of scrolling), I want these boxes to be able to fly onto or off the screen.
Maybe this could be described as some kind of cross between jQuery animate and parallax scrolling?
I feel like I've seen that type of effect somewhere before and I just can't remember where...
Here you go... http://johnpolacek.github.com/scrollorama/
I'm not sure of the exact effect you want but I would use a css class that gets applied/removed to containers depending on the scroll position.
You can animate the change with css transitions.
WOW.js
Reveal CSS animation as you scroll down a page. By default, you can
use it to trigger animate.css animations. But you can easily change
the settings to your favorite animation library.

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

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.

JS whole page rotation

I'm trying give users the option of selecting a different homepage by clicking left or right, and having an entirely new page appear. I'm aware of a few jQuery carousels that accomplish this in a purely x axis, or y axis manner, but not a rotation. Ideally the background images will sync up, and the overall effect would be like a globe spinning, with a different set of elements at a different portion of the globe. The elements at each section of the globe still need to be interactive and
Does anyone have any ideas on that?
using jQuery, you should be able to do this using the .slideDown and slideUp methods.
Essentially, when they perform the action that you want to trigger a switch, you add a slideUp() to the 'current' container and do a slideDown() on the next one. The animations will run concurrently.
http://jsfiddle.net/g19fanatic/stLvj/
Not many people here will write you a full solution, but they'll be happy to work through specific issues.
Are these homepages on different domains and/or are they under your control?
How globe-like do you mean? A kind of sphere distortion, or just seamlessly connected at the edges?
How important is the smoothness of the concept?
Off the top of my head, here's how I would (attempt to) do it:
Load the homepages in separate iframes
Stretch the iframe to the window's dimensions
Adapt a carousel script to animate iframes instead of images
Some sort of "prev/next" controls overlaying the iframe. Maybe with z-index.
Check out landing.js file on http://thetruth.com/ (or just let the page timer run to see the carousel)
What you want is basically that but with animations instead of fading the page in/out.
Just add CSS3 transforms to scale and slide instead of the fadein/out when a new page loads.
A polyfill will add the transform capability in JS (see jquery.transform.js, jquery.transition.js by https://github.com/louisremi and Modernizr)

Categories