Как заставить изображения исчезать, когда я прокручиваю

<div id="smiley"> 
     <div id="star"> 
      <img src="inc/img/heks.png" class="star"> 
      <img src="inc/img/impo.png" class="star"> 
      <img src="inc/img/angst.png" class="star"> 
     </div> 
    </div> 

    #smiley{ 
     margin: 50px auto 80px; 
     width: 1132px; 
     height: 300px; 
    } 

    #smiley #star{ 
     display: none; 
     float: left; 
     height: 300px; 
     width: 1132px; 
    } 

#smiley #star img.star{ 
    display: block; 
    float: left; 
    width: 300px; 
    margin: 50px 38px 0px; 
}

Мне нужно, чтобы изображения исчезали, когда я прокручиваю их.Как заставить изображения исчезать, когда я прокручиваю

Надеюсь, вы понимаете вопрос.

Этот шаблон веб-сайта, это делает http://www.templatemonster.com/demo/51771.html

источник

2015-01-02 Morten Buller Resen Kibsgaard

Вы говорите о цикле изображения наверху, который меняется после некоторых секунд непрерывно в угасающей анимации? – Alok

Взгляните на [jQuery] (http://jquery.com/). Это не так сложно реализовать с помощью jQuery. – Michelangelo

Позвольте мне попытаться уточнить. Есть 4 ролика «Оборудование» - «сеть» - «инновация» - «разработка». Боблы идут от невидимого до видимого, затем я прокручиваю, мне нужен тот же эффект. –

Demo .. Source code

Если вы хотите, чтобы показать изображения только тогда, когда они становятся в окне браузера .. не влияя на их загрузку. .

Попробуйте, сделайте видимость изображения скрыто, t Курица с помощью JavaScript добавить класс FadeIn к изображению, когда он стал в окне браузера ..

Так .. в вашем CSS:

<style> 
    .star { 
     visibility: hidden; 
    } 

    .fadeIn { 
     -webkit-animation: animat_show 0.8s; 
     animation: animat_show 0.8s; 
     visibility: visible !important; 
    } 

    @-webkit-keyframes animat_show{ 
     0%{opacity:0} 
     100%{opacity:1} 
    } 
</style>

Затем загрузите JQuery библиотека

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

и в вашем JavaScript:

<script> 
    function showImages(el) { 
     var windowHeight = jQuery(window).height(); 
     $(el).each(function(){ 
      var thisPos = $(this).offset().top; 

      var topOfWindow = $(window).scrollTop(); 
      if (topOfWindow + windowHeight - 200 > thisPos) { 
       $(this).addClass("fadeIn"); 
      } 
     }); 
    } 

    // if the image in the window of browser when the page is loaded, show that image 
    $(document).ready(function(){ 
      showImages('.star'); 
    }); 

    // if the image in the window of browser when scrolling the page, show that image 
    $(window).scroll(function() { 
      showImages('.star'); 
    }); 
</script>

Надеется, что это поможет ..

источник

2015-01-02 21:14:34 MujtabaFR

Спасибо, чувак! он работает: D –

Почему демо больше не работает? –

Заканчивать мой ответ на этот вопрос: How to animate this when scrolled

Также см на сайте ОП связаны, это может иметь некоторые анимации вы были бы заинтересованы в, а также объясняет, как сделать различные виды анимации

как и другие говорили, убедитесь, что элемент, который вы хотите, чтобы исчезнуть в первой имеет display: none

источник

2015-01-02 21:56:13

Как заставить изображения исчезать, когда я прокручиваю

ответ

Смежные вопросы