skew , tagcanvas , parallax

Anonyme

20 mai 2019 à 22:51:24

Bonsoir ,

voulant associer sur une page c'est trois fonctions , l'ajout de tagcanvas me créé des découpe le long de ma page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/all.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/parallax.css" rel="stylesheet">
	

<meta charset="utf-8">
<title>site</title>
   </head>
<body style="background-color: #f1eaf4">
<div class="parallax"></div>
<section class="slewedBox" style="background-color: #f1eaf4">
                    	<div id="myCanvasContainer" style="align:center !important" >
                    	<div class="row">
                  <div class="col-md-8 offset-4">
      <canvas width="350" height="225" id="myCanvas" >
      </canvas>
    </div>
    <div id="tags">      
	  <a>1</a>        
      <a>2</a>
      <a>3</a>
      <a>4</a>
      <a>5</a>
      <a>6</a>
      <a>7</a>
      <a>8</a>
      <a>9</a>      
    </div>			
    </div>
</div>
</section>
	<script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.slim.min.js"></script>
	<script src="js/bootstrap.bundle.min.js"></script>
    <script src="canvas/excanvas.js"></script>
	<script src="canvas/jquery.tagcanvas.js" ></script>
	<script src="canvas/jquery.tagcanvas.min.js"></script>
    <script src="canvas/canvas.js"></script>
</body>
</html>

et le css

@charset "utf-8";
/* CSS Document */

	.slewedBox {
      padding: 100px 0;
	transform: skew(0deg, -5deg) translateY(-190px);
}
.container {
	
	transform: skew(0deg, 5deg);
}
.parallax {
    
    background-image:url(../image/crocus.jpg);
    
    min-height: 600px; 

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

merci pour votre aide

-
Edité par Anonyme 20 mai 2019 à 22:52:12

Benzouye

21 mai 2019 à 9:20:14

Bonjour,

Manque de précisions

Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Anonyme

21 mai 2019 à 21:37:06

bonsoir,

pour être plus précis dans mon problème , c'est qu'entre mon image et la partie texte , ma partie oblique est en forme "d'escalier" ,

j'ai modifié , réécrit, déplacé mon script de tagcanvas mais aucun résultat .

mon soucis doit être dans l'écriture du ".slewedBox"

Merci

j'ai peut être une piste mais est elle ré solvable , la fonction skew est utilisé par excanvas.js et dans slewedBox dans mon css

-
Edité par Anonyme 21 mai 2019 à 21:57:56