Ein Code von efficientcloud646

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

8 June 2025

Ein Kodex der kaiser.zulassungsservice.gmbh

27 May 2025

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<body>
  
 		<div class="section">
			<ul class="case-study-wrapper">
				<li class="case-study-name">                            	
					<a href="#" class="hover-target">King</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">Rapper</a>
				</li>
				<li class="case-study-name">                                        	
					<a href="#" class="hover-target">Roman warrior</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">Samurai</a>
				</li>
			</ul>
			<ul class="case-study-images">
				<li>
					<div class="img-hero-background"></div> 
					<div class="dark-over-hero"></div>  
					<div class="hero-number-back">01</div> 
					<div class="hero-number">01</div> 
					<div class="hero-number-fixed">04</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">02</div> 
					<div class="hero-number">02</div>  
				</li>
				<li>
					<div class="img-hero-background"></div>
					<div class="hero-number-back">03</div>  
					<div class="hero-number">03</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">04</div> 
					<div class="hero-number">04</div> 
				</li>
			</ul>	
		</div>

</body>
  <script src='https://code.jquery.com/jquery-2.2.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

body{
	width: 100%;
  height: 100vh;
  background: #000;
	overflow: hidden;
}

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #585858;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-color: #212121;
}

.case-study-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: auto;
	margin: 0;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	list-style: none;
}
.case-study-wrapper .case-study-name a {
	position: relative;
	list-style: none;
	margin: 0;
	display: block;
	text-align: center;
	padding: 0;
	font-size: 28px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2px;
	color: #ffffff;
	opacity: 0.5;
	text-decoration: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-wrapper .case-study-name a:hover {
	text-decoration: none;
}	
.case-study-wrapper .case-study-name.active a {
	opacity: 1;
	color: #ffffff;
}	
.case-study-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	z-index:2;
}	
.case-study-images li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-images li .img-hero-background{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center center;
	background-repeat:no-repeat;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	opacity: 0;
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .img-hero-background {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li .case-study-title{
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	opacity: 0;
	color: #fff;
	z-index: 19;
	letter-spacing: 1px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	font-weight: 400;
	line-height: 16px;
	color: #fff; 
	font-style: italic;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .case-study-title {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
} 
.case-study-images li .hero-number-back{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	list-style:none;
	opacity: 0;
	font-size: 18vw;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	line-height: 1;
	color: rgba(0, 0, 0, 0.366);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number{
	position: absolute;
	bottom: 40px;
	left: 50%;
	width: 40px;
	margin-left: -70px;
	display: block;
	letter-spacing: 2px;
	text-align: center;
	list-style:none;
	opacity: 0;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number-fixed{
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: 30px;
	width: 40px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style:none;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
}
.case-study-images li .hero-number-fixed:before{
	position: absolute;
	content: '';
	top: 50%;
	left: -60px;
	width: 60px;
	height: 1px;
	z-index: 1;
	background-color: rgba(255,255,255,.4);
}
.case-study-images li.show .hero-number {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li.show .hero-number-back {
	opacity: 1;
} 
.dark-over-hero{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:5;
	background-color: #050505;
	opacity: 0.2;
}
.case-study-images li:nth-child(1) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273889733512138794.jpeg");
}
.case-study-images li:nth-child(2) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.43,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886577881518090.jpeg");
}
.case-study-images li:nth-child(3) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273890280768274555.jpeg");
}
.case-study-images li:nth-child(4) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.5,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886781967958066.jpeg");
}

@media (max-width: 991px) { 
	.case-study-images li .hero-number-back{
		font-size: 26vw;
	} 
}

@media (max-width: 767px) {	
	.case-study-wrapper .case-study-name a {
		font-size: 20px;
		letter-spacing: 1px;
	}
	.case-study-images li .hero-number-back{
		font-size: 32vw;
	} 
}

JS

(function($) { "use strict";

})(jQuery);

Ein Code von efficientcloud646

Empfohlen

Ein Code von programmationant

Ein Kodex der kaiser.zulassungsservice.gmbh

Ein Code von mironovbogdan341

HTML

CSS

JS

Empfohlen

Ein Code von programmationant

Ein Kodex der kaiser.zulassungsservice.gmbh

Ein Code von mironovbogdan341

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS