Animace prulnutí
Vivamus porttitor turpis ac leo. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Praesent id justo in neque elementum ultrices. Pellentesque ipsum. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer in sapien. Ut tempus purus at lorem. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam neque. Maecenas lorem. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non arcu lacinia neque faucibus fringilla.
In convallis. Mauris tincidunt sem sed arcu. Integer malesuada. Etiam neque. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. In rutrum. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Pellentesque arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Animace zprava
1) Animace zestran
2) Animace zestran
3) Animace zestran
4) Animace zestran
5) Animace zestran
Postupná animace
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim
Praesent id justo in neque elementum ultrices. Pellentesque ipsum. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer in sapien. Ut tempus purus at lorem.
Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam neque. Maecenas lorem. Aliquam erat volutpat.
Postupná animace
Postupná animace
Postupná animace
Postupná animace
<div class="row">
<div class="col-24 col-sm-16 offset-sm-4 text-center">
<h2 class="a-animate-fade jq_intersection">Animace prulnutí</h2>
<p class="font-medium">Vivamus porttitor turpis ac leo. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
</div>
<div class="col-sm-12">
<img src="https://placehold.jp/600x600.png" alt="Alt obrázku" class="d-block">
</div>
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Praesent id justo in neque elementum ultrices. Pellentesque ipsum. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer in sapien. Ut tempus purus at lorem. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam neque. Maecenas lorem. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non arcu lacinia neque faucibus fringilla.</p>
<p>In convallis. Mauris tincidunt sem sed arcu. Integer malesuada. Etiam neque. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. In rutrum. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Pellentesque arcu. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="a-animate-right jq_intersection d-inline-block">Animace zprava</a>
</div>
<div class="col-24">
<div class="bg-gray py-4">
<div class="row justify-content-center">
<a href="#" class="col-auto a-animate-side jq_intersection">Animace zestran</a>
<a href="#" class="col-auto a-animate-side jq_intersection">Animace zestran</a>
</div>
</div>
</div>
<div class="col-24 text-center font-medium line-height-large">
<p class="a-animate-side jq_intersection">1) Animace zestran</p>
<p class="a-animate-side a-animate-delay-2 jq_intersection">2) Animace zestran</p>
<p class="a-animate-side a-animate-delay-3 jq_intersection">3) Animace zestran</p>
<p class="a-animate-side a-animate-delay-4 jq_intersection">4) Animace zestran</p>
<p class="a-animate-side a-animate-delay-5 jq_intersection">5) Animace zestran</p>
</div>
<div class="col-sm-6">
<img src="https://placehold.jp/400x400.png" alt="Animace zleva" class="d-block a-animate-left jq_intersection">
</div>
<div class="col-sm-18">
<h3>Postupná animace</h3>
<p class="a-animate-fade jq_intersection">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean id metus id velit ullamcorper pulvinar. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim</p>
<p class="a-animate-fade a-animate-delay-2 jq_intersection">Praesent id justo in neque elementum ultrices. Pellentesque ipsum. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer in sapien. Ut tempus purus at lorem.</p>
<p class="a-animate-fade a-animate-delay-3 jq_intersection">Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam neque. Maecenas lorem. Aliquam erat volutpat.</p>
</div>
<div class="col-sm-12 col-md-6 a-animate-fade jq_intersection">
<img src="https://placehold.jp/300x190.png" alt="Alt obrázku" class="d-block">
<p>Postupná animace</p>
</div>
<div class="col-sm-12 col-md-6 a-animate-fade a-animate-delay-2 jq_intersection">
<img src="https://placehold.jp/300x190.png" alt="Alt obrázku" class="d-block">
<p>Postupná animace</p>
</div>
<div class="col-sm-12 col-md-6 a-animate-fade a-animate-delay-3 jq_intersection">
<img src="https://placehold.jp/300x190.png" alt="Alt obrázku" class="d-block">
<p>Postupná animace</p>
</div>
<div class="col-sm-12 col-md-6 a-animate-fade a-animate-delay-4 jq_intersection">
<img src="https://placehold.jp/300x190.png" alt="Alt obrázku" class="d-block">
<p>Postupná animace</p>
</div>
</div>
@import "scss/mixins/intersection";
.a-animate {
$class-name: str-slice(#{&}, 2);
@at-root {
&,
[class^="#{$class-name}-"],
[class*=" #{$class-name}-"] {
@include intersection(
(
visibility: hidden,
animation-duration: 1s,
animation-fill-mode: both,
animation-timing-function: cubic-bezier(.075, .82, .165, 1),
will-change: transform,
), ( visibility: visible )
);
}
}
&-delay {
@for $i from 1 through 5 {
&-#{$i} {
@include intersection(( animation-delay: .1s * $i ));
}
}
}
&-fade {
@include intersection((), ( animation-name: fadeIn ));
}
&-left {
@include intersection((), ( animation-name: fadeInLeft ));
}
&-right {
@include intersection((), ( animation-name: fadeInRight ));
}
&-side {
&:nth-of-type(odd) {
@include intersection((), ( animation-name: fadeInLeft ));
}
&:nth-of-type(even) {
@include intersection((), ( animation-name: fadeInRight ));
}
}
&-top {
@include intersection((), ( animation-name: fadeInTop ));
}
&-bottom {
@include intersection((), ( animation-name: fadeInBottom ));
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8);
}
100% {
opacity: 1;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8) translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8) translate3d(100%, 0, 0);
}
100% {
opacity: 1;
}
}
@keyframes fadeInTop {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8) translate3d(0, -100%, 0);
}
100% {
opacity: 1;
}
}
@keyframes fadeInBottom {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8) translate3d(0, 100%, 0);
}
100% {
opacity: 1;
}
}
import Intersection from 'js-src/common/intersection';
$(() => {
new Intersection();
});
