All geek questions in one place

Affect overlapping elements when div freezes animation canceled

I am having problems changing the animation of “Følg Oss” when facebook, snapchat and instagram characters are accessed. I do not want this to happen. I just want it to usually slide back when you are not freezing .følg

Another problem is that I cannot make icons in the links, as the animation does not work if I add href to the html, as you should in the images

I am really really in the codin world, so I apologize if I am not good enough in formulating my problem ...

body {
    background-color: Black;
	background-repeat: repeat;
	background-attatchment: fixed;
	background-position: center top;
	background-size: 100%
	width: 100%;
}
.følg {
    position: absolute; top: 90%; left: 25% ; z-index: 1507;
    width: 50%;
    transition: transform .6s ease-in-out;
}
.følg:hover{
    transform: translate3d(0vh, -20.3vh, 0vh);
}
.følg:hover ~.fb{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.følg:hover ~.insta{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.følg:hover ~.snap{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.faq {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 13% ; z-index: 3;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.kjøp {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 37% ; z-index: 4;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.news {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 61% ; z-index: 2;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.news:hover, .kjøp:hover, .faq:hover{
    transform: translate3d(0vh, 3vh, 0vh);
}
.baeA {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 59% ; z-index: 1505;
    width: 4%;
}
.baeB {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 35% ; z-index: 1504;
    width: 4%;
}
.baeC {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 83% ; z-index: 1503;
    width: 3%;
}
.baeD {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 12% ; z-index: 1502;
    width: 3%;
}
.fb {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 38% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}
.insta {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 46.5% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}
.snap {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 55% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
        width: 100%;
        margin: auto;
    }
  
    function initialiseAxisImages() {
        var axis = document.getElementById('axis');
        var axisImages = axis.getElementsByTagName('News');

        axisImages[0].classList.remove('News');
        axisImages[1].classList.remove('move-left');
    }

    window.addEventListener('load', initialiseAxisImages, false);
    </style>
</head>
<body style="overflow:hidden">
    <img src="http://i.imgur.com/nFv2eoG.png" class="news" alt="Lime"  /> 
    <img src="http://i.imgur.com/n5eovvX.png" class="faq" alt="Lime" /> 
    <img src="http://i.imgur.com/b7iknCb.png" class="kjøp" alt="Lime" />
    <img src="http://i.imgur.com/yJqMvpT.png" class="følg" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeA" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeB" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeC" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeD" alt="Lime" /> 
    <img src="http://i.imgur.com/Tp9TaNM.png" class="fb" alt="Lime" /> 
    <img src="http://i.imgur.com/iXR7rmq.png" class="insta" alt="Lime" /> 
    <img src="http://i.imgur.com/STWEZOp.png" class="snap" alt="Lime" />
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
        <div class="item active">
              <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
        </div>

        <div class="item">
            <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
        </div>

        <div class="item">
            <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
        </div>

        <div class="item">
            <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
        </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>
Run codeHide result

In full screen mode everything will be confused, and I also don’t know how to fix a sigh

+4
1
<body style="overflow:hidden">
    <img src="http://i.imgur.com/nFv2eoG.png" class="news" alt="Lime" /> 
    <img src="http://i.imgur.com/n5eovvX.png" class="faq" alt="Lime" /> 
    <img src="http://i.imgur.com/b7iknCb.png" class="kjøp" alt="Lime" />
    <img src="http://i.imgur.com/yJqMvpT.png" class="følg" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeA" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeB" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeC" alt="Lime" /> 
    <img src="http://i.imgur.com/QPQSByR.png" class="baeD" alt="Lime" /> 
    <span id="fblink"><a id="" href="https://www.facebook.com/"><img src="http://i.imgur.com/Tp9TaNM.png" class="fb" alt="Lime" /> </a></span>
    <a id="instalink" href="https://www.instagram.com/?hl=en"><img src="http://i.imgur.com/iXR7rmq.png" class="insta" alt="Lime" /> </a>
    <a id="snaplink" href="https://www.snapchat.com/"><img src="http://i.imgur.com/STWEZOp.png" class="snap" alt="Lime" /></a>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
          <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <div class="carousel-inner" role="listbox">
          <div class="item active">
                <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
          </div>

          <div class="item">
              <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
          </div>

          <div class="item">
              <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
          </div>

          <div class="item">
              <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
          </div>
      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
  </div>
</body>

css:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}

body {
    background-color: Black;
    background-repeat: repeat;
    background-attatchment: fixed;
    background-position: center top;
    background-size: 100%
    width: 100%;
}
.følg {
    position: absolute; top: 90%; left: 25% ; z-index: 1507;
    width: 50%;
    transition: transform .6s ease-in-out;
}
.følg:hover{
    transform: translate3d(0vh, -20.3vh, 0vh);
}
.følg:hover ~#fblink{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.følg:hover ~.insta{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.følg:hover ~.snap{
    transform: translate3d(0vh, -23.3vh, 0vh);
}
.faq {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 13% ; z-index: 3;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.kjøp {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 37% ; z-index: 4;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.news {
    image-attatchment: fixed;
    position: absolute; top: -1%; left: 61% ; z-index: 2;
    width: 24%;
    transition: transform .2s ease-in-out;
}
.news:hover, .kjøp:hover, .faq:hover{
    transform: translate3d(0vh, 3vh, 0vh);
}
.baeA {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 59% ; z-index: 1505;
    width: 4%;
}
.baeB {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 35% ; z-index: 1504;
    width: 4%;
}
.baeC {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 83% ; z-index: 1503;
    width: 3%;
}
.baeD {
    image-attatchment: fixed;
    position: absolute; top: 0%; left: 12% ; z-index: 1502;
    width: 3%;
}
img .fb {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 38% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}
#instalink {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 46.5% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}
#snaplink {
    image-attatchment: fixed;
    position: absolute; top: 110%; left: 55% ; z-index: 1509;
    width: 6%;
    transition: transform .8s ease-in-out;
}

.fb {
    width: 50px;
    height 50px;
}

. -, . div (fb, insta snapchat) .

. , , .

, .

+1

Source: https://habr.com/ru/post/1629679/

More articles:


All Articles