Scrolling through cards with stepper

Developer
042
Size
4,994 Kb
Views
4,048
  1. Scrolling through cards with stepper Previews
  2. Scrolling through cards with stepper HTML Codes
  3. Scrolling through cards with stepper CSS Codes
  4. Scrolling through cards with stepper JS Codes

How do I make an scrolling through cards with stepper?

What is a scrolling through cards with stepper? How do you make a scrolling through cards with stepper? This script and codes were developed by 042 on 09 January 2023, Monday.

Scrolling through cards with stepper Previews
IQ Test

Scrolling through cards with stepper - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrolling through cards with stepper</title> <link rel='stylesheet' id='brc-fonts-css' href='//fonts.googleapis.com/css?family=Roboto%3A400%2C300%2C700&#038;subset=latin%2Cgreek%2Ccyrillic&#038;ver=4.4.7.5' type='text/css' media='all' />
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <div class="masthead"></div>
<div class="container cards"> <div class="wrap"> <section class="card card--1"> <div class="card__content"> <h2>Select Location</p> </div> <div class="card__next"><span>Scroll: Industry</span></div> </section> <section class="card card--2"> <div class="card__content"> <h2>Select Industry</p> </div> <div class="card__next"><span>Scroll: Objectives</span></div> </section> <section class="card card--3"> <div class="card__content"> <h2>Select Objectives</p> </div> </section> </div>
</div>
<ul class="card-nav"> <li class="card-nav__item card-nav__item--1"><span>Location</span><span></span></li> <li class="card-nav__item card-nav__item--2"><span>Industry</span><span></span></li> <li class="card-nav__item card-nav__item--3"><span>Objectives</span><span></span></li>
</ul>
<div class="container"> <div class="wrap"> <div class="top-opportunities"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scrolling through cards with stepper - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: Roboto; background-color: #f6f7f8; font-size: 16px;
}
.masthead { height: 600px; background: url(http://i.imgur.com/V3UXFVR.jpg) 50% 50% no-repeat #ddd; background-size: cover;
}
.wrap { max-width: 960px; width: 100%; margin-left: auto; margin-right: auto;
}
.top-opportunities { margin-top: 150px; height: 700px; background: #ddd;
}
.card { background: #fff; min-height: 500px; width: 100%;
}
.card--1 { margin-top: -40px;
}
.card--2, .card--3 { min-height: 300px;
}
.card--2 .card__content, .card--3 .card__content { height: 300px;
}
.card__content { height: 600px; padding: 20px;
}
.card__content h2 { text-align: center; font-size: 50px; font-weight: 300;
}
.card__next { height: 58px; padding: 20px; text-align: center; background-color: #f6f7f8;
}
.card__next span { padding: 0 30px; width: 100%; color: #61646d; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAMAAADaUYZlAAAAV1BMVEUAAAAdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICkdICk5QGemAAAAHHRSTlMA8Zgn6+Tc0slmTzctIhwG9L6zqqGNgXZbQRUK9VbJYwAAAFNJREFUCNdNytcOgCAAQ9Eiyh7u2f//TkmIxPPUmxTZoklGomP3ZVTUpbnWlAPFBWzkkkuGnsKj2Mn5gRfsQz0e5ORGDhKoLAsV0ZykTvhx5q7jBS1FBCn9dVkcAAAAAElFTkSuQmCC") right 50% no-repeat;
}
.card-nav { padding: 0; margin: 0; list-style: none; position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 10px;
}
@media (max-width: 1024px) { .card-nav { display: none; }
}
.card-nav__item { height: 20px; text-align: right; cursor: pointer;
}
.card-nav__item span { display: inline-block; vertical-align: top;
}
.card-nav__item span:first-child { text-transform: uppercase; line-height: 20px; font-size: 10px; color: #a1a3a5; letter-spacing: 0.2em;
}
.card-nav__item span:last-child { border-radius: 50%; margin-top: 7px; margin-left: 10px; margin-right: 2px; height: 5px; width: 5px; background-color: #a1a3a5;
}
.card-nav__item span:last-child:after { display: block; border-radius: 50%; content: ''; height: 0; width: 0; background-color: #d7dadd;
}
.card-nav__item--active span:first-child { color: #0d5eff;
}
.card-nav__item--active span:last-child { margin-top: 5px; height: 9px; width: 9px; border: 1px solid #0d5eff; margin-right: 0;
}
.card-nav__item--active span:last-child:after { height: 5px; width: 5px; border: 1px solid #fff; background-color: #0d5eff;
}

Scrolling through cards with stepper - Script Codes JS Codes

"use strict";
$(".card").each(function (i, e) { var $elem = $(e); var topPosOffset = 1; // how much % of content scrolled var elemOffsetTop = $elem.offset().top; var topPos = elemOffsetTop; var elemHeight = $elem.outerHeight(); var bottomPos = elemOffsetTop + elemHeight; var windowHeight = $(window).height() * 0.5; $(".card-nav__item--" + (i + 1)).on("click", function () { $("html, body").animate({ scrollTop: Math.min(elemOffsetTop - ($(window).height() / 2 - elemHeight / 2), elemOffsetTop) }); }); $(window).on("load scroll", function () { var windowBottomPos = $(window).scrollTop() + windowHeight; var isInView = windowBottomPos >= topPos && windowBottomPos <= bottomPos; console.log(i + 1 + " " + isInView); $(".card-nav__item--" + (i + 1)).toggleClass("card-nav__item--active", isInView); });
});
Scrolling through cards with stepper - Script Codes
Scrolling through cards with stepper - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 4,994 Kb
Views 4,048
Do you need developer help for Scrolling through cards with stepper?

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!

042 (042) Script Codes
Name
Responsive Breakpoint Mixins
Fastest website generator, ever.
The Singapore Flag using Pure CSS
SR_02
A Pen by 042
Vertical Sprite with Greensock TweenMax
Animating characters with jQuery
JCycle2 with HammerJS
Fixed responsive layout
Custom HTML Nested List Counters
Create amazing Facebook ads 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!