Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="pt-br">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- Dependencias slick-->
- <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
- <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
- <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
- <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
- <script type="text/javascript" src="slick/slick.min.js"></script>
- <script type="text/javascript" src="slick/slick.js"></script>
- <title>Toste</title>
- <head>
- <body>
- <div class="container">
- <div class="hero__title" id="animatedHeading">
- <div class="slick-dupe"><span class="hero__title-misc | animate">111111111111</span></div>
- <div class="slick-dupe"><span class="hero__title-misc | animate">222222222222</span></div>
- <div class="slick-dupe"><span class="hero__title-misc | animate">333333333333</span></div>
- <div class="slick-dupe"><span class="hero__title-misc | animate">444444444444</span></div>
- <div class="slick-dupe"><span class="hero__title-misc | animate">555555555555</span></div>
- </div>
- </div>
- <style>
- /**
- * Title:
- * Animations
- * Description:
- * List all the animations of the site in one file
- * Sections:
- * $. Keyframes
- * $. Classes
- */
- /* $. Keyframes
- \*----------------------------------------------------------------*/
- @keyframes shrink {
- 0% {
- color: green;
- transform: scale(2);
- }
- 100% {
- transform: scale(1);
- color: yellow;
- }
- }
- @keyframes grow {
- 0% {
- transform: scale(1);
- color: blue;
- }
- 100% {
- transform: scale(2);
- color: green;
- }
- }
- /* $. Classes
- \*----------------------------------------------------------------*/
- .animate {
- transform: translate3d(0,0,0);
- perspective: 1000;
- filter: blur(0);
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
- transform-origin: center left;
- }
- .animate--shrink {
- animation-duration: 1s;
- animation-name: shrink;
- animation-timing-function: 'linear';
- }
- .animate--grow {
- animation-duration: 1s;
- animation-timing-function: 'linear';
- animation-name: grow;
- }
- /* Slider */
- .slick-slider {
- position: relative;
- display: block;
- box-sizing: border-box;
- touch-callout: none;
- user-select: none;
- touch-action: pan-y;
- tap-highlight-color: transparent;
- padding-top: 40px;
- }
- .slick-list {
- position: relative;
- overflow: hidden;
- display: block;
- margin: 0;
- padding: 0;
- &:focus {
- outline: none;
- }
- &.dragging {
- cursor: pointer;
- cursor: hand;
- }
- }
- .slick-slider .slick-track,
- .slick-slider .slick-list {
- transform: translate3d(0, 0, 0);
- }
- .slick-track {
- position: relative;
- left: 0;
- top: 0;
- display: block;
- &:before,
- &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
- .slick-loading & {
- visibility: hidden;
- }
- }
- .slick-slide {
- float: left;
- height: 100%;
- min-height: 1px;
- [dir="rtl"] & {
- float: right;
- }
- img {
- display: block;
- }
- &.slick-loading img {
- display: none;
- }
- display: none;
- &.dragging img {
- pointer-events: none;
- }
- .slick-initialized & {
- display: block;
- }
- .slick-loading & {
- visibility: hidden;
- }
- .slick-vertical & {
- display: block;
- height: auto;
- border: 0;
- outline: none;
- &:focus,
- &:active,
- &::selection{
- outline: none !important;
- border: 0 !important;
- box-shadow: none;
- }
- }
- }
- .slick-arrow.slick-hidden {
- display: none;
- }
- .slick-current{
- position: relative;
- }
- .hero__title .slick-slide{
- overflow: hidden;
- padding: 20px 0;
- }
- .hero__title [aria-hidden]{
- transition: 1s;
- }
- /*
- .hero__title [aria-hidden="false"]{
- opacity: 1;
- }
- .hero__title [aria-hidden="true"] {
- opacity: 0;
- }
- */
- .hero__title .slick-current > span{
- box-sizing: border-box;
- display: block;
- @extend .animate--shrink;
- }
- .hero__title .slick-current + .slick-slide > span{
- @extend .animate--grow;
- }
- .no-js .hero__title .slick-dupe:nth-child(2) > span{
- padding: 1em;
- @extend .animate--grow;
- }
- .hero__title-misc{
- display: block;
- font-size: 24px;
- font-weight: bold;
- color: grey;
- }
- .container{
- margin: 0 auto;
- width: 500px;
- background: pink;
- padding: 0 40px;
- }
- </style>
- <script>
- // Get titles from the DOM
- var titleMain = $("#animatedHeading");
- var titleSubs = titleMain.find("slick-active");
- if (titleMain.length) {
- titleMain.slick({
- autoplay: false,
- arrows: false,
- dots: false,
- slidesToShow: 3,
- centerPadding: "10px",
- draggable: false,
- infinite: true,
- pauseOnHover: false,
- swipe: false,
- touchMove: false,
- vertical: true,
- verticalScrolling: true,
- speed: 1000,
- autoplaySpeed: 2000,
- useTransform: true,
- cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
- adaptiveHeight: true
- });
- // On init
- $(".slick-dupe").each(function(index, el) {
- $("#animatedHeading").slick('slickAdd', "<div>" + el.innerHTML + "</div>");
- });
- // Manually refresh positioning of slick
- titleMain.slick('slickPlay');
- };
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement