Description
Kintyp Studio is a challenge impressed by some video results, which I made a decision to make accessible for HTML designers and builders. Utilizing the talents of Julien Garnier’s Anime.js and with the ability of CSS3 and JavaScript I current you ten responsive textual content animations. You possibly can current your message in enticing method in your hero headers, synced video overlays or as paragraph titles in your textual content content material. The functions are solely restricted by your creativeness.
* IMPORTANT NOTE – the challenge DOES NOT assist IE11 *
The product is examined on all number of gadgets to ensure it reacts correctly on totally different show sizes. I’m utilizing relative font measurement items, which values I additionally recalculate if the container is smaller than the viewport. This manner the textual content content material is the defining begin level from the place I calculate the sizes of all different components that construct every impact. On this method I obtain responsive conduct.
Utilization
The sleek animation results can be utilized in number of instances. A few of them are:
- YouTube Overlays
- Video Overlays
- Hero Headers
- Paragraph Titles
YouTube Overlays
This demo exhibits a decrease third that loops independently from the video and two animated messages which might be in sync with the YouTube video.
Video Overlays
On this demo I take advantage of the HTML5 video object. It’s doable to deal with the timeupdate occasion and monitor the currentTime worth, whereas the video is enjoying. Then you possibly can merely determine at what level of time to start out your textual content overlays. Identical method can be utilized with the HTML5 audio object.
Hero Header
This instance makes use of all results to current a protracted message. Every impact factors to the subsequent and the final one factors to the primary with a view to create a steady loop. That is the commonest utilization and works easy even on very previous gadgets.
Paragraph Titles
Right here you possibly can see how the animations can be utilized as titles in your textual content content material. They begin one after one other and loop on their very own.
Find out how to use the authoring software
The functions of the impact require, virtually all the instances, a couple of textual content animation. The Kintyp Studio is the software that I created to allow you to construct your results one after the other. It’s good to observe few easy steps to customise your content material and to generate the wanted code. You’ll find extra particulars within the product’s documentation.
- Select impact sort.
- Set impact attributes.
- Model your content material.
- Preview the consequence.
- Publish your impact.
Options
- Ten sorts of animations.
- Responsive Conduct.
- search engine marketing pleasant.
- Greater than 20 customizable parameters.
- Potential to deal with three occasions, which fireplace: on the finish of the displaying animation, on the finish of wait time, on the finish of the hiding animation.
- Authoring software
Changelog
RELEASED [NOV 2019]
