novis

Bonjour, J'apprécie cet effet présent sur codepen (https://codepen.io/dghez/pen/ItxKE) Est il possible d'ajouter un script dans le js afin que l'effet qui est mis en action avec la souris soit actif avec le doigt sur une écran tactile? Est ce que le script pourrait ressembler à cela: $(document).ready(function(){ var mouseX, mouseY; var ww = $( window ).width(); var wh = $( window ).height(); var traX, traY; $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; traX = ((4 * mouseX) / 570) + 40; traY = ((4 * mouseY) / 570) + 50; console.log(traX); $(".title").css({"background-position": traX + "%" + traY + "%"}); $(document).mousemove (function startup() { var el = document.getElementsByTagName("canvas")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchleave", handleLeave, false); el.addEventListener("touchmove", handleMove, false); } )}); }); Pourriez vous m'indiquer un site où je pourrai tester mes codes? Habituellement je teste avec jsfiddle mais lorsque j'insère du js il bug pas mal... donc si vous en connaissez un autre, merci d'avance Merci pour votre aide Novis

Bonjour, Je cherche sur internet des effets sur les textes et images. Je m'explique, j'aimerai que lors du défilement, les images (ou textes) apparaissent de la droite ou de la gauche. Auriez vous de bonnes adresses à me donner? pour avoir un point de départ. Personnellement, j'avais trouvé cela https://codepen.io/MCarlson8198/pen/mmqGrg Néanmoins le js présentait une erreur sur mon serveur de site. Donc je cherche quelque chose de similaire au niveau de l'effet avec un code différent. Merci beaucoup ps: si vous avez d'autres effets (animation) intéressants pour les tablettes n'hésitez pas à partager. Novis

Bonjour, Je souhaite améliorer mon site et faire en sorte que certains éléments (tableau, image, texte...) apparaissent sur toute la largeur de l'écran de manière adaptable (fluid). Cela fait un moment que je cherche mais je ne parviens toujours pas à cet effet là. Pouvez vous m'aider s'il vous plaît? Y a t il un code particulier ? J'ai testé avec du css que j avais trouvé mais rien n'y fait... Merci de votre aide novis

Bonjour, Je souhaite insérer ce coverflow ( http://jsfiddle.net/rudygotya/7q8eapr2/2/ ) sur mon site. Je n'ai pas de souci pour intégrer css et js. Seulement je ne comprends pas comment intégrer Jquery. Je vous transmets mon code: html: <div> <div id="coverflow"> <img src="http://placehold.it/350x350" /> <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> <img src="http://placehold.it/350x350" /> <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> <img src="http://placehold.it/350x350" /> </div> </div> <div id="coverflow-slider"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://adresse du lien vers coverflow en js/1019_coverflow_.js"></script> css: .ui-coverflow-wrapper{ height:400px; margin-top: 100px; } .ui-state-active{ border:0px; } js: $(function() { $('#coverflow').coverflow({ active: 2, select: function(event, ui){ console.log('here'); } }); $('#coverflow img').click(function() { if( ! $(this).hasClass('ui-state-active')){ return; } $('#coverflow').coverflow('next'); }); }); et mon head: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="http://lien vers coverflow css/1018_coverflow_.css" rel="stylesheet" type="text/css" /> Je dois faire une grosse bourde avec le jquery car à chaque fois c'est ce qui bloque! J'ai les images affichées les unes à côté des autres mais il n'y à pas d'effet. Cela fait une semaine que je cherche, trifouille... mais je ne comprends pas... d'où ma question sur le forum. J'espère que vous pourrez m'éclairer Novis

Bonjour, Je souhaite créer un effet de texte sur une image lors du survol de la souris. Je souhaiterais que le texte arrive par la gauche. J'ai trouvé un site qui illustre bien mon envie. http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/ J'ai donc testé sur mon site... Mais la phrase n'arrive pas avec l'effet, elle s'affiche en dessous. Pourtant le code ne parait pas très complexe... J'ai bien suivi les html: <div class="hvrbox"> <img src="img/photos/photo1.jpg" alt="Mountains" class="hvrbox-layer_bottom"> <div class="hvrbox-layer_top hvrbox-layer_slideleft"> <div class="hvrbox-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non. </div> </div> </div> Là j'ai modifié mon image même si ce n'est pas la définitive. J'envisage de mettre un fond blanc. (Y a t il une taille spécifique à mettre? il n'est pas indique sur le site...) et le css que je n'ai pas modifié pour l'instant: .hvrbox .hvrbox-layer_slideleft { -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .hvrbox:hover .hvrbox-layer_slideleft, .hvrbox.active .hvrbox-layer_slideleft { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } Et ensuite j'enregistre ma page css et je récupère le code link que j'insère sur mon html. Mais cela ne fonctionne pas... Pouvez vous m'aider? Je pense que si je comprends ça... il y aura une grande avancée car je débute et là je ne vois pas ce qui ne va pas... Merci pour votre aide zoroo

Bonjour, Je souhaite créer un texte avec dessous ma signature animée. J'ai trouvé des codes html, css et js avec l'exemple sur cette page : https://codepen.io/drygiel/pen/KbhmA mais je ne parvient pas à animer la signature. Pourtant j'ai tout copié collé comme indiqué et intégré les liens css et js dans ma page html. Merci de votre aide novis

Re-Bonjour, Je souhaite améliorer mon code en incrustant une transition comme dans l'effet "oscar" dont je parle plus haut. J'ai donc modifié mon code css mais le carré apparaît toujours directement, sans transition. Pouvez-vous m'indiquer quelle est mon erreur dans mon code? Merci beaucoup .item .caption:before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 1px solid #fff; content: ''; transition:0.5s; } .item .caption:before p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0); transform: scale(0); } .item .caption:hover caption:before, .item .caption:hover p { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } Merci beaucoup à la personne qui saura m'éclairer! Novis

Bonjour, J'ai crée un texte qui apparaît au survol d'une image. Seulement lorsque je veux y intégrer un lien vers une page de mon site, celui-ci n'est pas reconnu car l'image est en arrière plan (logique). De ce fait, j'ai fait le lien sur le texte mais cela n'englobe pas la totalité de la vignette (toujours logique). Est-il possible d'englober la totalité de la vignette avec un lien? J'ai essayé ce script mais le lien ne se fait toujours pas. Merci de m'éclairer: code html: <a href="ma page.html" class=".caption:before01">Cliquez ici</a> code css: .item .caption:before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 1px solid #fff; content: ''; } .caption:before01{ background:url(http://adresse de mon image.jpg) center center no-repeat; } Si vous avez des suggestions, n'hésitez pas. Je ne vois pas ce que je dois changer... Merci par avance Novis

Bonjour Yuston! Merci beaucoup, J'ai enfin réussi à voir ce carré apparaître dans ma vignette! Merci Merci.... J'ai réussi à recadrer mon texte (item. caption p) afin qu'il apparaisse correctement dans le cadre car jusqu'alors il débordait. Par contre j'ai un souci avec le titre (item. caption a et b) car il se retrouve à l'extérieur du cadre. J'ai modifié le padding mais rien n'y fait. Et si j'ajoute le padding sur item. caption le cadre déborde de ma vignette et plus rien n'est cadré. Je vous envois mon css au cas où vous trouveriez mon erreur: <script> $(document).ready(function() { //move the image in pixel var move = -15; //zoom percentage, 1.2 =120% var zoom = 1.2; //On mouse over those thumbnail $('.item').hover(function() { //Set the width and height according to the zoom percentage width = $('.item').width() * zoom; height = $('.item').height() * zoom; //Move and zoom the image $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> <style> body {<strong>></strong> <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'> <strong>></strong>} .item { width:250px; height:250px; border:2px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .item .caption { width:250px; height:250px; background:#000; color:#fff; font-weight:light; text-align:center; line-height:normal; /* fix it at the bottom */ position:absolute; left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=80); /* ie */ -moz-opacity:0.8; /* old mozilla browser like netscape */ -khtml-opacity: 0.8; /* for really really old safari */ opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption:before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 1px solid #fff; content: ''; } .item .caption a { padding:25px; 2px; text-decoration:none; color:#9400D3; font-size:20px; font-weight:normal; text-align:center; line-height:normal; } /* add spacing and make the whole row clickable*/ padding:5px; 5px; 20px; 5px; display:INLINE-BLOCK; } .item .caption b { padding:25px; 2px; text-decoration:none; color:#9400D3; font-size:20px; font-weight:bold; text-align:center; line-height:normal; /* add spacing and make the whole row clickable*/ padding:5px; 5px; 20px; 5px; display:INLINE-BLOCK; } .item .caption p { padding:25px; 5px; 25px; 5px; margin:2; font-size:16px; font-weight:light; text-align:center; line-height:normal; position: relative; top: 40%; } .item img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; } </style> > Merci beaucoup pour votre aide! Là j'avance bien , c'est cool! Novis

J'ai également trouvé ce code mais cela ne fonctionne pas non plus: .rectangle { position:absolute; top:100px; left:100px; width:300px; height:200px; border:1px solid transparent; transition:0.5s; } .rectangle:hover { border:1px solid red; width:350px; height:250px; top:75px; left:75px; } voici le code css de ma page: </script> <style> body {<strong>></strong> <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'> <strong>></strong>} .item { width:250px; height:250px; border:2px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .item .caption { width:250px; height:250px; background:#000; color:#fff; font-weight:light; text-align:center; line-height:normal; /* fix it at the bottom */ position:absolute; left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=80); /* ie */ -moz-opacity:0.8; /* old mozilla browser like netscape */ -khtml-opacity: 0.8; /* for really really old safari */ opacity: 0.8; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption a { text-decoration:none; color:#9400D3; font-size:20px; font-weight:normal; text-align:center; line-height:normal; position: relative; top: 40%; /* add spacing and make the whole row clickable*/ padding:5px; 5px; 20px; 5px; display:INLINE-BLOCK; } .item .caption b { text-decoration:none; color:#9400D3; font-size:20px; font-weight:bold; text-align:center; line-height:normal; position: relative; top: 40%; /* add spacing and make the whole row clickable*/ padding:5px; 5px; 20px; 5px; display:INLINE-BLOCK; } .item .caption p { padding:2px; 2px; 5px; 2px; margin:2; font-size:16px; font-weight:light; text-align:center; line-height:normal; position: relative; top: 40%; } .item img { border:0; /* allow javascript moves the img position*/ position:absolute; } .clear { clear:both; } </style> > Je ne sais pas comment l'intégrer. J'ai cherché, modifié, remodifié mon code en vain. Le carre ne s'affiche pas au survol de la souris dans ma vignette. J'espère que vous pourrez m'aider et que enfin je pourrai comprendre ce que je ne fais pas correctement!! Merci beaucoup Novis

Merci Dan pour votre réponse, Effectivement j'avais repéré ce code css néanmoins je n'arrive pas à identifier les lignes correspondants au carré qui apparaît lors du survol de la souris! Cela fait 5jours que je cherche mais pas moyen de trouver... J'ai fait plusieurs test et il n'y à rien de concluant. De plus, je souhaite savoir comment intégrer ce code. Imaginons que dans mon html la vignette est défini par item. Sur ce code au lieu de mettre figure.effect-oscar je dois mettre item. carre? Ou alors je ne dois rien changer au code? Merci de m'éclairer novis

Bonjour, J'ai crée un texte qui s'affiche lors du survol de ma souris sur une image. Je souhaite désormais y intégrer un carré qui apparaitrait également lors du survol mais je n'y parviens pas. J'ai fais plusieurs tests etc... mais rien de concluant. Pour l'idée, j'aimerai l'effet "oscar" présent sur ce site : http://epicadesign.fr/demos/HoverEffectImg/index.html Si quelqu'un peut me dire quel code intégrer, ce serait super! Merci d'avance Novis