I have built the following page:
http://jsfiddle.net/czLo0t6n/
Code visible at jsfiddle
When scrolled, the header reduces its height and text and logo change their position and size, as it is seen on many sites now.
I would like to add an animation to the process of scrolling. How can I do that? I have very low knowledge of JavaScript, but actually I assumed that the animation would already be in there. But as you can see, the states jump to each other, there is no visual transition.
Or maybe you can recommend me a better script than what I used?
Hope somebody can help :-)
Best
Th
You should enable transitions on the elements that change when the .large/.small classes are toggled
#header header,
#logo,
#slogan{
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition:all 0.4s;
}
Demo at http://jsfiddle.net/czLo0t6n/2/
Related
I have found a code that makes a Circular progress bar, and changed it a bit to grow on click from 1 to other number. Later on I wanted to add transition but it doesn't seem to work, the progress bar changes without transition
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
http://jsfiddle.net/Aapn8/8362/
Someone have an idea how to make transition work?
As #user1850903 wrote - transition doesn't work in that way.
You can use setInterval() to get the effect you want:
http://jsfiddle.net/3j0vxx77/17/
your drawCircle funciton uses canvas and is not influenced by CSS.
CSS only applies to html tags, not to lines drown on canvas.
Quote from WIKI: "Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language"
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam
You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.
For a site I am working on I'd quite like to use a similar drop down effect as here http://shop.jack-hughes.com/ when you click info a hidden div drops down.
I can't work out if it uses only CSS3 or Javascript/CSS can anyone point me in the right direction or tell me the name of the effect; pretty simple I guess but for the life of me can't find another example.
combination of CCS3 and js
Here is what is used in the website you refer
js:
Event.observe(window, 'load', function () {
Event.observe('info', 'click', function () {
$('aside').toggleClassName('open');
});
});
Event.observe is from the prototype framework - http://prototypejs.org/doc/latest/dom/Event/observe/
The equivalent in jQuery(http://jquery.com/) for instance would be:
$(document).ready(function () {
$('.info').click(function () {
$('aside').toggleClass('open');
})
});
css:
aside.open {
height: 21.25em;
}
aside {
position: relative;
background-color: #3f4642;
width: 100%;
color: white;
letter-spacing: 0.1em;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
The HTML element is <aside>....</aside> but it's no difference if you choose div.
They have a small piece of Javascript that does this that can be easily done on any website. Basically you need a hidden div at the top of your page, and upon clicking a link you simply show the div.
The code that they used was:
Event.observe('info', 'click', function(){
$('aside').toggleClassName('open');
});
But if you take a look at jquery then you will see that manipulation of elements is quite easy to do.
One thing that they do use in addition is a CSS3 transition in their open class:
.aside {
transition: all 0.3s ease-out 0s
}
This is what is causing the smooth transition effect. So you can use either jQuery or the CSS3 transition, both give the same effect. I would say that the CSS3 transition is nicer, but then again you will be alienating certain browsers if they do not support transitions.
Probably using jQuery. Something like:
http://api.jquery.com/toggle/
In addition to what Deif discovered they're also using CSS transition
transition: all 0.3s ease-out;
and also make use of the "::selection" pseudo class for their "aside" class, see developer.mozilla.org
First post on SO so far :)
I'm creating a parallax website combining css3 + javascript.
I followed this tutorial and I have to say that it gave me quite a grasp on the subject.
I was just wondering 2 things:
How do I translate the movement on the X axis?
Most Important: How can i combine users' scrolling with animations?
I've seen there is plenty of plugins out there, but I'd rather develop a solution myself without getting the code too heavy and complicated. Could you point me out some good resource, which will enlighten me on this technique?
Thank you guys!
EDITED on 17/09/12 at 14.14 (+1 GTM TIME)
In case someone would be interested, that should be the idea-code by which we would do the trick:
$(document).ready(function() {
$('section[data-type="example"]').scroll(function() {
// If the user scroll as much as we need, in this instance 750px
if (scrollTop() > '750px') {
// switch its class from ".animation" to ".animated"
$(".animation").toggleClass("animated");
}
});
});
CSS Classes would be:
.animation {
width: 300px;
height: 300px:
-webkit-transition: width 2s ease, height 2s ease;
-moz-transition: width 2s ease, height 2s ease;
-o-transition: width 2s ease, height 2s ease;
-ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; }
.animated { width: 400px; height: 400px; }
As we see, in ".animation" we would find the initial size and the animation, and in ".animated" we're going to print what we want to achieve.
This has been created thanks to the hints provided by #jfriend00. Unfortunately I havn't had the possibility to try it yet, so feel free to improve it. I wrote it here because it seems like someone is interested to this topic, and previously I posted it in a comment making it unreadable :)
Also, Jfriend00 told that .scrollTop() is a JQuery Method, not a plain function. How do you think it could be improved using plain JS?
Thanks in advance and sorry for my grammar error and for the noobness; I'm not English Native and I'm quite new with programming :)
From your comment:
Let's say that for example, I want to combine the users' scroll to a
transitional effect. So i.e. once the user has scrolled 750px, I want
an object to appear with a fade transition. How do I link the
scrolling factor with the animation?
This is one way to approach that specific example:
You would register an event listener for the scroll event.
In the scroll event handler, you would examine the current scroll position and decide if you wanted to take action (e.g. scrollTop is more than 750px).
The easiest way to trigger a CSS3 animation is to add a class name to your object. If the object has CSS assigned to it for that new class and the object is configured for CSS transitions on any of the properties that are changed by adding the class name to the object, then a CSS3 animation will start when the class is added.
I have founded this -> http://www.building58.com/examples/tabSlideOut.html
But there are some reasons that i dont want to use it:
i need prototype framework instead of jquery
i need an image to open slider (click to open) and when it opened image will change to "click to close"
Maybe someone has already the same solution of my question?
thank for you help!
CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)
The crucial parts of CSS are;
#drawer {
position: relative;
left: -200px;
/* transition is repeated for all supporting browsers */
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
#drawer.open {
left: 0;
}
The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;
Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))
...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.
For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.