Animated Blog Pagination
Featured
Look Demo
Add a clean pagination to your blog – for desktop devices (641px wide or higher). This plugin uses css editor and works with Squarespace 7.0 (Brine template family).
How To Install
From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.
/* = = ANIMATED BLOG PAGINATION START = = */
// — — VARIABLES — — //
// STYLES //
@ABP_arrow-background-color: #0d0d0c;
@ABP_arrow-color: #fafafa;
@ABP_arrow-size: 20px;
@ABP_arrow-thickness: 4px;
@ABP_content-background-color: #0d0d0c;
@ABP_content-border-radius: 5px;
@ABP_label-color: #888888;
@ABP_title-color: #fafafa;
@ABP_meta-color: #888888;
/* — — CODE — — */
body.collection-type-blog.view-item {
.BlogItem-pagination {
&:after {
display: none;
}
.BlogItem-pagination-link {
.BlogItem-pagination-link-icon {
width: calc(@ABP_arrow-size / 2);
height: @ABP_arrow-size;
stroke-width: @ABP_arrow-thickness;
}
.BlogItem-pagination-link-meta {
line-height: 1em;
}
}
// mobile styles
@media only screen and (min-width: 0px) and (max-width: 641px) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.BlogItem-pagination-link {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
min-width: 250px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
// desktop styles
@media only screen and (min-width: 641px) {
position: fixed;
top: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 0;
right: 0;
left: 0;
opacity: 0;
-webkit-animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
z-index: 999;
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.BlogItem-pagination-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
// arrow
.BlogItem-pagination-link-icon {
background: @ABP_arrow-background-color;
stroke: @ABP_arrow-color;
margin: 0;
padding: 13px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: transform;
z-index: 10;
opacity: 1;
}
// content
.BlogItem-pagination-link-content {
position: absolute;
width: auto;
max-width: 300px;
background: @ABP_content-background-color;
padding: 15px 20px;
-webkit-transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: transform;
opacity: 0;
pointer-events: none;
z-index: 20;
font-size: 40px;
.BlogItem-pagination-link-label {
color: @ABP_label-color;
}
.BlogItem-pagination-link-title {
color: @ABP_title-color;
}
.BlogItem-pagination-link-meta {
color: @ABP_meta-color;
}
}
// prev pagination
&.BlogItem-pagination-link--prev {
margin-right: auto;
.BlogItem-pagination-link-icon {
border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
}
.BlogItem-pagination-link-content {
left: 0;
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0);
border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
}
&:hover {
.BlogItem-pagination-link-icon {
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0);
}
}
}
// next pagination
&.BlogItem-pagination-link--next {
margin-left: auto;
.BlogItem-pagination-link-icon {
border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
}
.BlogItem-pagination-link-content {
right: 0;
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0);
border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
}
&:hover {
.BlogItem-pagination-link-icon {
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0);
}
}
}
// all hover
&:hover {
.BlogItem-pagination-link-icon {
opacity: 0;
-webkit-transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.BlogItem-pagination-link-content {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: auto;
}
}
}
}
}
}
/*
Developed by ANIagency LLC
This work is licensed under a Creative Commons Attribution 4.0 International License.
v1.04
*/
/* = = ANIMATED BLOG PAGINATION END = = */Customize
Change the arrow and background values to your liking. These can be found under Styles near the top of the plugin code.
Please note that this plugin was designed for desktop devices only (641px wide or higher).
Featured
