Элемент движется горизонтально, когда я прокручиваю. И это случайно происходит - PullRequest
Новая
       10

Элемент движется горизонтально, когда я прокручиваю. И это случайно происходит

0 голосов
/ 05 марта 2020 

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.show-on-scroll');

loop();

function loop() {

    Array.prototype.forEach.call(elementsToShow, function(element){
      if (isElementInViewport(element)) {
        element.classList.add('is-visible');
      } else {
        element.classList.remove('is-visible');
      }
    });

    scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

#home {
    height: 1180px !important;
}
#home > .carousel-inner {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 1010px !important;
}
#home > .carousel-inner > .bg1 {
    background-image: url('../img/home_picture1.jpg');
    background-position: center;
    background-size: cover;
}
#home > .carousel-inner > .bg2 {
    background-image: url('../img/home_picture2.jpg');
    background-position: center;
    background-size: cover;
}
#home > .carousel-inner > .bg3 {
    background-image: url('../img/home_picture3.jpg');
    background-position: center;
    background-size: cover;
}
#home > .carousel-inner > .item {
    height: 1180px !important;
}
#home > .carousel-inner > .item > .container > .carousel-caption {
    top: 10%;
    width: 100%;
    left: 0;
}
#home > .carousel-inner > .item > .container > .carousel-caption > h1 {
    font-family: 'NBG-bold';
    font-size: 30px;
    text-shadow: none;
    color: #ffffff;
}
#home > .carousel-inner > .item > .container > .carousel-caption > p {
    font-family: 'NBG-light';
    font-size: 45px;
    text-shadow: none;
}
#home > .carousel-indicators {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    top: 100%;
    bottom: 0;
}
#home > .container {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 35%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#home > .container > .row {
    width: 75%;
    margin: 0 auto;
    color: #ffffff;
}

#home > .container > .row > div.col-lg-4 > img.img-circle {
    transition: all 0.3s ease-in-out;
    transform: translateY(0px);
}

#home > .container > .row > div.col-lg-4 > img.img-circle:hover {
    transform: translateY(-50px);
}

#home > .container > .row > div.col-lg-4 > div.title {
    width: 161px;
    height: 46px;
    margin: 0 auto 16px auto;
}
#home > .container > .row > div.col-lg-4 > div.title > div.bg {
    z-index: -1;
    position: absolute;
    width: 161px;
    height: 46px;
    background-color: #FFB000;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=15);
    opacity: 0;
}
#home > .container > .row > div.col-lg-4 > div.title > h2 {
    padding-top: 7px;
    color: #ffffff;
    font-weight: regular;
}
#home > .container > .carousel-indicators {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 16px;
    margin-bottom: 0;
    top: 0;
    bottom: 0;
}

@media (min-width: 1200px) {
    #home {
        height: 600px !important;
    }
    #home > .container {
        top: 70%;
    }
    #home > .carousel-inner > .item > .container > .carousel-caption {
        top: 10%;
         backdrop-filter: blur(5px);
    }

    #home > .carousel-inner > .item > .container > .carousel-caption > h1,
    #home > .carousel-inner > .item > .container > .carousel-caption > p {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
    }
    #home > .carousel-inner > .item > .container > .carousel-caption > h1.init {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;

        -moz-animation-name: anim_home_title;
        -o-animation-name: anim_home_title;
        -webkit-animation-name: anim_home_title;
        animation-name: anim_home_title;
        -moz-animation-duration: .4s;
        -o-animation-duration: .4s;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
    }
    #home > .carousel-inner > .item > .container > .carousel-caption > p.init {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;

        -moz-animation-name: anim_home_subtitle;
        -o-animation-name: anim_home_subtitle;
        -webkit-animation-name: anim_home_subtitle;
        animation-name: anim_home_subtitle;
        -moz-animation-duration: .4s;
        -o-animation-duration: .4s;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
    }


    #home > .container > .row > div.col-lg-4 {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
    }
    #home > .container > .row > div.col-lg-4.init {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;

        -moz-animation-name: anim_home_circular;
        -o-animation-name: anim_home_circular;
        -webkit-animation-name: anim_home_circular;
        animation-name: anim_home_circular;
        -moz-animation-duration: .4s;
        -o-animation-duration: .4s;
        -webkit-animation-duration: .4s;
        animation-duration: .4s;
    }
}
@-moz-keyframes anim_home_title {
    from {
        margin-top: 50px;
        opacity: 0;
    }
    to {
        margin-top: 20px;
        opacity: 1;
    }
}
@-webkit-keyframes anim_home_title {
    from {
        margin-top: 50px;
        opacity: 0;
    }
    to {
        margin-top: 20px;
        opacity: 1;
    }
}
@keyframes anim_home_title {
    from {
        margin-top: 50px;
        opacity: 0;
    }
    to {
        margin-top: 20px;
        opacity: 1;
    }
}
@-moz-keyframes anim_home_subtitle {
    from {
        margin-top: 30px;
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}
@-webkit-keyframes anim_home_subtitle {
    from {
        margin-top: 30px;
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}
@keyframes anim_home_subtitle {
    from {
        margin-top: 30px;
        opacity: 0;
    }
    to {
        margin-top: 0px;
        opacity: 1;
    }
}
@-moz-keyframes anim_home_circular {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes anim_home_circular {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes anim_home_circular {
    from {opacity: 0;}
    to {opacity: 1;}
}

Сайт, на котором я работаю, http://www.smartandwise.co.kr/home/

Это выглядит так:

enter image description here

Я хотел добавить анимацию прокрутки (элементы, появляющиеся при просмотре) на вновь добавленные элементы.

Сайт уже использовал анимацию прокрутки со старыми элементами, но когда я скопировать и вставить код, который не работал, поэтому я скопировал и вставил код с этого сайта

Появляется, когда я возвращаюсь после просмотра других вкладок и прокрутки. Так может это проблема с браузером?

Это происходит с обеих сторон.

...