Google is going crazy with all the exciting ventures it is coming up with to tap the audiences. In an effort to solve the existing problem of people who are not familiar with the existing Google products, Google has launched its new website with the name of Google tips which consist of tips on how the users can use the existing Google products.
Some of the tips are very exciting for the newbie users to discover as Google has gone creatively innovative with this idea by showcasing some of the animated and card effects which could ease down the experience of learning Google products.
Here’s what the user can get from the newly launched website – Google Tips
How does it work?
When the page is loaded, the user is introduced to entrance animation. Second, when the user is about to hover over the animation, it is important for the card to tilt a little. Thirdly, when the user clicks on the card, several other cards from all the directions, the result is that they get stacked up nicely behind the clicked one.
If people are interested in knowing the technique behind the functioning of the animation and card tilt design then they must know that through CSS and the use of CS3 transform, the cards are easily able to fly in and manage to tilt in the direction set by the developer. To use better software it is also advisable that the web developers try their hands on CSS3 because it has advanced functions and techniques to make the whole process of animation very easy and organized.
However, users may find it difficult to arrange the animation in correct order or sequence. By using the process of set timeout method, the user can prevent any other function to get executed until the timer is finished. Another interesting effect is that of nested time out effect which allows the user to view the set up and work on the time limit accordingly.
2 Sided Flippable HTML Markup
<body>
..
<ulclass=”tips”>
<li>
<divclass=”tc_front”>
<ahref=”#tip1″>…</a>
</div>
<divclass=”tc_back”>…</div>
<divid=”tip1″class=”tip”>
<divclass=”tc_front”>…</div>
<divclass=”tc_back”>…</div>
</div>
</li>
..
</body>
Non-flippable HTML Markup
<body>
..
<ulclass=”tips”>
<li>
<ahref=”#tip1″>…</a>
<divid=”tip1″class=”tip”>
…
</div>
</li>
..
</body>
JS
$(“.tips”).tip_cards({
entrance: “bottom”,
column: 4,
margin: “1%”,
selector: “> li”,
hoverTilt: “right”,
triggerSelector: “> li a”,
cardFlyDirection: “all”,
closeButton: “X”,
flipButton: “Flip”,
navigation: true,
beforeOpen: null,
afterOpen: null
});
Options that comes in handy for the users
The options are too many; however, some of those can be very handy for the user to create the animation function.
- entrance: This option helps the user in setting the direction of the fly-in entrance animation when the cards appear. The options which come in handy to the user are “right”, “light”, “bottom” , “top”.
- column: This option is used for the purpose of aligning the cards together.
- margin: This option lets the user in creating a margin between the card so as to avoid any space for clutter.
- selector: allows the user to select and option and then work upon the desired selected option to move from one position to another.
- hovertilt: It helps the user to use the tilt option when the cards are hovered.
These are some of the basic option that helps the user to create a fine animation on the webpage. By continuously playing, experimenting and getting a hand on the techniques one can finally come up with a perfect webpage.
