Combining users' scroll + animation css3/Javascript - javascript

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.

Related

transition not working for gradiant filling

css transition properly work for normal SVG path color filling with jQuery as follows.
path
{
margin-top: 25px;
height: 0;
overflow: hidden;
-webkit-transition: all 1.8s ease;
-moz-transition: all 1.8s ease;
-ms-transition: all 1.8s ease;
-o-transition: all 1.8s ease;
transition: all 1.8s ease;
}
jQuery
$(event.target).css('fill', '#000');
But path filling using radial-gradiant filling transition not working.
<radialGradient id="MyGradient"><stop offset="5%" stop-color="#f60"></stop><stop offset="95%" stop-color="#ff6"></stop></radialGradient>
jQuery
$(event.target).css('fill', 'url(#MyGradient)');
Why this happens? Is there any other way to do this?
"Just like you can’t smoothly transition from one background image to
another, you can’t smoothly transition from one CSS gradient to
another. It’s binary; either one background-image is shown or the
other."
Background gradient transitions are not really supported. There are work arounds and hacks, but for the most part you wont be able to make the transition using standard methods. I would recommend reading this article on medium for possible solutions (which is where the above quote is from).
https://medium.com/#dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
EDIT: In the case of SVG's you will need to use the <animate> tag within the SVG. See this demo for usage of that within and SVG: https://designmodo.com/demo/svg-gradients/
What would be the continuous transition between one paint name and another? What lies haflway between url(#MyGradient) and #000?
You can only define transitions in a meaningfull way between numeric values of the same attribute. Colors, described as numeric representations of the three RGB channels also count as numbers (as long as you don't use named colors).
For radial gradients, you can transition stop-color or stop-opacity values. offset or the cx, cy, fx, fy, r values of the gradient dimensions can be animated using the SMIL animation syntax.

CSS transition on data-percentage attribute change

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

Add animation to css change on scroll

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/

Slide + fade effect using CSS transitions

I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...
You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.
I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.

I need to find prototype.js based slide out tab?

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.

Categories