Slider al Passaggio del Mouse

1566 Andev.web

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

27 January 2025

Pagina di destinazione dell'agenzia di marketing digitale

16 May 2025

Un codice di Maxi-Digital

29 June 2025

Modello HTML per blog e podcast turchi

HTML

<!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);

Consigliato

Pagina di destinazione dell'agenzia di marketing digitale

Un codice di Maxi-Digital

Modello HTML per blog e podcast turchi

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS