Longboard CTAs

Developer
Tcmulder
Size
4,850 Kb
Views
46,552
  1. Longboard CTAs Previews
  2. Longboard CTAs HTML Codes
  3. Longboard CTAs CSS Codes
  4. Longboard CTAs JS Codes

How do I make an longboard ctas?

Longboard CTAs with front/back hover preview and details view.. What is a longboard ctas? How do you make a longboard ctas? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Longboard CTAs Previews
IQ Test

Longboard CTAs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Longboard CTAs</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="page"> <a href="javascript:void(0);" class="board"> <article class="board__cta board__cta--1"> <div class="board__frame"> <div class="board__deck"></div> <div class="board__detail-wrap"> <div class="board__detail"> <div class="board__stat--flex" data-stat="8">flex</div> <div class="board__stat--entergy" data-stat="9">entergy</div> <div class="board__stat--carve" data-stat="9">carve</div> <div class="board__stat--gs-carve" data-stat="7">gs-carve</div> <div class="board__text"> <h3>Board Name</h3> <p>Description of the board. Etiam vitae tortor. Vestibulum suscipit nulla quis orci. Praesent adipiscing. Curabitur turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p> </div> </div> </div> </div> </article> <article class="board__cta board__cta--2"> <div class="board__frame"> <div class="board__deck"></div> <div class="board__detail-wrap"> <div class="board__detail"> <div class="board__stat--flex" data-stat="8">flex</div> <div class="board__stat--entergy" data-stat="9">entergy</div> <div class="board__stat--carve" data-stat="9">carve</div> <div class="board__stat--gs-carve" data-stat="7">gs-carve</div> <div class="board__text"> <h3>Board Name</h3> <p>Description of the board. Etiam vitae tortor. Vestibulum suscipit nulla quis orci. Praesent adipiscing. Curabitur turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p> </div> </div> </div> </div> </article> <article class="board__cta board__cta--3"> <div class="board__frame"> <div class="board__deck"></div> <div class="board__detail-wrap"> <div class="board__detail"> <div class="board__stat--flex" data-stat="8">flex</div> <div class="board__stat--entergy" data-stat="9">entergy</div> <div class="board__stat--carve" data-stat="9">carve</div> <div class="board__stat--gs-carve" data-stat="7">gs-carve</div> <div class="board__text"> <h3>Board Name</h3> <p>Description of the board. Etiam vitae tortor. Vestibulum suscipit nulla quis orci. Praesent adipiscing. Curabitur turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p> </div> </div> </div> </div> </article> <article class="board__cta board__cta--4"> <div class="board__frame"> <div class="board__deck"></div> <div class="board__detail-wrap"> <div class="board__detail"> <div class="board__stat--flex" data-stat="8">flex</div> <div class="board__stat--entergy" data-stat="9">entergy</div> <div class="board__stat--carve" data-stat="9">carve</div> <div class="board__stat--gs-carve" data-stat="7">gs-carve</div> <div class="board__text"> <h3>Board Name</h3> <p>Description of the board. Etiam vitae tortor. Vestibulum suscipit nulla quis orci. Praesent adipiscing. Curabitur turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p> </div> </div> </div> </div> </article> </a>
</section>
<footer> Proof of concept for the <a href="http://www.kotalongboards.com/" target="_blank">Kota Longboards</a> site by <a href="http://www.zenman.com" target="_blank">Zenman</a>.
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Longboard CTAs - Script Codes CSS Codes

/*----------------------*\ :: Dev
\*----------------------*/
/*.board__cta { box-shadow: 0 0 1px rgba(teal,.5) inset;
}*/
/*----------------------*\ :: The Magic
\*----------------------*/
.board__cta { width: 25%;
}
.board:hover .board__cta:not(:hover) { width: 8.33333%;
}
.board:hover .board__cta:hover { width: 75%;
}
.board:hover .board__cta:hover ~ .board__cta:last-of-type { width: 8.33333%;
}
.board:hover .board__cta:last-of-type[class] { width: 75%;
}
/*----------------------*\ :: Styling
\*----------------------*/
*, *:before, *:after { box-sizing: border-box;
}
html, body { height: 100%;
}
.page { float: left; width: 100%; overflow: hidden;
}
.board { display: block; width: 100%; height: 45em; max-width: 75em; min-width: 20em; margin: 0 auto; font-family: "Trebuchet MS", sans-serif; line-height: 1.5; letter-spacing: .05em; cursor: default; color: black; text-decoration: none;
}
.board h3 { margin-bottom: 0;
}
.board p { margin-top: 0;
}
.board__cta { position: relative; float: left; z-index: 100; height: 100%; padding: 1em; margin: 5% auto 0; -webkit-transition: 300ms; transition: 300ms;
}
.board__frame { position: relative; display: inline-block; width: 20em;
}
.board__deck { position: absolute; z-index: 10; left: 0; width: 10em; height: 42em; -webkit-transition: 300ms; transition: 300ms; -webkit-perspective: 1000; perspective: 1000; background: transparent; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.board:hover .board__deck { -webkit-transform: translateX(0); transform: translateX(0); left: 0;
}
.board__cta:hover .board__deck { left: 20%;
}
.board__deck:hover:before, .board__deck:hover:after { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.board__deck:hover:after { opacity: 0;
}
.board__deck:hover:before { opacity: 1;
}
.board__deck:before, .board__deck:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: opacity 100ms 125ms, -webkit-transform 500ms; transition: opacity 100ms 125ms, -webkit-transform 500ms; transition: transform 500ms, opacity 100ms 125ms; transition: transform 500ms, opacity 100ms 125ms, -webkit-transform 500ms;
}
.board__deck:before { opacity: 0;
}
.board__cta--1 .board__deck:before { background-image: url(http://www.tcmulder.com/codepen/board-cta/1-bottom.png);
}
.board__cta--1 .board__deck:after { background-image: url(http://www.tcmulder.com/codepen/board-cta/1-top.png);
}
.board__cta--2 .board__deck:before { background-image: url(http://www.tcmulder.com/codepen/board-cta/2-bottom.png);
}
.board__cta--2 .board__deck:after { background-image: url(http://www.tcmulder.com/codepen/board-cta/2-top.png);
}
.board__cta--3 .board__deck:before { background-image: url(http://www.tcmulder.com/codepen/board-cta/3-bottom.png);
}
.board__cta--3 .board__deck:after { background-image: url(http://www.tcmulder.com/codepen/board-cta/3-top.png);
}
.board__cta--4 .board__deck:before { background-image: url(http://www.tcmulder.com/codepen/board-cta/4-bottom.png);
}
.board__cta--4 .board__deck:after { background-image: url(http://www.tcmulder.com/codepen/board-cta/4-top.png);
}
.board__detail-wrap { position: absolute; width: 10em; height: 42em; top: 50%; opacity: 0; -webkit-transition: 300ms; transition: 300ms;
}
.board__cta:hover .board__detail-wrap { opacity: 1;
}
.board__detail { position: absolute; top: 50%; left: 0; margin-left: 2em; -webkit-transform: translateX(100%) translateY(-50%); transform: translateX(100%) translateY(-50%);
}
[class^="board__stat--"] { position: relative; width: 15em; margin-bottom: 1em; padding-left: .5em; border: 1px solid #000; border-width: 0 1px 1px 0; color: #fff; -webkit-transition: 200ms; transition: 200ms;
}
[class^="board__stat--"]:nth-child(1):before { -webkit-transition-delay: 50ms; transition-delay: 50ms;
}
[class^="board__stat--"]:nth-child(2):before { -webkit-transition-delay: 100ms; transition-delay: 100ms;
}
[class^="board__stat--"]:nth-child(3):before { -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
[class^="board__stat--"]:nth-child(4):before { -webkit-transition-delay: 200ms; transition-delay: 200ms;
}
[class^="board__stat--"]:before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 0; background-color: #666; -webkit-transition: 200ms; transition: 200ms;
}
[class^="board__stat--"]:after { content: attr(data-stat); position: absolute; right: -1em; color: #000;
}
.board__cta:hover [class^="board__stat--"] { opacity: 1; -webkit-transition: 300ms 300ms; transition: 300ms 300ms;
}
.board__cta:hover [class^="board__stat--"][data-stat="1"]:before { width: 10%;
}
.board__cta:hover [class^="board__stat--"][data-stat="2"]:before { width: 20%;
}
.board__cta:hover [class^="board__stat--"][data-stat="3"]:before { width: 30%;
}
.board__cta:hover [class^="board__stat--"][data-stat="4"]:before { width: 40%;
}
.board__cta:hover [class^="board__stat--"][data-stat="5"]:before { width: 50%;
}
.board__cta:hover [class^="board__stat--"][data-stat="6"]:before { width: 60%;
}
.board__cta:hover [class^="board__stat--"][data-stat="7"]:before { width: 70%;
}
.board__cta:hover [class^="board__stat--"][data-stat="8"]:before { width: 80%;
}
.board__cta:hover [class^="board__stat--"][data-stat="9"]:before { width: 90%;
}
.board__cta:hover [class^="board__stat--"][data-stat="10"]:before { width: 100%;
}
footer { float: left; width: 100%; text-align: center; padding: 2em 0; font-style: italic; color: #ccc;
}
footer a { color: #aaa;
}

Longboard CTAs - Script Codes JS Codes

// nothing to see here
Longboard CTAs - Script Codes
Longboard CTAs - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 4
Size 4,850 Kb
Views 46,552
Do you need developer help for Longboard CTAs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tcmulder (tcmulder) Script Codes
Name
Percentage Animation
Sticky Stopper jQuery Plugin
Half Flip
Nav Back There
CSS-Only Slideshow
Unfinished sunrise
Cartoon Bomb
Flexslider Enhanced
Zoom
Stickup Sticky Nav jQuery Plugin
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!