i have finished creating my website and are going to start creating animations for it. I fell in love with this sites animation, https://www.aristidebenoist.com/ , and are trying to recreate it. Anybody know the basis for this effect, and how to go about creating it?
Just checking out the elements in the console, it looks like the developer wrapped his inline elements with a span within a span and gave it a transform/animation property.
You could achieve the same by applying a class that has a transition or animation once the screen has been scrolled to a certain point.
Here is a pen to checkout : https://codepen.io/matt6frey/pen/dwKWMg
Hope that helps out. Cheers!
Related
Edit: Using Coll's innerText method along with Icekid's scroll behavior solved this. Thanks!
I'm using set innerHTML to apply the <mark> tag in a series of divs. For example, user presses a key and the <mark> goes from:
<mark>This is a demonstration.</mark> To show what I mean.
to
<mark>This is a demonstration. To show what I mean.</mark>
This works great except when it comes to scrolling. The text being marked is variable and sometimes requires the div to scroll. I use the following JavaScript to scroll the view:
function prompt_scroll() {
document.getElementById("next").scrollIntoView({ behavior: 'smooth'})}
The issue is each time this happens, the newly set innerHTML begins scrolled to top, then scrolls to the end of the <mark> tag. That sort of jumping up then scrolling is enough to make someone seasick!
The solution I think I need is to set the innerHTML already scrolled to the same point as the JS code I shared above. I just don't know how to accomplish this or if there is a better solution to prevent that scrolling to the top. I'll add that I'm still learning the ropes with JS so I may need a little extra info on the how and why. All guidance is appreciated.
You can add
yourElememt.scrollIntoView({behavior:"smooth", inline:"center",block:"center"})
In place of the "center" you can use
//start, "end" ,or "nearest"
To fix it to the position you want
I think you should use nearest for your case
i have button in a different color than the background and i want to turn the button into the whole page, but after that it shouldn't be clickable anymore, so after the click the button slowly turns into the whole page with the color spreading all over the page, i really hope i explained it correct.
I did a research on google about that, but couldn't find any matching results.
Also I'm new to JS, so please don't be upset if I don't know or don't understand any comments/answers.
Thanks
What you want is quite an advanced idea and it would not be done by actually turning the button into the page itself, but as an illusion.
If you want to animate something slowly, then I recommend looking into the css transition property.
I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?
You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/
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.
I have a DIV that has plenty of child DIVs inside of it. What I want is similar to Firefox's tabs, when you have too many tabs open or the main DIV width is too small, the interface will detect overflow and show a button on the right side to list all hidden tabs. The problem is that I have no idea where to even start looking for help.
Is you main DIV set to overflow:hidden?
If so, you can test its need to overflow by incrementing the scrollLeft property and then querying it to see if it's changed:
function containsTooMuch(el) {
var original = el.scrollLeft++;
return el.scrollLeft-- > original;
}
Googling turns up this:
http://knitinr.blogspot.com/2008/08/javascript-warn-if-overflow.html
looks nice and framework independent.
But maybe somebody comes up with a solution that works with less code.
Oh and guess which popular coding community site screws up the Googe results for
javascript detect overflow
:)
My approach would be to work from how new DIVs get added. Whatever event causes this to happen, I would add a handler to the document that runs a script which checks the size of the various DIVs to ensure that they meet your requirements. If they are too large (or too many), then you hide some of them and add your button with it's display logic.