HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main role="main">
<!-- Slider -->
<section class="velo-slides" data-velo-slider="on" data-velo-theme="light">
<!-- Slide -->
<section class="velo-slide">
<!-- Pretitle Hint -->
<span class="velo-slider__hint"><span><span>Check Them Bldgs</span></span></span> <!-- Slide BG -->
<div class="velo-slide__bg">
<!-- Borders -->
<span class="border"><span></span></span> <!-- Img -->
<figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/VsBl5PwVZpY/2000x1200)"></figure>
</div>
<!-- Header -->
<header class="velo-slide__header">
<h3 class="velo-slide__title"><span class="oh"><span>The Name Is</span></span><span class="oh"><span>Stephen Scaff</span></span></h3>
<p class="velo-slide__text"><span class="oh"><span>I'm a Creative Developer currently building web things at the Seattle Branding + Interactive firm, Urban Influence.</span></span></p>
<span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Work</span></span></a></span>
</header>
</section>
<!-- Slide -->
<section class="velo-slide">
<!-- Pretitle Hint -->
<span class="velo-slider__hint"><span><span>What's up Playas</span></span></span>
<!-- Slide BG -->
<div class="velo-slide__bg">
<!-- Borders -->
<span class="border"><span></span></span> <!-- Img -->
<figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/D8GFCYxyJj8/2000x1200)"></figure>
</div>
<!-- Header -->
<header class="velo-slide__header">
<h3 class="velo-slide__title"><span class="oh"><span>Another Day</span></span><span class="oh"><span>Another Slide</span></span></h3>
<p class="velo-slide__text"><span class="oh"><span>The here slider interaction thing is using Velocity for ehanced animation performance.</span></span></p>
</header>
</section>
<!-- Slide - with Video -->
<section class="velo-slide">
<!-- Pretitle Hint -->
<span class="velo-slider__hint"><span><span>Urban Influence</span></span></span>
<!-- Slide BG -->
<div class="velo-slide__bg">
<!-- Borders -->
<span class="border"><span></span></span> <!-- Img -->
<figure class="velo-slide__figure" style="background-image: url()"></figure>
<div class="velo-slide__vid-wrap">
<video autoplay="" class="velo-slide__vid" loop="" poster="">
<source src="http://uiclients.com/assets/videos/ui-chaun.mp4" type="video/mp4"> Wait, are you still using IE? Bruv. Go get Chrome, or kick rocks.</video>
</div>
</div><!-- Header -->
<header class="velo-slide__header">
<h3 class="velo-slide__title"><span class="oh"><span>Pigeon Wisdom</span></span><span class="oh"><span>Agency Site</span></span></h3>
<p class="velo-slide__text"><span class="oh"><span>Live from the Coop, SOTD rocking, folio and storytelling joint for the Pigeon Wizzy squad. Coo Coo Mfers.</span></span></p>
<span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Project</span></span></a></span>
</header>
</section>
<!-- Slides Nav -->
<nav class="velo-slides-nav">
<ul class="velo-slides-nav__list">
<li>
<a class="js-velo-slides-prev velo-slides-nav__prev inactive" href="#0"><i class="icon-up-arrow"></i></a>
</li>
<li>
<a class="js-velo-slides-next velo-slides-nav__next" href="#0"><i class="icon-down-arrow"></i></a>
</li>
</ul>
</nav>
</section>
</main>
// ----------------------------------------------
// MQs
//-----------------------------------------------
//Smallest phone
$mq-xsmall: 22em;
//phone
$mq-small: 32em;
//Tablet
$mq-med: 54em;
//laptop
$mq-large: 65em;
//Past laptop
$mq-xlarge: 91em;
//Mid Size monitor
$mq-xxlarge: 115em;
//Thunderbold goes to 157em
$mq-xxxlarge: 130em;
$color-alpha: #00ffc8;
$color-beta: #003a49;
$color-white: #fff;
$color-lightgrey: #f5f6f6;
$color-midgrey: #a7a6a6;
$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);
$font-header: "Montserrat", Helvetica, sans-serif;
$font-paragraph: "Montserrat", Georgia, serif;
%font-links{
font-family: $font-header;
font-size: 0.8em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
}
//----------------------------------------------
// bg-overlay()
// Pseduo overlay element
// @param: $bg_hex: [$color-dark] - hex value for rgba conversion
// @param: $bg_opacity:[0.6] - alpha transparency level
// @param: $top_layer: element or class name for higher z-index layer
//----------------------------------------------
@mixin bg-overlay($bg_hex: $color-dark, $opacity: 0.6) {
&:after {
z-index: 0;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: $opacity;
background: $bg_hex;
}
}
//----------------------------------------------
// font-rwd
// Change font-size across breaks
// @param: $font_sm - at small
// @param: $font_med - at med break
// @param: $font_lg - at Large break
// @param: $font_xl - at Xlarge break
//----------------------------------------------
@mixin font-rwd($sm:null, $med:null, $lg:null, $xl:null, $xxl:null) {
font-size: $sm;
@if $med {
@media(min-width: $mq-med){
font-size: $med;
}
}
@if $lg {
@media(min-width: $mq-large){
font-size: $lg;
}
}
@if $xl {
@media(min-width: $mq-xlarge){
font-size: $xl;
}
}
@if $xxl {
@media(min-width: $mq-xxlarge){
font-size: $xxl;
}
}
}
body {
margin: 0;
width: 100%;
font-weight: 400;
font-style: normal;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/**
* Default to Border Box
*/
*, *:before, *:after {
box-sizing: border-box;
}
/**
* Links
*/
a {
text-decoration: none;
background-color: transparent;
outline: 0;
}
//----------------------------------------------
// Btn Theme
// Button reset theme
//----------------------------------------------
%btn-theme{
position: relative;
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0;
padding: 0;
background: transparent;
border: 0;
text-decoration:none;
@extend %font-links;
text-align: center;
cursor: pointer;
-webkit-appearance: none;
transition: all 0.4s ease-in-out;
}
//----------------------------------------------
// Btn-Draw
// Mixin that creates a button that draws out
// .btn .btn__text span
//----------------------------------------------
$btn-draw-size: 1px;
.btn-draw{
@extend %btn-theme;
color: $color-alpha;
margin-left: 2.3em;
&:after{
content: '';
top: 0;
right: 0;
height: $btn-draw-size;
width: 100%;
background-color: $color-alpha;
}
&:before{
content: '';
position: absolute;
top:50%;
left: -2.4em;
height: $btn-draw-size;
width: 3em;
background-color: $color-alpha;
transition: all 0.25s ease;
}
.btn-draw__text{
position: relative;
display: block;
padding: 0.7555em 2.29em;
line-height: 1.5;
transition: transform 0.5s ease;
&:before, &:after{
content: '';
position: absolute;
height: $btn-draw-size;
width: 0;
background-color: $color-alpha;
}
&:before{
top: 0;
left: 0;
transition: width 0.15s 0.45s $ease-cb-3; // 4th
}
&:after{
bottom: 0;
right: 0;
transition: width 0.15s 0.15s $ease-cb-3; // 2nd
}
}
// Buttons
.btn-draw__text > span{
&:before, &:after{
content: '';
position: absolute;
height: 0;
width: $btn-draw-size;
background-color: $color-alpha;
transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}
&:before{
left: 0;
bottom: 0;
transition: height 0.15s 0 $ease-cb-3; // 1st
}
&:after{
right: 0;
top: 0;
transition: height 0.15s 0.3s $ease-cb-3; // 3rd
}
}
@media (hover) {
&:hover, a:hover &{
cursor: pointer;
color: $color-alpha;
&:before{
width: 0;
transition: all 0.4s ease;
}
.btn-draw__text{
transform: translateX(-2.2em);
transition: transform 0.5s ease, width 1s ease;
// Build Top and bottom borders via width
&:before{
width: 100%;
max-width: 100%;
transition: width 0.15s $ease-cb-3; // 1st
}
&:after{
width: 100%;
transition: width 0.15s 0.3s $ease-cb-3; // 3rd
}
}
// Build Left and Right borders via height;
.btn-draw__text > span{
&:before{
left: 0;
height: 100%;
transition: height 0.15s 0.45s $ease-cb-3; // 4th
}
&:after{
right: 0;
height: 100%;
transition: height 0.15s 0.15s $ease-cb-3; // 2nd
}
}
}
}
}
//----------------------------------------------
// Btn Draw - White modifier
//----------------------------------------------
.btn-draw.btn--white{
color: #fff;
&:before,
&:after,
.btn-draw__text:before,
.btn-draw__text:after,
.btn-draw__text > span:before,
.btn-draw__text > span:after{
background-color: #fff
}
&:hover,
a:hover &{
color: #fff;
}
}
//----------------------------------------------
// Typography
//----------------------------------------------
body {
font-family: $font-paragraph;
line-height: 1.6;
}
//----------------------------------------------
// Fluid body sizing
//----------------------------------------------
body {
font-size: 100%;
@media (min-width: $mq-small) {
font-size: 102%;
}
@media (min-width: $mq-med) {
font-size: 103%;
}
@media (min-width: $mq-large) {
font-size: 107%;
}
@media (min-width: 75em) {
font-size: 110%;
}
@media (min-width: $mq-xlarge) {
font-size: 120%;
}
@media (min-width: $mq-xxlarge) {
font-size: 130%;
}
@media (min-width: $mq-xxxlarge) {
font-size: 140%;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-header;
font-weight: 700;
}
//----------------------------------------------
// CP Slider - CP-Slides
// The Container for CP Slides, with requirements for
// scroll jacking interaction.
//----------------------------------------------
.velo-slides{
z-index: 8;
position: relative;
height: 100vh;
background-color: #111;
// Might need to do above $mq-large
&[data-velo-slider="on"]{
overflow: hidden;
}
}
//----------------------------------------------
// CP Slider - CP-Slide
// The single slide instances
//----------------------------------------------
.velo-slide{
height: 100vh;
z-index: 4;
@media (min-width: $mq-med) and (max-width: $mq-large){
font-size: 80%;
}
@media (min-width: $mq-med) and (min-height: 0) and (max-height: 45em){
font-size: 70%;
}
// scroll jack requirement
[data-velo-slider="on"] &{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
// Is active
&.is-active{
z-index: 8;
}
// The Slide Background
&__bg{
z-index: 7;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
color: #111;
transform: translateZ(0);
backface-visibility: hidden;
background-color: #111;
// Apply box shadow for a more 3d effect. js applies this value.
//box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
overflow: hidden;
@include bg_overlay(#111, 0.4);
}
// Apply Colors to our backgrounds and set currentColor
&:nth-of-type(1n) .velo-slide__bg{
//background-color: $color-alpha;
//color: $color-alpha;
}
// Slide Background Image
&__figure{
z-index: 0;
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1);
transition: transform 0.5s ease;
//padding: 7em;
.is-hovering &{
transform: scale(1.1);
transition: transform 0.5s ease;
}
}
///
&__vid-wrap{
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow:hidden;
transform: scale(1);
transition: transform 0.5s ease;
@include bg_overlay(#111, 0.4);
.is-hovering &{
transform: scale(1.1);
transition: transform 0.5s ease;
}
}
&__vid{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: auto;
min-width: 100%;
max-width: none;
height: auto;
min-height: 100%;
object-fit:cover;
}
// Our main content wrap for each slide instance
&__header{
z-index: 9;
position: relative;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
overflow-y: hidden;
padding: 6%;
//transform: translateX(5%);
}
// Velo-Slide__Pretitle
&__pretitle{
color: #fff;
max-width: 22em;
@media (min-width: $mq-med){
margin-left: 7%;
}
@media (max-width: $mq-med){
//order:2;
}
}
// Velo-Slide__Title
// The Title for each slide
&__title{
margin-bottom: 0.1em;
line-height: 1.1;
color: #fff;
letter-spacing: -0.025em;
font-weight: 700;
@include font-rwd(2.25em, 5em, 5em, 5em);
}
// Velo-Slide__Text
&__text{
color: #fff;
max-width: 30em;
display: block;
margin: 1em 0 1.5em 1%;
font-size: 1.1em;
line-height: 1.8;
font-weight: 300;
}
// Velo-Slide__Btn
&__btn{
opacity: 0;
@media (min-width: $mq-med){
margin-left: 1vw;
}
.is-active &{
opacity: 1;
}
}
&__btn > a > span{
opacity: 0;
overflow-y: hidden;
transform: translate3d(0,100%,0);
.is-active &{
opacity: 1;
z-index: 9999;
transform: translate3d(0,0,0);
transition: transform 0.4s ease, opacity 0.8s ease;
}
}
}
.velo-slides[data-velo-theme="light"]{
background: #212121;
border: 1em solid #c5cac5;
.velo-slide{
margin-top: -1em;
}
.velo-slide__bg{
color: #c5cac5;
}
}
[data-velo-theme="dark"]{
background: #111;
.velo-slides__bg{
background-color: #111;
filter: grayscale(100%);
}
}
//----------------------------------------------
// Overflow Hidden
// Styles to enable slice effect for text entrances
//----------------------------------------------
.oh{
display: block;
overflow-y: hidden;
padding: 0.02em 0;
}
.oh span{
display: inline-block;
transform:translate3d(0,140%,0);
opacity: 0;
transition: transform 0.4s ease, opacity 0.8s ease;
}
.is-active .oh span{
transform:translate3d(0,0%,0);
opacity: 1;
transition: transform 0.6s $ease-cb-3, opacity 0.1s ease;
}
.is-active .oh:nth-of-type(2n) span{
transition-delay:0.2s;
}
//----------------------------------------------
// CP Slider Border Interactions
//----------------------------------------------
$border-resting-sm:0vw;
$border-animating-sm: 8vw;
$border-resting:10vw;
$border-resting-xl:7vw;
$border-resting-xxl:7vw;
$border-animating: 12vw;
$border-hovering: 0vw;
@mixin velo-slider-border($h_w, $sm, $med, $xl, $xxl){
#{$h_w}: $sm;
@media (min-width: $mq-med){
#{$h_w}: $med;
}
@media (min-width: $mq-xlarge){
#{$h_w}: $xl;
}
@media (min-width: $mq-xxlarge){
#{$h_w}: $xxl;
}
}
.border,
.border:before,
.border:after,
.border span{
z-index: 91;
position: fixed;
background-color: currentColor;
transition: 0.35s ease-in-out;
.is-hovering &{
transition: 0.5s ease-in-out;
}
.velocity-animating &{
transition: 0.5s $ease-cb-3;
}
}
.border{
top: 0;
left:0;
width: 100%;
@include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
.is-hovering &{
height: $border-hovering;
}
.velocity-animating &{
height: $border-animating-sm;
@media (min-width: $mq-med){
height: $border-animating;
}
}
}
.border:before{
content:'';
bottom: 0;
left: 0;
width: $border-resting-sm;
height: 100%;
@include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
.is-hovering &{
width: $border-hovering;
}
.velocity-animating &{
width: $border-animating-sm;
@media (min-width: $mq-med){
width: $border-animating;
}
}
}
.border:after{
content:'';
bottom: 0;
right: 0;
height:100%;
width: $border-resting-sm;
@include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
.is-hovering &{
width: $border-hovering;
}
.velocity-animating &{
width: $border-animating-sm;
@media (min-width: $mq-med){
width: $border-animating;
}
}
}
.border span{
bottom: 0;
left: 0;
height: $border-resting-sm;
width: 100%;
@include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
.is-hovering &{
height: $border-hovering;
}
.velocity-animating &{
height: $border-animating-sm;
@media (min-width: $mq-med){
height: $border-animating;
}
}
}
//----------------------------------------------
// CP Slider Hints
// Vertical line with text, rotated to left of slide
//----------------------------------------------
.velo-slider__hint {
z-index: 99;
position: fixed;
top: 0;
left: 0;
display: none;
height: 100vh;
width: 4em;
font-size: 0.9em;
color: #fff;
@media (min-width: $mq-med){
display: block;
}
& > span {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
transform: translate(-50%, -50%) rotate(-90deg);
@extend %font-links;
overflow:hidden;
}
& > span > span{
display: inline-block;
transform: translateY(-110%);
.is-active &{
opacity: 1;
top: 50%;
transition: 1s $ease-cb-2;
transform: translateY(0%);
transition: 0.4 ease;
}
}
}
//----------------------------------------------
// CP Slides: Nav
// Up/Down nav for CP Slider
//----------------------------------------------
.velo-slides-nav {
/* lateral navigation */
position: fixed;
z-index: 91;
right: 3%;
bottom: 1em;
@media (min-width: $mq-med){
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
&__list{
list-style: none;
}
li:first-child{
margin-bottom: 0.25em;
}
a {
display: block;
color: rgba(#fff,0.9);
transition: color 0.5s ease, text-shadow 0.5s ease;
&:hover{
color: rgba(#fff,1);
text-shadow: 0px 0px 6px rgba(255,255,255,0.6);
transition: color 0.5s ease, text-shadow 0.5s ease;
}
}
a.inactive {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
i{
font-size: 2.2em;
@media (min-width: $mq-med){
font-size: 1.5em;
}
}
}
@font-face {
font-family: 'ssicons';
src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'ssicons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-down-chev:before {
content: "\e900";
}
.icon-right-chev:before {
content: "\e901";
}
.icon-up-chev:before {
content: "\e902";
}
.icon-left-chev:before {
content: "\e903";
}
.icon-up-arrow:before {
content: "\e904";
}
.icon-down-arrow:before {
content: "\e905";
}
.icon-left-arrow:before {
content: "\e906";
}
.icon-right-arrow:before {
content: "\e907";
}
/**
* Velocity Effects
*
* First, A few Registered effects for velocity's ui kit.
* Actual slider stuff below
*/
var scaleDownAmnt = 0.7;
var boxShadowAmnt = '40px';
$.Velocity.RegisterEffect("translateUp", {
defaultDuration: 1,
calls: [
[{
translateY: '-100%'
}, 1]
]
});
$.Velocity.RegisterEffect("translateDown", {
defaultDuration: 1,
calls: [
[{
translateY: '100%'
}, 1]
]
});
$.Velocity.RegisterEffect("translateNone", {
defaultDuration: 1,
calls: [
[{
translateY: '0',
opacity: '1',
scale: '1',
}, 1]
]
});
//scale down
$.Velocity.RegisterEffect("scaleDown", {
defaultDuration: 1,
calls: [
[{
opacity: '0',
scale: '0.7',
}, 1]
]
});
//gallery
$.Velocity.RegisterEffect("scaleDown.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '0%',
scale: scaleDownAmnt,
}, 0.20],
[{
translateY: '-100%'
}, 0.60],
[{
translateY: '-100%',
scale: '1',
// boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity.RegisterEffect("scaleDown.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '-100%',
scale: scaleDownAmnt,
}, 0.60],
[{
translateY: '-100%',
scale: '1',
// boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity.RegisterEffect("scaleUp.moveUp", {
defaultDuration: 1,
calls: [
[{
translateY: '90%',
scale: scaleDownAmnt,
// boxShadowBlur: boxShadowAmnt
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
// boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity.RegisterEffect("scaleUp.moveUp.scroll", {
defaultDuration: 1,
calls: [
[{
translateY: '0%',
scale: scaleDownAmnt,
// boxShadowBlur: boxShadowAmnt
}, 0.60],
[{
translateY: '0%',
scale: '1',
// boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity.RegisterEffect("scaleDown.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '0%',
scale: scaleDownAmnt,
// boxShadowBlur: boxShadowAmnt
}, 0.20],
[{
translateY: '100%'
}, 0.60],
[{
translateY: '100%',
scale: '1',
// boxShadowBlur: '0'
}, 0.20]
]
});
$.Velocity.RegisterEffect("scaleDown.moveDown.scroll", {
defaultDuration: 1,
calls: [
[{
}, 0.60],
[{
translateY: '100%',
scale: '1',
// boxShadowBlur: '0'
}, 0.40]
]
});
$.Velocity.RegisterEffect("scaleUp.moveDown", {
defaultDuration: 1,
calls: [
[{
translateY: '-90%',
scale: scaleDownAmnt,
// boxShadowBlur: boxShadowAmnt
}, 0.20],
[{
translateY: '0%'
}, 0.60],
[{
translateY: '0%',
scale: '1',
// boxShadowBlur: '0'
}, 0.20]
]
});
/**
* Velo Slider
* A Custom Slider using Velocity and Velocity UI effects
*/
var VeloSlider = (function() {
/**
* Global Settings
*/
var settings = {
veloInit: $('.velo-slides').data('velo-slider'),
$veloSlide: $('.velo-slide'),
veloSlideBg: '.velo-slide__bg',
navPrev: $('.velo-slides-nav').find('a.js-velo-slides-prev'),
navNext: $('.velo-slides-nav').find('a.js-velo-slides-next'),
veloBtn: $('.velo-slide__btn'),
delta: 0,
scrollThreshold: 7,
currentSlide: 1,
animating: false,
animationDuration: 2000
};
// Flags
var delta = 0,
animating = false;
return {
/**
* Init
*/
init: function() {
this.bind();
},
/**
* Bind our click, scroll, key events
*/
bind: function(){
// Add active to first slide to set it off
settings.$veloSlide.first().addClass('is-active');
// Init with a data attribute,
// Binding the animation to scroll, arrows, keys
if (settings.veloInit == 'on') {
VeloSlider.initScrollJack();
$(window).on('DOMMouseScroll mousewheel', VeloSlider.scrollJacking);
}
// Arrow / Click Nav
settings.navPrev.on('click', VeloSlider.prevSlide);
settings.navNext.on('click', VeloSlider.nextSlide);
// Key Nav
$(document).on('keydown', function(e) {
var keyNext = (e.which == 39 || e.which == 40),
keyPrev = (e.which == 37 || e.which == 38);
if (keyNext && !settings.navNext.hasClass('inactive')) {
e.preventDefault();
VeloSlider.nextSlide();
} else if (keyPrev && (!settings.navPrev.hasClass('inactive'))) {
e.preventDefault();
VeloSlider.prevSlide();
}
});
// // Swipes
// $(window).swipe(function( direction, offset ) {
// //if (offset < 100) { return; }
// if (direction == "up") {
// VeloSlider.prevSlide();
// console.log('swipe up');
// }
// if (direction == "down") { VeloSlider.nextSlide(); }
// });
//set navigation arrows visibility
VeloSlider.checkNavigation();
// Call Button Hover animation
VeloSlider.hoverAnimation();
},
/**
* Hover Animation
* Adds 'is-hovering' class to the current slide
* when hovering over the button.
*/
hoverAnimation: function(){
settings.veloBtn.hover(function (){
$(this).closest(settings.$veloSlide).toggleClass('is-hovering');
});
},
/**
* Set Animation
* Defines the animation sequence, calling our registered velocity effects
* @see js/components/_velocity-effects.js
*/
setAnimation: function(midStep, direction) {
// Vars for our velocity effects
var animationVisible = 'translateNone',
animationTop = 'translateUp',
animationBottom = 'translateDown',
easing = 'ease',
animDuration = settings.animationDuration;
// Middle Step
if (midStep) {
animationVisible = 'scaleUp.moveUp.scroll';
animationTop = 'scaleDown.moveUp.scroll';
animationBottom = 'scaleDown.moveDown.scroll';
} else {
animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
animationTop = 'scaleDown.moveUp';
animationBottom = 'scaleDown.moveDown';
}
return [animationVisible, animationTop, animationBottom, animDuration, easing];
},
/**
* Init Scroll Jaclk
*/
initScrollJack: function() {
var visibleSlide = settings.$veloSlide.filter('.is-active'),
topSection = visibleSlide.prevAll(settings.$veloSlide),
bottomSection = visibleSlide.nextAll(settings.$veloSlide),
animationParams = VeloSlider.setAnimation(false),
animationVisible = animationParams[0],
animationTop = animationParams[1],
animationBottom = animationParams[2];
console.log(animationParams);
console.log(animationParams[4]);
visibleSlide.children('div').velocity(animationVisible, 1, function() {
visibleSlide.css('opacity', 1);
topSection.css('opacity', 1);
bottomSection.css('opacity', 1);
});
topSection.children('div').velocity(animationTop, 0);
bottomSection.children('div').velocity(animationBottom, 0);
},
/**
* Scroll Jack
* On Mouse Scroll
*/
scrollJacking: function(e) {
if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
delta--;
(Math.abs(delta) >= settings.scrollThreshold) && VeloSlider.prevSlide();
} else {
delta++;
(delta >= settings.scrollThreshold) && VeloSlider.nextSlide();
}
return false;
},
/**
* Previous Slide
*/
prevSlide: function(e) {
//go to previous section
typeof e !== 'undefined' && e.preventDefault();
var visibleSlide = settings.$veloSlide.filter('.is-active'),
animationParams = VeloSlider.setAnimation(midStep, 'prev'),
midStep = false;
visibleSlide = midStep ? visibleSlide.next(settings.$veloSlide) : visibleSlide;
console.log(midStep);
if (!animating && !visibleSlide.is(":first-child")) {
animating = true;
visibleSlide
.removeClass('is-active')
.children(settings.veloSlideBg)
.velocity(animationParams[2], animationParams[3], animationParams[4])
.end()
.prev(settings.$veloSlide)
.addClass('is-active')
.children(settings.veloSlideBg)
.velocity(animationParams[0], animationParams[3], animationParams[4], function() {
animating = false;
});
currentSlide = settings.currentSlide - 1;
}
VeloSlider.resetScroll();
},
/**
* Next Slide
*/
nextSlide: function(e) {
//go to next section
typeof e !== 'undefined' && e.preventDefault();
var visibleSlide = settings.$veloSlide.filter('.is-active'),
animationParams = VeloSlider.setAnimation(midStep, 'next'),
midStep = false;
if (!animating && !visibleSlide.is(":last-of-type")) {
animating = true;
visibleSlide.removeClass('is-active')
.children(settings.veloSlideBg)
.velocity(animationParams[1], animationParams[3])
.end()
.next(settings.$veloSlide)
.addClass('is-active')
.children(settings.veloSlideBg)
.velocity(animationParams[0], animationParams[3], function() {
animating = false;
});
currentSlide = settings.currentSlide + 1;
}
VeloSlider.resetScroll();
},
/**
* Reset SCroll
*/
resetScroll: function() {
delta = 0;
VeloSlider.checkNavigation();
},
/**
* Check Nav
* Adds / hides nav based on first/last slide
* @todo - loop slides, without cloning if possible
*/
checkNavigation: function() {
//update navigation arrows visibility
(settings.$veloSlide.filter('.is-active').is(':first-of-type')) ? settings.navPrev.addClass('inactive'): settings.navPrev.removeClass('inactive');
(settings.$veloSlide.filter('.is-active').is(':last-of-type')) ? settings.navNext.addClass('inactive'): settings.navNext.removeClass('inactive');
},
};
})();
// INIT
VeloSlider.init();
Also see: Tab Triggers