Splash CSS Snippets

SLOW EASE

Description: Slowly eases into whatever hover-state style is currently applied to the element.

Used on:

CSS

/* start: hover over an image and have it scroll hidden content */

.slow_ease {
transition: all 1s ease-in-out;
}

/* end: hover over an image and have it scroll hidden content */

JS

n/a

1px underline

Description: Applies a 1px underline to any element.

Used on:

CSS

/* underline this */

.underline {
display: inline-block;
position: relative;
color: hsl(0, 0%, 0%);
}

.underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: hsl(0, 0%, 0%);
transform-origin: bottom right;
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}

/* underline this */

JS

n/a

Slip

Description

Used on:

CSS

/* start: hover over an image and have it scroll hidden content */

.slip:hover {
background-position: bottom center!important;
transition: background-position 5s linear 0s;
}

/* end: hover over an image and have it scroll hidden content */

JS

n/a

lose that footer

Description: Hides the default Splash footer on your page.

Used on:

CSS

/* hide the footer */

#footer {display:none;}

/* hide the footer */

JS

n/a

Fade-in-up modals

Description

Used on:

CSS

/* fade in up modal animation */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}

@keyframes fadeinup {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
transform: none;
}
}

.fadeinup {
animation-name: fadeinup;
}

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

.fade {
animation-name: fade;
}

/* fade in up modal animation */

JS

n/a

arrive at top of modal

Description

Used on:

CSS

n/a

JS

// Scroll to top on modal open option 1
$(document).ready(function() {
PUBSUB_CUSTOM_MODAL_OPENED();
});
function PUBSUB_CUSTOM_MODAL_OPENED() {
$(window).scrollTop(0);
}

grow / scale object on hover

Description: Seemingly pulls the object out of the page, toward the viewer.

Used on:

CSS

/* grow on hover */

.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.03);
box-shadow: 0px 22px 59px -35px rgba(0,0,0,0.67)
}

/* grow on hover */

JS

n/a

MULTIPLY

Description: Knocks out the text of the background color/image of the element so that it becomes transparent.

Used on:

CSS

/* multiply */

.multiply {
color: white;
mix-blend-mode: multiply;
}

/* multiply */

JS

n/a

multiply

Description

Used on:

CSS

/* multiply */

.multiply{
mix-blend-mode: multiply;
}

/* multiply */

JS

n/a

spin me

Description: The element spins upon page-scroll.

Used on:

CSS

/* spin */

.spinme {
position: fixed; /* make sure it stays put so we can see it! */

animation: rotate 1s linear infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}

/* spin */

JS

/*
var leftgear = document.getElementsByClassName("leftturn"),
rightgear = document.getElementsByClassName("rightturn");

window.addEventListener("scroll", function() {
document.getElementsByClassName("leftturn").style.transform = "rotate("+window.pageYOffset+"deg)";
document.getElementsByClassName("rightturn").style.transform = "rotate(-"+window.pageYOffset+"deg)";
});
*/

window.addEventListener('scroll', () => {
document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

dot background

Description: Applies a dotted background to the element.

Used on:

CSS

/* dot background */

.dotty {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

/* dot background */

JS

n/a

lose ghost containers

Description

Used on:

CSS

/* lose ghost containers */

.focus {
outline:none;
}

/* lose ghost containers */

JS

n/a

rotate

Description

Used on:

CSS

/* lose ghost containers */

.rotate {
animation: rotation 20s infinite linear;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}

/* lose ghost containers */

JS

n/a

Progress Bars

Description

Used on:

CSS

/* lose ghost containers */

.rotate {
animation: rotation 20s infinite linear;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}

/* lose ghost containers */

JS

n/a