bonjour à tous, étant un méga gros noob, je viens ici à l'aide, j'ai tenté de créer comme j'ai pu un avant après avec un curseur, malheureusement cela ne fonctionne pas .... merci d'avance
Modifié par maelh (22 Nov 2019 - 14:31)
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="lt-ie10" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Simulation 3D</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
*{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
body, html{
margin: 0 !important;
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
background: #000;
}
.super-container{
background: #000;
position: relative;
width: 100%;
height: 100%;
max-width: 2008px;
margin: 0 auto;
padding: 0;
}
.aspect-container{
position: relative;
display: block;
height: 100%;
margin: 0 auto;
}
.aspect-critical-content{
position: absolute;
top:0; right: 0; bottom: 0; left: 0;
}
.slider-wrapper:hover { cursor: none; }
.comparison-slider {
position: absolute;
width: 4px;
left: 0%;
top: -10px;
bottom: -15px;
background: rgb(0, 0, 0);
-webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
}
.before-wrapper {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
background-position: center;
}
.after-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.after-image {
display: block;
width: 100%;
height: 100%;
position: relative;
background-position: center;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.handle {
position:absolute;
left:100%;
top:0;
bottom:0;
width:1px;
margin-left:-1px;
background: #A89331;
cursor: ew-resize;
}
.handle::after {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
margin: -25px 0 0 -25px;
content:'\2039 \203A';
background: rgba(0, 0, 0, 0.42);
color:#A89331;
font-weight:bold;
font-size:30px;
text-align:center;
line-height:40px;
border: 3px solid #A89331;
border-radius: 50%;
transition:all 0.3s ease;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 6px rgba(0, 0, 0, 0);
}
.avant, .apres{
position: absolute;
left:50%;
top: 50%;
margin-top: -15px;
margin-left: -100px;
z-index: 1000;
font-family: "Proxima Nova", sans-serif;
font-weight: bold;
font-size: 15px;
padding: 6px 6px 6px 6px;
background: rgba(0, 0, 0, 0.76);
border-radius: 5px;
color: #A89331;
}
.apres{
margin-left: 42px;
}
</style>
<script>
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results[1] || 0;
}
</script>
</head>
<body>
<body>
<div class="super-container">
<div class="aspect-container">
<div class="aspect-critical-content">
<div class="before-wrapper" style="background: url("https://static.wixstatic.com/media/f6a88e_cba91740d41d4ca5bd542b303d6ebbf9~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/P_20190618_162626.jpg") center center / contain no-repeat;">
<div class="after-wrapper" style="transform: translateX(402px); transition: none 0s ease 0s;">
<div class="after-image" style="background: url("https://static.wixstatic.com/media/f6a88e_7f3fa548615a4e0cab374494401435e0~mv2_d_4160_3120_s_4_2.jpg/v1/fill/w_4160,h_3120/aa1%20(2).jpg") center center / contain no-repeat; transform: translateX(-402px); transition: none 0s ease 0s;"></div>
</div>
</div>
<div class="comparison-slider handle" style="left: 402px; transition: none 0s ease 0s;">
<div class="avant" style="">Avant</div><div class="apres" style="">Après</div>
</div>
</div>
</div>
</div>
<script>
bWrapper = $('.before-wrapper');
var down = false;
$(".comparison-slider").on("mousedown touchstart", function () {
down = true;
$('.avant, .apres').stop().fadeOut(100);
});
$(document).on("mouseup touchend", function () {
down = false;
$('.avant, .apres').stop().fadeIn(400);
});
$(document).on("touchmove", function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (down) {
var offsets = bWrapper.offset();
var fullWidth = bWrapper.width();
var mouseX = touch.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
bWrapper.parent().find('.comparison-slider').css({
left: mouseX,
transition: 'none'
});
bWrapper.find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'none'
});
bWrapper.find('.after-image').css({
transform: 'translateX(' + (-1 * mouseX) + 'px)',
transition: 'none'
});
}
});
$(document).on("mousemove", function (e) {
if (down) {
var offsets = bWrapper.offset();
var fullWidth = bWrapper.width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
bWrapper.parent().find('.comparison-slider').css({
left: mouseX,
transition: 'none'
});
bWrapper.find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'none'
});
bWrapper.find('.after-image').css({
transform: 'translateX(' + (-1 * mouseX) + 'px)',
transition: 'none'
});
}
});
$(document).ready(function () {
// alert($("#avant").attr("src"));
$(".before-wrapper").css({
"background": "url(" + $.urlParam('avant') + ") center no-repeat",
"background-size": "contain"
});
// alert($("#avant").attr("src"));
$(".after-image").css({
"background": "url(" + $.urlParam('apres') + ") center no-repeat",
"background-size": "contain"
});
$(this).find('.comparison-slider').css({
left: '50%',
transition: 'all 1.5s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all 1.5s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all 1.5s'
});
});
$(window).resize(function () {
$(document).find('.comparison-slider').css({
left: '50%',
transition: 'all 1.5s'
});
$(document).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all 1.5s'
});
$(document).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all 1.5s'
});
});
</script>
</body>
</div>
</div>
<script>
bWrapper = $('.before-wrapper');
var down = false;
$(".comparison-slider").on("mousedown touchstart", function () {
down = true;
$('.avant, .apres').stop().fadeOut(100);
});
$(document).on("mouseup touchend", function () {
down = false;
$('.avant, .apres').stop().fadeIn(400);
});
$(document).on("touchmove", function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (down) {
var offsets = bWrapper.offset();
var fullWidth = bWrapper.width();
var mouseX = touch.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
bWrapper.parent().find('.comparison-slider').css({
left: mouseX,
transition: 'none'
});
bWrapper.find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'none'
});
bWrapper.find('.after-image').css({
transform: 'translateX(' + (-1 * mouseX) + 'px)',
transition: 'none'
});
}
});
$(document).on("mousemove", function (e) {
if (down) {
var offsets = bWrapper.offset();
var fullWidth = bWrapper.width();
var mouseX = e.pageX - offsets.left;
if (mouseX < 0) { mouseX = 0; }
else if (mouseX > fullWidth) { mouseX = fullWidth }
bWrapper.parent().find('.comparison-slider').css({
left: mouseX,
transition: 'none'
});
bWrapper.find('.after-wrapper').css({
transform: 'translateX(' + (mouseX) + 'px)',
transition: 'none'
});
bWrapper.find('.after-image').css({
transform: 'translateX(' + (-1 * mouseX) + 'px)',
transition: 'none'
});
}
});
$(document).ready(function () {
// alert($("#avant").attr("src"));
$(".before-wrapper").css({
"background": "url(" + $.urlParam('avant') + ") center no-repeat",
"background-size": "contain"
});
// alert($("#avant").attr("src"));
$(".after-image").css({
"background": "url(" + $.urlParam('apres') + ") center no-repeat",
"background-size": "contain"
});
$(this).find('.comparison-slider').css({
left: '50%',
transition: 'all 1.5s'
});
$(this).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all 1.5s'
});
$(this).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all 1.5s'
});
});
$(window).resize(function () {
$(document).find('.comparison-slider').css({
left: '50%',
transition: 'all 1.5s'
});
$(document).find('.after-wrapper').css({
transform: 'translateX(50%)',
transition: 'all 1.5s'
});
$(document).find('.after-image').css({
transform: 'translateX(-50%)',
transition: 'all 1.5s'
});
});
</script>
</body>
</html>
Modifié par maelh (22 Nov 2019 - 14:31)