Javascript выгорает с JQuery или JavaScript,

Как я могу сделать Javascript FadeIn так: http://www.bewerberfilm.com Javascript выгорает с JQuery или JavaScript,

видео FadeIn слева и справа. Текстовые поля над видео исчезают с разными вторыми настройками. Как я могу это понять? Может ли кто-нибудь показать мне или помочь мне? У меня нет опыта работы в JS/Jquery, но я хочу узнать этот язык.

источник

2015-08-25 Patrick Dierig

You можно проверить это: https://daneden.github.io/animate.css/. Там есть «fadeInLeft», который должен быть тем, что вы ищете –

Вы всегда можете сделать сами. Этот эффект только делает переход между двумя свойствами: непрозрачность и положение. С помощью [jquery animate] (https://api.jquery.com/animate/) вы можете сделать этот эффект с переходом Opacity 0 -> 1 и Left/Margin-Left/Padding-Left (или справа) от X до Y – frikinside

Спасибо за ваши ответы! @Alekos: Как я могу оживить его, что окно просто исчезает, когда я перехожу к коробке? frikinside: Спасибо за информацию! –

Вы можете добавить слушателя к scroll события, как это:

$(document).ready(function() { 
 
    var element = $('#MyElement'); 
 

 
    var running = false; 
 

 
    $(window).scroll(function() { 
 
    console.log(element.position()); 
 
    if (element.position().top <= $(window).scrollTop() + $(window).innerHeight() && !running) { 
 
     console.log("Triggering animation"); 
 
     running = true; 
 
     element.removeClass().addClass('fadeInLeftBig animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 
 
     $(this).removeClass(); 
 
     }); 
 
    } 
 
    }); 
 
});

#MyElement { 
 
    height: 40px; 
 
    clear: both; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/>adsada 
 
    <br/> 
 
</p> 
 
<div id="MyElement"></div>

Здесь рабочий скрипку, весь CSS был слишком велик для StackOverflow сниппета: http://jsfiddle.net/df19qumg/

источник

2015-08-25 10:04:18

Работайте для меня. Ty! –

Javascript выгорает с JQuery или JavaScript,

ответ

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