Header animation
- Written by
- Published in Template articles
- Read 446512 times
- font size decrease font size increase font size
- 1201 comments
The header animation is based on our simple CSS animation engine, which uses a simple JavaScript code
Our simple animation engine is based on the data-* attributes.
For creating animation please creata a container with class gk-animation and put elements inside it. We recommend to style these elements in the css/gk.stuff.css file.
You have to specify for every element at least two attributes: data-start and data-end. The first attribute contains starting properties for the element and these properties should be written with units. The second attribute specify which properties will be animated and what will be their final value (without units).
There are also two additional attributes: data-time and data-delay. The data-time attribute specify the time of the animation in miliseconds. The second attribute specify the time of delay for animation of the specific element (of course in the miliseconds).
The very important is fact that the content of the data-start attribute specify the start position of the animated element and all elements should be hidden at start using in example {'opacity': 0} at the data-start attribute.
Let's analyze a simple example:
<div class="gk-animation" data-height="530">
<div class="gk-animation-wrap">
<h2 class="gk-scale-up" data-start="{opacity:1}" data-end="{opacity:1}" data-delay="200" data-time="500">Festival 21 jul. - 27 Jul. 2020</h2>
<h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Sayary Llaqta</h1>
<div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
</div>
</div>
As you can see the animation engine needs two basic wrappers - gk-animation and gk-animation-wrap. The animation will start with using opacity for animation after 200ms and with duration 500ms for the h2 element. Then (after 400ms - it is a difference between date-delay for both elements) animation will start for the h1 element also with duration 500ms. At the end the .gk-stars element will be animated.
We have also included additional class gk-scale-up which can be used for elements which will be scaled from 0 to 100% of their original size using the CSS3 transform property. We have to move this animation to the CSS code due problems with prefixed properties in the MooTools code.
It is worth to mention that some elements can be also animated in two other states of the animation - the gk-animation container changes his CSS classes - after loading the page the "loaded" class is added and after displaying the whole container the "displayed" class is added. We have used this mechanism for animating the .gka-background element in our header animation.
Responsive layout
Please remember that you have to scale down all your header elements for the tablet and mobile devices - please use for it the css/tablet.css and css/mobile.css files.
Countdown
We have implemented our own implementation of the countdown. It is very simple to implement:
<div
class="gk-jscounter gk-scale-up"
data-dateend="16-7-2020"
data-timeend="19:42"
data-timezone="+2"
data-start="{opacity:13-07-2020}"
data-end="{opacity:1}"
data-delay="900"
data-time="500"
>
"Para seguir cantando"
</div>
Te idea of the counter is simple - the content of the gk-jscounter element will be displayed when the counting will be finished. To specify the time for countdown you have to specify it in the two attributes - data-dateend and data-timeend. The first attribute is used to specify the end date (in format D-M-Y) and the second attribute is used to specify the end time (in format h:m).
Very important fact - if you're using not the UTC time, please specify the data-timezone attribute - it will guarantee that the time will be calculated correctly for all users.
The rest of the data-* attributes was described in the previous paragraphs as a part of the animation engine.
1201 comments
-
supreme clothing
My husband and i felt quite delighted when Raymond could carry out his web research through the precious recommendations he was given from your very own web site. It is now and again perplexing to just find yourself releasing guides others could have been making money from. And we all fully grasp we now have the writer to thank for this. The entire illustrations you've made, the straightforward web site navigation, the friendships your site make it easier to engender - it's mostly superb, and it's really facilitating our son and the family do think the article is brilliant, which is really serious. Thank you for all!
Martes, 28 Noviembre 2023 08:54 Comment Link -
golden goose
I must express my appreciation for your generosity giving support to people who must have assistance with the subject. Your real dedication to getting the solution around appeared to be exceedingly informative and have always permitted men and women like me to realize their endeavors. Your personal invaluable report entails a lot to me and much more to my colleagues. Thank you; from each one of us.
Lunes, 27 Noviembre 2023 21:24 Comment Link -
yeezy outlet
Thank you a lot for providing individuals with remarkably superb possiblity to read from this blog. It is often very fantastic and also full of a great time for me and my office colleagues to search your site at the very least three times in 7 days to find out the latest guidance you have. Not to mention, I am at all times happy concerning the terrific things you give. Certain 1 points in this posting are unequivocally the most beneficial I've had.
Lunes, 27 Noviembre 2023 13:32 Comment Link -
off white
I happen to be commenting to make you know of the fantastic experience our girl found reading yuor web blog. She noticed numerous details, most notably what it is like to have a wonderful helping heart to get folks just grasp a number of complicated topics. You truly did more than people's expectations. Many thanks for presenting those insightful, dependable, revealing and in addition unique tips about that topic to Tanya.
Domingo, 26 Noviembre 2023 14:34 Comment Link -
cai shen fishing
While the Jawbone UP Move we have already highlighted is a suyperb budget fitness band, sso is its rival the Misfit Flash.
Sábado, 25 Noviembre 2023 05:35 Comment Link -
birkin bag
Thank you for all of your labor on this site. My mother takes pleasure in working on investigation and it is easy to understand why. I know all relating to the compelling manner you offer very helpful thoughts through this blog and in addition recommend contribution from some other people on this point then my daughter has been learning so much. Enjoy the remaining portion of the year. You are conducting a splendid job.
Jueves, 23 Noviembre 2023 13:17 Comment Link -
kyrie 8
I am just commenting to make you understand of the extraordinary experience our princess developed viewing the blog. She noticed numerous issues, including what it's like to have an excellent helping nature to make other folks without problems comprehend some impossible subject matter. You truly did more than my expectations. Thank you for showing these warm and helpful, healthy, revealing and as well as unique tips about the topic to Gloria.
Jueves, 16 Noviembre 2023 08:08 Comment Link -
OFF-White
I wanted to write you a very little remark just to say thank you the moment again just for the unique principles you have documented on this website. It was certainly generous of you to supply easily precisely what a number of us would've made available for an e book to end up making some bucks for themselves, principally considering that you might well have tried it in case you desired. These smart ideas also served like a great way to be sure that the rest have similar keenness just like my personal own to grasp whole lot more when it comes to this condition. I believe there are many more fun occasions up front for individuals who view your site.
Jueves, 16 Noviembre 2023 00:17 Comment Link -
هودی ترکمنی اهنگ
تکرار رمز عبور تایید لطفا جهت دریافت کد تایید، شماره موبایل خود
را وارد نمایید.
این محصول کاملا اصل بوده و پارچی با ضمانت اصلبودن آن را به فروش میرساند.Martes, 17 Octubre 2023 00:59 Comment Link -
สล็อต r88
Different nice ftness apps that provide a variety of workout routines
and full physique exercises embody JEFIT, Exercise Trainer, Gorilla
Exercise, and DailyBurn.Miércoles, 11 Octubre 2023 05:58 Comment Link
