Module 3

diagonalLayouts snowCanvas selectChoices gradientAnimate svgAnimateCustom ionCalendar fullCalendar mediumColor parsleyValidateForm iscroll spritespin turntable infiniteslide animejs filterizr lottiefiles spin

Folder ./module/diagonalLayouts

More info see - https://9elements.com/blog/pure-css-diagonal-layouts/

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam perspiciatis, rerum! Necessitatibus consequatur magni saepe, vitae tempora maxime. Fugiat illo a excepturi? Perferendis eius nihil molestias accusantium sed quos quisquam ratione facere incidunt, error itaque corrupti quibusdam a reiciendis iusto quis harum. Quae laudantium voluptatem esse adipisci error maiores illo nihil, nam officia voluptates suscipit quas repudiandae laborum expedita consequatur velit eum voluptatum quis unde commodi, repellendus. Illo unde itaque eaque cupiditate nulla deleniti sit porro nemo expedita laborum, iste at aliquid est vitae libero? Illo provident, velit hic rem repellendus quod eum voluptatum cumque molestias. Alias ex architecto beatae?

Folder ./module/snowCanvas

Custom snow on canvas

Folder ./module/selectChoices

More info see - https://github.com/jshjohnson/Choices

Defalt option plugin

Just select

Folder ./module/gradientAnimate

More info see - https://sarcadass.github.io/granim.js/examples.html

Basic gradients animation with 3 gradients in queue composed of 2 colors.

Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors.

Gradient animation with 2 colors, a background image and a blending mode set. More parameters for options.image are available in the API page.

Gradient animation with an image mask to create a gradient animation under a shape. Look at the logo on the left of the header.

Granim.js

Create a gradient animation that responds to events. Click on the different states in the gradient animation to see the gradients change.

Default state Violet state Orange state

Folder ./module/svgAnimateCustom

More info see - http://odinokun.com/2020-01-14-kak-animirovat-svg-podpis.html

Folder ./module/ionCalendar

More info see - https://github.com/IonDen/ion.calendar

Date Picker

Calendar

Folder ./module/fullCalendar

More info see - https://fullcalendar.io/

Folder ./module/mediumColor

More info see - https://habr.com/ru/post/419309/

Folder ./module/parsleyValidateForm

More info see - https://parsleyjs.org/

Example

Folder ./module/iscroll

More info see - https://github.com/cubiq/iscroll

iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. iScroll does not just scroll. It can handle any element that needs to be moved with user interaction. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. Give it a broom and it will also clean up your office.

Pretty row 1
Pretty row 2
Pretty row 3
Pretty row 4
Pretty row 5
Pretty row 6
Pretty row 7
Pretty row 8
Pretty row 9
Pretty row 10
Pretty row 11
Pretty row 12
Pretty row 13
Pretty row 14
Pretty row 15
Pretty row 16
Pretty row 17
Pretty row 18
Pretty row 19
Pretty row 20
Pretty row 21
Pretty row 22
Pretty row 23
Pretty row 24
Pretty row 25
Pretty row 26
Pretty row 27
Pretty row 28
Pretty row 29
Pretty row 30
Pretty row 31
Pretty row 32
Pretty row 33
Pretty row 34
Pretty row 35
Pretty row 36
Pretty row 37
Pretty row 38
Pretty row 39
Pretty row 40
Pretty row 41
Pretty row 42
Pretty row 43
Pretty row 44
Pretty row 45
Pretty row 46
Pretty row 47
Pretty row 48
Pretty row 49
Pretty row 50

Folder ./module/spritespin

More info see - http://spritespin.ginie.eu/

Folder ./module/turntable

More info see - https://polarnotion.github.io/turntable/

Slide on mouse X

Slide on scroll

Folder ./module/infiniteslide

More info see - https://github.com/woodroots/infiniteslidev2 or https://www.jqueryscript.net/demo/Infinite-Scroller-Plugin-jQuery/

Folder ./module/animejs

More info see - https://animejs.com/

Simple DOM NODE / NODELIST animation

Animation innerHTML

Animation KEYFRAMES

STAGGERING Animation

TIMELINE Animation

SVG MORPHING Animation

SVG LINE DRAWING Animation

SVG MOTION PATH Animation

Folder ./module/filterizr

More info see - https://yiotis.net/filterizr/#/documentation/jquery/options

Folder ./module/lottiefiles

More info see - https://github.com/airbnb/lottie-web and https://lottiefiles.com/