I'm trying to animate a sidebar with javascript that shows category icons by default and shows the category words on hover. The closest example I can think of is this one: http://piccsy.com/.
Can anyone help me with this? I'm still getting the hang of javascript.
You could do this just with CSS using .myclass:hover you'd have to check compatibility with older browsers because you will have to use css transition to animate. This is a good starting point CSS3 Transitions
Or if you want to use javascript I'd recommend using JQuery's mouseover() event function. when this event is triggered you can then animate the side nav.
Good luck
Related
I'm looking to find the name of this scrolling effect.
As you scroll, the text on the screen changes, as if you were going through a slideshow. The gif is from this website.
I have an idea of how to implement it, but would prefer to use some js library (ideally for react, but not required) that already implements it. Does anyone have an idea of the name, or some library that has it? Thank you!
It's just called scroll-linked animations.
Typically for website animations, you would want to use CSS keyframes, as it is more performant than using javascript. Though you can always trigger CSS keyframe animations with javascript, and tie it to scroll events to create the above effect.
I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).
I've looked at the source code, but can't figure out exactly how it works, and what the most efficient way is to replicate the behaviour. From what I can tell it works with javascript by applying a hide/unhide class to the menu, activated by the button.
Would it be possible to replicate this with the css checkbox hack? Or is using javascript better?
This is fairly simple:
Add the hamburger menu icon
Have a CSS class that makes the nav area active
Make JS add/remove that class from the nav area
Use CSS transitions to take care of the animation (they're more likely to be accelerated on a mobile device)
I like the implementation on http://purecss.io.
Also check out http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html
edit:
I misread question the first time.
I think you'd have a better time using javascript.
If you are using jquery you could use the toggle method.
$("#hide-show-button").click(function(){
$(".nav").toggle();
});
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.