-
Posts
-
Hi Enfold team!
First of all, thanks for a great theme and a superb help community!
I have a few questions regarding the animations in Enfold.First question:
I was wondering if there is a way to customize the current animations(fade/slide/rotate), perhaps like changing the duration of the animation or delay the animation.Second question:
Is it possible to add new jquery animations with shortcode to specific elements other than fade/slide/rotate, for example pulse or scale?Third question:
I was looking for a way to make an element fade out when it reaches the edge of the screen. Like the fade-in animation when the object enters the screen, but reversed?Thanks in advance!
BR / gorehallingHey gorehalling,
Sorry for the late reply, I’m not sure if any of those changes would be possible. Could you post a link to the site in question and try to explain in greater details exactly what elements you would like to change and how please?
Best regards,
RikardHej Rikard
(continuing in english for everyone else’s benefit)No problem for the delayed reply!
Well, no site in that sense at the moment that will further help me explain what I’m looking for.
I’ll try to explain in greater detals.The first question about customizing the animations was in regard to the “animation”-option that is found under the “Layout Elements”(1/1, 1/2…) and the “Image” element. I absolutely love those little subtle animations that you can add, but just wondered if there was a way (maybe with som Quick CSS and a custom ID) to customize the animation, perhaps like changing the duration or speed or anything like that, much like the options you have with the Advanced Layer Slider.
Second question was somewhat similar to the first. I wondered if there is a way to access more animations, perhaps by adding some lines into the shortcodes.js. I read somewhere on the forum about som quick css that created a pulsing animation. Are there more animations that can be accessed with quick css and in that case, could you point me in the direction of that piece of code? :)
Third quiestion. I have an Image Element with the Fade In-animation as it reaches into view. I would like that same effect but reversed when the Image Element reaches the edge of the screen before it leaves. In other words, I want my image to fade out just before you scroll it out of view.
Sorry for the essay :)
Thanks again!!Hi,
1.) Those animations are created via css keyframes (http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp) and you can find these animations in the css > layout.css and shortcodes.css file. Look for the “animations” section. Copy the keyframes and configure it in the Quick CSS field.
2.) You will have to create your own animation using keyframes. Every animations that are available in the theme are located inside the mentioned files above.
3.) Unfortunately, this is not possible without major modification on the theme. The animation is triggered by the “waypoint” script. Look for it in the js > shortcodes.js and avia.js file. http://imakewebthings.com/waypoints/api/offset-option/
Best regards,
Ismael
- You must be logged in to reply to this topic.