Develop Reference

Is it possible to change what happens upon hover to scroll?

Please view this imageLike in the image, i have made a border which is supposed to move 20px up on scrolling above and 20px down on scrolling down. The same thing has been accomplished through hover, however i am not being able to do it upon scroll. Is it possible to change what happens upon hover to scroll?? The code can be found below;
#menu-container div{
height: 415px;
width: 52%;
border:1.5px solid black;
background:transparent;
left: 170px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-top: -120px;
}
#divi:hover{
background:transparent;
left: 220px;
/* top:35px;*/
padding-left: -20px;
}
.menu2:hover{
background:transparent;
left: 70px !important;
/* top:-80px;*/
padding-left: -200px;
}
<div id="menu-container" >
<div id="divi"> <div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%"></div></div>
</div>
<!-- <div class="menu2" style="margin-top: -399px; margin-left: 45px;"></div> </div> -->
<img class="ay" <a href="https://imgbb.com/"><img src="https://i.ibb.co/YTTxKc9/ab.png" width="275px" height="auto" style="margin-top: -400px; margin-left: 200px "> </img>

I made you an example from your code, I explained everything in the form of comments.
let cont = document.querySelector(".container")
const maxScrollTop = 395;
// onscroll property of html elements
cont.onscroll = () => {
// your two borders
let divi = document.querySelector("#divi");
let menu = document.querySelector(".menu2");
// the math, it semes complicated but not really
/* it just maps the scrollTop value between the values that we want (between 0 and 50 with the divi and between 50 and 200 with the menu) */
divi.style.left = `${50 - ((cont.scrollTop / maxScrollTop) * 50)}px`;
menu.style.left = `${50 + ((cont.scrollTop / maxScrollTop) * (200 - 50))}px`;
};
.container{
height: 200px;
overflow-y: scroll;
}
/* I made it a bit bigger for better presentation */
#menu-container div{
height: 560px;
width: 450px;
border: 1.5px solid black;
background: transparent;
left: 50px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-bottom: -160px;
}
/* this is your hover code */
/* #divi:hover{
background: transparent;
left: 220px;
/* top: 35px;
padding-left: -20px;
}
.menu2:hover{
background: transparent;
left: 70px !important;
/* top: -80px;
padding-left: -200px;
} */
<!-- we need the container so the this is what we scroll not the iframe in the snipet, which I don't know if we can reach -->
<div class="container">
<div id="menu-container" >
<div id="divi">
<div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%">
</div>
</div>
</div>
<img src="https://i.ibb.co/YTTxKc9/ab.png" width="450px" height="auto" style="margin-top: -400px; margin-left: 50px "/>
</div>

Z-index blocks the functioning of the gif animation | Jquery CSS HTML JS [duplicate]

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 2 years ago.
I tried to create an on-hover gif animation in an image block using jquery.js.
I use these animations in horizontal or vertical blocks arranged in a grid of three columns.
When you hover over the block, the gif is launched, a colored form in blend mode is added with a typography over this gif
In my first example everything works fine, but when I wanted to add this code to a page of my website and changed the Z-index so that these elements no longer overlap on top of my menu-wrapper , the gif did not work anymore (second example).
First example :
$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
.grille{
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
}
.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}
.vignette_horizontale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.description{
height: 35px;
padding-top: 14px;
font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="gif.js"></script>
<body>
<div id="contenant">
<div class="grille">
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
</div>
</body>
Second example (Edited):
In this second example, the Snippet version work fine but not in my Website page...
I think it's by changing the Z-index values ​​that it doesn't work anymore, but I can't really find if its really that.
$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #fff;
}
h1 {
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}
.header_down{
height: 120px;
position: fixed;
width: 100%;
background: #000;
top: 0;
z-index: 104;
transition: all 300ms ease-in-out;
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
height: auto;
z-index: 40;
}
.espacehaut{
height: 120px;
z-index: 1;
}
.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}
.vignette_horizontale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
#keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width: 30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
#keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
#-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
#keyframes scale{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}
#-webkit-keyframes breakeranimate{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}
.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}
.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="all">
<div class="cursor"></div>
<!--loader-->
<!-- <div id="loader">
<img src="src/img/logo.png">
</div> -->
<!--chargement-->
<div id="breaker"> </div>
<div id="breaker-two"> </div>
<!--Navigation- ouverture-->
<div id="navigation-content">
<div class="logo">
<h1>
<a id="name">lookitsgraphic</a>
</h1>
</div>
<div class="navigation-close">
<span class="close-first"></span>
<span class="close-second"></span>
</div>
<div class="navigation-links">
<a href="javascript:setTimeout(()=>{window.location = 'index.html' },800);" data-text="HOME" id="home-link" >HOME</a>
<a href="javascript:setTimeout(()=>{window.location = 'aboutMe.html' },800);" data-text="ABOUT" id="about-link" >ABOUT</a>
<a href="javascript:setTimeout(()=>{window.location = 'projects.html' },800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
<a href="javascript:setTimeout(()=>{window.location = 'portfolio.html' },800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
<a href="javascript:setTimeout(()=>{window.location = 'contact.html' },800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
</div>
</div>
<header class="header_down">
<!--div-->
<h1><a class="logoInit" alt="logo">lookitsgraphic</a>
</h1>
<div class="social-media-links">
<a href="#/" target="_blank">
<img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
</a>
<a href="Tel: #">
<img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
</a>
<a href="mailto: #" target="_top">
<img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
</a>
<a href="#">
<img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
</a>
</div>
<div class="menubar">
<span class="first-span"></span>
<span class="second-span"></span>
<span class="third-span"></span>
</div>
<!--Header Fin-->
</header>
<!--GRILLE-->
<div class="grille">
<div class= "espacehaut"> </div>
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
<!--ALL Fin-->
</div>
<!--Scripts-->
</div>
</body>
My Website page with the gif that do not work.
If any one understand where to fix this problem.
Thank you for your consideration in this matter.

As #disinfor say in comments, there was the message $ is not defined in the console.
I had to change the order of the scripts jquery.js and gif.js and all work fine.

how can i animate the elements in the nav bar like this : https://riot.design/en/? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
hey there im trying to do something like the effect on the nav bar here:
https://riot.design/en/
this is the closest I got, pls help
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 0 100px 0 0 #31302B;
color: #FFF;
}
<div class="button_sliding_bg">HELLOW</div>

$(".div1").on("mouseover",function(){
var $this=$(this).parent();
$this.find(".div2").slideDown("fast");
$this.find(".div1").slideUp("fast");
});
$(".div2").on("mouseleave",function(){
var $this=$(this).parent();
$this.find(".div1").slideDown("fast");
$this.find(".div2").slideUp("fast");
});
body{
background-color:#0C2663;
}
.element{
float:left;
width:65px;
margin:0 10px;
}
.element div{
width:60px;
margin-top:5px;
cursor:pointer;
padding:5px;
text-align:center;
}
.element div:last-child{
background-color:#fff;
color:#0C2663;
display:none;
}
.element div:first-child{
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
<div class="div1">Home</div>
<div class="div2">Home</div>
</div>
<div class="element">
<div class="div1">About</div>
<div class="div2">About</div>
</div>
<div class="element">
<div class="div1">Portfolio</div>
<div class="div2">Portfolio</div>
</div>
<br>

This should work for you. The concept relies on the CSS transform: translate and transform: rotate properties to create the flipping cube effect.
Hope this helps!
body {
padding-top: 20px;
background: #0B1F5C;
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 20px;
-webkit-perspective: 1000px;
}
.flip-box {
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
}
.flip-box:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.face1,
.face2 {
background: #0B1F5C;
border: 1px solid #0B1F5C;
height: 100px;
}
.face1 {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.face2 {
-webkit-transform: rotateX(-90deg) translateZ(-100px);
transform: rotateX(-90deg) translateZ(-100px);
font-size: 25px;
background: white;
color: #0B1F5C;
}
<div class="flip-box">
<div class="face1">
<h1>Home</h1>
</div>
<div class="face2">
<h2>Home</h2>
</div>
</div>

i used chrome inspector on the link that you mentioned and created this for you. please ask questions that its answer could help other people too.
notice that beside the css3 transforms the trick is in
.roll span:after
that the content of data-title attribute of the hovered element will be fetched and applied to the content property:
.roll span:after {
content: attr(data-title);
}
<span data-title="Home">Home</span>
body{
background-color:grey;
}
.navbar .navbar-inner {
margin-top: 80px;
}
.navbar .nav {
float: right;
margin-right: 0;
}
.navbar .nav li {
display: inline-block;
float: none;
overflow: hidden;
transform: translate3d(0,0,0);
}
.navbar-nav>li>a {
padding-top: 13px;
padding-bottom: 7px;
}
.navbar .nav li:last-child a {
padding-right: 0;
}
.lt-ie8 .navbar .nav li {
display: block;
float: left;
}
.roll {
display: inline-block;
overflow: hidden;
z-index: 200;
position: relative;
vertical-align: top;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
pointer-events: none;
-webkit-pointer-events: none;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
overflow: hidden;
height: 18px;
}
a.roll:hover span {
overflow: visible;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 1px;
padding: 0 2px;
color: #323C46;
background: #fff;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
<body>
<div class="navbar">
<ul id="menu-primary-navigation-en" class="nav navbar-nav">
<li class="active menu-home">
<span data-title="Home">Home</span>
</li>
<li class="menu-about">
<span data-title="About">About</span>
</li>
<li class="menu-portfolio">
<span data-title="Portfolio">Portfolio</span>
</li>
<li class="menu-contacts">
<span data-title="Contacts">Contacts</span>
</li>
</ul>
</div>
</body>

Css element not in shape when appearing in mozilla

Am having issues with Mozilla Firefox, i have two divs both positioned absolute in a parent div, when my javascript display the element, it is displayed on top each other in Google Chrome and Microsoft Edge but it is displayed side by side in Mozilla Firefox, I don't know why this is happening but it is giving me a very hard time.
Html:
#listStudentDialog {
width: 600px;
height: 400px;
background-color: white;
border-radius: 3px;
margin-top: 120px;
margin-left: 50px;
}
#dialogLoader {
display: flex;
height: inherit;
flex-wrap: wrap;
justify-content: center;
transform: scale(1);
transition: all 0.35s linear;
}
.loaderInfo {
width: 180px;
height: 180px;
z-index: 70;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #f9f3f3;
display: flex;
justify-content: center;
transition: all 0.35s linear;
transform: scale(1);
}
#listStudentLoader {
margin: auto;
width: 200px;
height: 200px;
transform: scale(1);
-webkit-transition: transform 0.35s linear;
-moz-transition: transform 0.35s linear;
transition: transform 0.35s linear;
animation-duration: 10s;
animation-name: none;
}
<div id="listStudentDialog" style="opacity: 1;">
<div id="dialogLoader">
<div class="loaderInfo icon-success">
<span class="path1"></span>
<span class="path2"></span>
</div>
<div class="loader" id="listStudentLoader"></div>
</div>
</div>

Off-canvas menu and a fixed positioned header

I am creating a very basic off canvas menu, everything is working brilliantly BUT this one small thing that I can't fix!
Visit www.loaistudio.com and re-size the window to under 1000px.
Scroll down a bit and then click on the Menu button from the top left on the header.
Why does it despair? it actually does not despair but it just move to the very top of the page! Why is that? How can I fix it and just keep it to the top of the view area...
Here is the HTML
<div id="page"><!--Main Container-->
<!--Header (small screens only)-->
<div id="secondHeader">
<a class="secondHeader-menuButton" href="#">Menu</a>
<p id="logo-smallScreen">Website Name</p>
</div>
<!--/////////////////////////////////////////////////-->
<div class="wrapper">
<div id="homeSectionA" class="content">
<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br>
<p><strong>Paragraph Strong</strong></p>
<p><em>Paragraph Empaissaied</em></p>
<p><small>Paragraph Small</small></p>
<br>
<a>I am a Button</a>
<br><br>
<p><strong>List</strong></p>
<ul>
<li>List Item</li>
<li>List Item
<ul>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ul>
</li>
</ul>
<br>
<p><strong>List</strong></p>
<ol>
<li>List Item</li>
<li>List Item
<ol>
<li>Sub List Item</li>
<li>Sub List Item</li>
</ol>
</li>
</ol>
<br>
<p>Abber (<abbr title="Oh, you found me :)">Hover over me</abbr>).</p>
<br>
<p>Paragraph<sub>subscript.</sub></p>
<br>
<p>Paragraph<sup>subscript.</sup></p>
<br>
<p>Paragraph<mark>Marked Line</mark></p>
<br>
<img alt="" src="http://placehold.it/600x400/cdcdcd">
</div>
</div>
<!--Footer-->
<footer id="footer">
<?php include ("assets/templates/footer.inc"); ?>
</footer>
</div><!--The End Of The Page-->
CSS
/* Landscape Tablets //////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 1024px) {
body, #headerContent {
min-width: 100%;
}
/*PAGE LAYOUT ==================================================================*/
/*Main Page Container*/#page {
padding-top: 50px;
z-index: 1;
-webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*Content Container*/
.content {
padding: 30px;
}
/*HEADER ======================================================================*/
/*Header Wrapper*/
#headerWrapper {
background-color: #191E25;
width: 200px; height: 100%;
z-index: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translate(-200px, 0px);
-moz-transform: translate(-200px, 0px);
-o-transform: translate(-200px, 0px);
-ms-transform: translate(-200px, 0px);
transform: translate(-200px, 0px);
}
#headerWrapper.headerOpen {
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#page.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
/*Header Content Container*/
#headerContent {
width: 210px; height: 100%;
padding: 0;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
}
/*Header Logo*/
#headerLogo {
display: none;
}
/*Main Menu*/
#mainMenu, #mainMenu li {
text-align: left;
margin-top: 0;
float: none;
}
#mainMenu a {
color: #A0A8B1;
border-bottom: 1px solid #13171C;
width: 100%;
padding: 20px 0px 20px 20px;
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#mainMenu a:hover {
color: #CACFD3;
background-color: #232A34;
}
#mainMenu a.active {
color: #6E737A;
background-color: #13171C;
}
/*Second Header Container & Elements (Hidden From Widescreen)*/
#secondHeader {
color: #FFFFFF;
background-color: #49AB8E;
border-bottom: 1px solid #398770;
width: 100%;
display: block;
position: fixed; top: 0;
padding: 0 20px 0 0;
z-index: 1000;
line-height: 50px;
}
.secondHeader-menuButton {
background: #41997F url('../../assets/elements/nav-icon.png') no-repeat 20px;
background-size: 25px 24px;
width: 120px;
display: inline-block;
font-weight: bold;
text-indent: 55px;
}
.secondHeader-menuButton-active {
background: #41997F url('../../assets/elements/nav-icon-close.png') no-repeat 20px;
background-size: 25px 24px;
}
#logo-smallScreen {
display: inline-block;
float: right;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails {
width: 50%;
padding-left: 50px;
margin-left: -6px;
text-align: center;
}
#contactForm {
width: 50%;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Portrait Tablets ///////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 770px) {
/*PAGE LAYOUT =================================================================*/
/*Content Container*/.content {
padding: 20px;
}
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails, #contactForm {
width: 100%;
padding: 0;
margin: 0;
}
#contactDetails {
margin-top: 30px;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Phones /////////////////////////////////////////////////////////////////////////////////////////////*/
#media screen and (max-width: 500px) {
/*PAGES ======================================================================*/
/*Contact Page*/
#contactDetails-normal {
display: none;
}
#contactDetails-smart {
display: block;
border-top: 1px solid #CED1D6;
padding-top: 30px;
}
#contactDetails-smart a {
color: #FFFFFF;
background-color: #49AB8E;
width: 100%;
padding: 10px 15px;
margin-bottom: 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#contactDetails-smart a:hover,
#contactDetails-smart a:active {
background-color: #398770;
}
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Mini Devices ///////////////////////////////////////////////////////////////////////////////////////*/
#media only screen and (max-width: 290px) {
#logo-smallScreen {
display: none
}
}
JavaScript:
$(document).ready(function() {
//Prevent clicking on .active links
'use strict'; $('.active').click(function(a) {
a.preventDefault();
});
//Smart Navigation
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});
});

Try changing your #headerWrapper transitions to:
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
As for the header becoming "unfixed" after the translate: this seems to be a known bug in Webkit.
You can fix it by:
1) moving #secondHeader outside of #page:
<body>
<header id="headerWrapper"></header>
<div id="secondHeader"></div>
<div id="page"></div>
</body>
2) adding a new CSS class:
#page.pageOpen, #secondHeader.pageOpen {
-webkit-transform: translate(200px, 0px);
-moz-transform: translate(200px, 0px);
-o-transform: translate(200px, 0px);
-ms-transform: translate(200px, 0px);
transform: translate(200px, 0px);
}
3) add transitions to #secondHeader
#secondHeader {
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out
}
4) toggling this class via Javascript as well:
$(".secondHeader-menuButton").on('touchstart click', function(e) {
e.preventDefault();
$("#page, #secondHeader").toggleClass("pageOpen");
$("#headerWrapper").toggleClass("headerOpen");
$(this).toggleClass("secondHeader-menuButton-active");
});
$('.content').on('touchstart click', function() {
$("#page, #secondHeader").removeClass("pageOpen");
$('#headerWrapper').removeClass('headerOpen');
$('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active");
});

First of all, the menu doesn't disappear. It is merely moving to the top of #page. When you scroll to the top, you will see it.
This is documented behaviour, see MDN - transform
Summary
...
If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.
This means, instead of body, #page will be now the containing block for #secondHeader.
Since secondHeader is position: fixed; top: 0;, it will be now fixed at the top of page.
As #janfoeh has shown, you can "fix" it by moving the inner div outside, and duplicate the necessary transformation on the inner (now outside) div.