Closed D4RKAR117 closed 6 years ago
Thanks for the kind words.
There is nothing wrong with options.origin
in my test; as noted in the docs:
You will need a non-zero value assigned to
options.distance
foroptions.origin
to have any visible impact on your animations.
ooohhh deam sorry man i feel a idiot right now
It's no problem, sometimes the issue is just one missing ;
that's how it goes.
Also your visibility: hidden
code is missing the html.sr
hook for all of your classes; you have this:
html.sr .top-reveal, .bot-reveal, .right-reveal, .left-reveal {
visibility: hidden;
}
But you'd want something like this:
html.sr .top-reveal,
html.sr .bot-reveal,
html.sr .right-reveal,
html.sr .left-reveal {
visibility: hidden;
}
Make sure to include the html.sr
hook in them all.
Oh thank you I had not noticed, and about the attribute: !Important, you think it's something important? sometimes some classes do not allow you to apply the hidden cuz it override the principal
I'm not sure I understand, where is the !important
coming from?
I refer to this friend
html.sr .top-reveal,
html.sr .bot-reveal,
html.sr .right-reveal,
html.sr .left-reveal {
visibility: hidden !important;
}
Whenever this attribute is important in the hidden, the animations will never start, and it is uncomfortable because sometimes the hidden is overwritten by another style
I understand.
ScrollReveal doesn't use !important
when it applies visibility: visible
during animation, so if you use !important
in your html.sr
style, it overrides ScrollReveal. (No animations can be seen.)
If you'd like, you can make ScrollReveal use !important
by adding it in your source here:
https://github.com/scrollreveal/scrollreveal/blob/2f70956cca0a65afdd808d3036f3f111fd564862/dist/scrollreveal.js#L620-L622
Great friend, I will use it, and I would like to request something, options that change depending on the size of the viewport, sometimes some effects are better in mobile than in PC and vice versa, something like the responsive breakpoints but for your script.
Keep up the good work
ScrollReveal doesn't support media queries, but it does offer options.desktop and options.mobile. It’s based on the browser's user agent string, but it will let you create unique experiences for both, e.g:
// .items on mobile...
ScrollReveal().reveal('.items', {
mobile: true,
desktop: false,
duration: 250,
scale: 0.9
});
// .items on desktop...
ScrollReveal().reveal('.items', {
mobile: false,
desktop: true,
duration: 400,
scale: 0.8,
reset: true
});
If in fact if I have used them but I think it would be even better to have more flexibility with that kind of options, it would offer even more personalization, but even so it is very cool ;), thanks and sorry for the inconvenience
No problem, happy coding!
Environment
Hello, after a while I come back with another issue, I'm trying to display a page on github pages using your amazing script, it works to a certain extent, the problem is that the "origin" option does not apply the effects it should, possibly I'm doing something wrong but I've tried several times with different options like local scripts, changing styles and events, but it does not work, another minor thing is that by following your recommendations to avoid flickering in the load of the page if the css visibility option is hidden it is added !important like
visibility: hidden !important;
will not work the reveal, it is something uncomfortable sometimes, attached screenshots the my javascript scriptThis is the file that executes the reveals, the commented options disable them to verify that they were not the cause of the problem, but it does not matter if they are active or inactive
This other screenshot shows the structure of my index.html file, I use all the scripts in the head section
And this one is the CSS styles file that I use with the recommendations of your script and without the property: !Important
Even if you want to verify the files yourself you can check the docs folder of my repository, which is published in the github pages
Keep up the good work friend, I have made this script one of the essential elements when creating web pages.