Use Animate.css on platform Tilda Publishing
Today, landing page without animation sold poorly, the customer would choose a freelancer who works in a large part of the portfolio created with animation, but the product information supply to be desired than the one with the text and description of 5+, but the visual component pages lean and entirely without animation.
In the article the author's rights, I want to mention that do not support the use of animation for the animation. I think that the animation should not be difficult, used to attract attention to the individual information units and the creation of more "air" design pages visually unloading transitions between screens and visualization of user actions.
Connecting Animate.css and ViewportChecker.js

To start using the animation of elements on the page, you need to connect Animate.css and ViewportChecker.js. To do this, we place at the top of the page HTML block (so if you put the code in the HEAD, the ViewportChecker.js will not work) and enter the following lines
<link rel="stylesheet" type="text/css" media="screen" href="">
<script type="text/javascript" src=""></script>
If you are using personal hosting, you can download these files to your hosting and change the path to it in the above code.
This code we connect Animate.css external file (which contains the styles of animation, more here) and ViewportChecker.js (it allows you to run the animation only at the moment when the desired item (or a little in advance) is displayed on the screen, read more here). Both files have minifier (ie compressed by removing hyphens or spaces in the code).
Also, you need to page in the HEAD (or Custom styles throughout the site, if the animation is used by more than one page), add css selectors
<style type=text/css> .hidden {opacity: 0;} .visible {opacity: 1;}
they are used to hide the items on a page until such time as they cause the script ViewportChecker.js


For once it was clear what we are going to work, I give an example of code to be inserted in the HTML page at the end of the block
$(document).ready(function() { $("h1[class='t102__title t-title'], div[class='t102__descr t-descr t-descr_md']").addClass("hidden").viewportChecker({ classToAddForFullView: 'full-visible animated fadeIn titleanimate' }); $("div[class='t264__wrapper t-text t-text_xs']").addClass("hidden").viewportChecker({ classToAddForFullView: 'full-visible animated flipInX codeanimate' });
Let's look at the code. Tags <script> </ script> wrap up the code and make it clear that this browser code is JavaScript code. $(Document).ready(function() makes it clear the browser to run a script after a complete download of all DOM elements (ie the structure of the page).
Now the most interesting - $("h1[class='t102__title t-title'], div[class='t102__descr t-descr t-descr_md']"), in this line, we specify a script to an element of the page to which we apply animation to find a class, id, or other attribute it, we need to click on the item right mouse button and select the line "View source" from the context menu, such as the item code will
<h1 class="t102__title t-title" field="title"><div style="font-family:'Georgia';color:#333333;" data-customstyle="yes">Анимация</div></h1>
It means the element has two H1 tag and css class t102__title and t-title, begin to build the structure.
The first thing we have to write it $(""), is now between the double quotes we point H1 tag and open the brackets, it turns out this code $("h1[]"), now the script understands that it is necessary to apply the animation to the elements with the tag H1, but since we can have no element H1, so we need to additionally specify a class or attribute the appropriate item. To this end, in brackets write class='t102__title t-title', ie classes of our element separated by a space, do not forget to wrap apostrophes.
If you need to apply this animation to multiple items, you can list them with commas, as in my code
For more information about the use of jQuery selector for finding items, read here
Enjoying the code further, addClass("hidden") adds a css class to a hidden element.
classToAddForFullView adds classes only when the item is completely on the screen, more in ViewportChecker.js features you can read here
'Full-visible animated fadeIn titleanimate' - a list of css classes to be added to an element in its overall appearance in the area of the screen.
More about them - full-visible and animated it mandatory classes, then at least there is a mandatory fadeIn, it is actually a class defines how an animation applied to an element, you can replace any of the class presented here. And last comes an optional class that you can create yourself (you can connect it to the section "Custom styles" or in the HEAD of the page) and give it its name, I registered in this class such properties -

.titleanimate {
-webkit-animation-duration: 1.5s !important;
-o-animation-duration: 1.5s !important;
-moz-animation-duration: 1.5s !important;
animation-duration: 1.5s !important;
-webkit-animation-delay: 1s !important;
-o-animation-delay: 1s !important;
-moz-animation-delay: 1s !important;
animation-delay: 1s !important;
-webkit-animation-iteration-count: infinite !important;
-o-animation-iteration-count: infinite !important;
-moz-animation-iteration-count: infinite !important;
animation-iteration-count: infinite !important;


those. In it, I prescribe the duration of the animation and the delay before starting the animation in seconds. These styles I regulate the animation speed, there can be several of them, because often the animation speed and its delay for each element can be different. The number of repetitions (iteration-count) I did not use in a concrete example, but often it is necessary for a looped or repeatedly repeating animation.If your site is designed for an audience with the latest versions of browsers, then the lines with the prefixes (-webkit, -moz, -o ) can't be used (just delete them).

If you have any questions regarding this script and its application, write in a comment, I'll try to help. Thanks to all.
comments powered by HyperComments
Made on