Image Effects
To add image effects, just add the classname in the same div as the background-image is
square-image class is just a helper class to make the image square
outer div of this div must have size limit and overflow hidden
Image with no effect
Image with slow-pulse effect
Image with slow-pulse effect and custom vars
--image-effect-scale:3;--image-effect-duration:12s;
Image with slow-pulse effect and custom vars
--image-effect-scale:1.5;--image-effect-duration:30s;
Image with black-and-white effect
Image with color-rotate effect
View transitions
(works on chrome/edge/opera only for now)
These are the effects that can be added to a section or a div and the animation starts when the element is in viewFade in when in view
Sunt esse ad ipsum magna officia non culpa do incididunt reprehenderit et. Minim commodo tempor esse duis magna est elit ad reprehenderit aliqua labore mollit. Consequat ut anim pariatur incididunt in dolor magna non ad duis esse non aliquip esse. Ipsum est occaecat cillum culpa tempor est nostrud. Amet tempor veniam non aute fugiat nulla cupidatat nostrud Lorem sint irure et cillum aliquip. Exercitation nostrud elit officia cillum ullamco voluptate adipisicing culpa qui consectetur ad.
Grow when in view
Sunt esse ad ipsum magna officia non culpa do incididunt reprehenderit et. Minim commodo tempor esse duis magna est elit ad reprehenderit aliqua labore mollit. Consequat ut anim pariatur incididunt in dolor magna non ad duis esse non aliquip esse. Ipsum est occaecat cillum culpa tempor est nostrud. Amet tempor veniam non aute fugiat nulla cupidatat nostrud Lorem sint irure et cillum aliquip. Exercitation nostrud elit officia cillum ullamco voluptate adipisicing culpa qui consectetur ad.
No animation
Sunt esse ad ipsum magna officia non culpa do incididunt reprehenderit et. Minim commodo tempor esse duis magna est elit ad reprehenderit aliqua labore mollit. Consequat ut anim pariatur incididunt in dolor magna non ad duis esse non aliquip esse. Ipsum est occaecat cillum culpa tempor est nostrud. Amet tempor veniam non aute fugiat nulla cupidatat nostrud Lorem sint irure et cillum aliquip. Exercitation nostrud elit officia cillum ullamco voluptate adipisicing culpa qui consectetur ad.