Элементы с эффектом "прокрутки вверх" на домашней странице

ProgramBox

Элементы с эффектом «прокрутки вверх» на домашней странице

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#jquery #css #scroll #opacity

#jquery #css #прокрутка #непрозрачность

Вопрос:

У меня есть элементы, которые появляются / исчезают на краю экрана при прокрутке (hideme). Я могу их анимировать, но проблема в начале, при загрузке страницы. Я не могу сделать тот же эффект при загрузке страницы … если кто-то может помочь, как это сделать.

 $(document).ready(function() {

  $('body').hide();
  $('.avatar').css('opacity', 0);
  $('.avatar img').css('width', '0vw', 'height', '0vw', 'margin-left', '50%', 'margin-top', '50%');
  $('.intro').css('opacity', 0, 'margin-top', '20%');
  $('.signature').css('opacity', 0, 'top', '75%');

  //calling jPreLoader
  $('body').jpreLoader({
    showSplash: false,
    showPercentage: true,
    loaderVPos: '10%',
    autoClose: true,
  }, function() { //callback function
    $('body').fadeIn(50);
  });

  // scroll effect
  function visibleHideme() {

    $('#home').each(function() {

      var half_of_object = $(this).offset().top   ($(this).outerHeight() / 4);
      var top_of_window = $(window).scrollTop();
      var bottom_of_window = $(window).scrollTop()   $(window).height();

      if (half_of_object < top_of_window) {
        $('.avatar').delay(700).css({
          'opacity': '0'
        });
        $('.avatar img').delay(800).css({
          'margin-top': '50%',
          'margin-left': '50%',
          'width': '0vw',
          'height': '0vw'
        });
        $('.intro').css({
          'opacity': '0',
          'margin-top': '20%'
        });
        $('.signature').delay(1000).css({
          'opacity': '0',
          'top': '75%'
        });
      }
      if (half_of_object > bottom_of_window) {
        $('.avatar').delay(700).css({
          'opacity': '0'
        });
        $('.avatar img').delay(800).css({
          'margin-top': '50%',
          'margin-left': '50%',
          'width': '0vw',
          'height': '0vw'
        });
        $('.intro').css({
          'opacity': '0',
          'margin-top': '20%'
        });
        $('.signature').delay(1000).css({
          'opacity': '0',
          'top': '75%'
        });
      } else if (half_of_object > top_of_window amp;amp; half_of_object < bottom_of_window) {
        $('.avatar').delay(700).css({
          'opacity': '1'
        });
        $('.avatar img').delay(800).css({
          'margin-top': '0%',
          'margin-left': '0%',
          'width': '25vw',
          'height': '25vw'
        });
        $('.intro').css({
          'opacity': '1',
          'margin-top': '5%'
        });
        $('.signature').delay(1000).css({
          'opacity': '1',
          'top': '60%'
        });
      }
    });
  }
  visibleHideme();

  $(window).scroll(function() {
    visibleHideme();
  });

});

 #home {
  min-height: 100vh;
}

#home .intro {
  opacity: 0;
  position: relative;
  margin-left: 25%;
  margin-top: 20%;
  width: 65%;
  text-align: left;
}

#home .avatar {
  opacity: 0;
  position: absolute;
  left: 7%;
  top: 35%;
  width: 350px;
  width: 25vw;
  height: 350px;
  height: 25vw;
}

#home .avatar img {
  position: relative;
  width: 0px;
  width: 0vw;
  height: 0px;
  height: 0vw;
  margin-left: 50%;
  margin-top: 50%;
  border: 5px solid rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#home .signature {
  opacity: 0;
  position: absolute;
  left: 70%;
  top: 75%;
  width: 200px;
  height: 124px;
}

 <div class="section" id="home">
  <div class="avatar"><img src="uploads/avatar2.jpg" alt="IL Avatar" /></div>
  <img class="signature" src="uploads/signature.png" alt="Sign" />
  <div class="intro">This is a text...</div>
</div>

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

Если я добавлю анимацию функции обратного вызова (сразу после исчезновения «тела»), элементы сначала появляются с обычной анимацией непрозрачности, затем они выполняют анимацию… я говорю о следующих дополнительных кодах :

 $('.avatar').animate({'opacity':1}, 600, 'easeInCirc');
$('.avatar img').delay(100).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeOutBounce');
$('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeInCirc');
$('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeInCirc');

В прямом эфире здесь: http://photography.igorlaszlo.com/test2.html
Если кто-нибудь может мне помочь…

1. пытаясь понять поток вашей программы … ваш dom загружается … вызывает visibleHideMe — который обрабатывает все css-файлы, которые вы хотите do…in на ваш вопрос вы говорите, что хотите делать это при загрузке страницы … и вы вызываете функцию в $(document).ready функции… я немного смущен

2. что именно вы пытаетесь сделать $('.avatar').animate({'opacity':1}, 600, 'easeInCirc'); $('.avatar img').delay(100).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeOutBounce'); $('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeInCirc'); $('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeInCirc'); и где это?

3. @ewizard спасибо за ваш ответ! когда я прокручиваю изображение аватара, текста и подписи, они появляются с эффектом. аватар становится больше с эффектом easeOutBounce, текст появляется снизу, подпись такая же, как и текст, но позже. Я мог бы сделать те же эффекты отдельно. я могу сделать это при загрузке страницы, и я могу сделать это при прокрутке, но не оба. Я бы хотел, чтобы они создавали эти эффекты при загрузке страницы, и когда я прокручиваю, они исчезают таким же образом, и когда я снова прокручиваю домашнюю страницу, они появляются одинаково …

4. хорошо — и что теперь происходит? вы вызываете visibleHideMe функцию при загрузке страницы (когда загружается dom) — что происходит? что не работает в этом?

5. итак, когда вы говорите «прокрутите домашнюю страницу еще раз», вы имеете в виду, что вы ушли со страницы и просто возвращаетесь к ней?

Ответ №1:

Я проверил предоставленную вами прямую ссылку и предположил, что вы не хотите, чтобы аватар / текст / подпись отображались при загрузке страницы, но исчезали, подобно эффекту, когда я прокручиваю назад к началу после прокрутки вниз достаточно далеко, чтобы они исчезли.

Я бы начал редактировать ваши css-файлы и, следовательно, начальный стиль, чтобы соответствовать конечному состоянию анимации, когда элементы скрыты:
Редактировать: что на самом деле верно

Затем вызовите код, чтобы показать их, когда ваш документ будет готов:
Редактировать: что на самом деле делается путем вызова visibleHideMe();

Редактировать: Тем не менее, есть предварительный загрузчик, и теперь я бы сказал, что есть проблема с синхронизацией. Поэтому удалите вызов visibleHideMe(); из document.ready и скорее добавьте его в обратный вызов jPreLoader:

 //calling jPreLoader
$('body').jpreLoader({
    showSplash: false,
    showPercentage: true,
    loaderVPos: '10%',
    autoClose: true,        
}, function() { //callback function
    $('body').fadeIn(50, visibileHideMe); //callback after body finished fading
    $('#menu-bttn span').text('Show Menu');
});

1. Спасибо, Йоши … каким-то образом проблема и путаница возникли в конце моих кодов visibleHideme(); $(window).scroll(function(){visibleHideme();}); … я удалил его с конца и поместил все скрытые коды в функцию прокрутки… кроме того, я добавил коды обратного вызова для начала, чтобы иметь эффект после исчезновения тела. Еще раз спасибо за проявленный интерес!

2. Я рад, что у вас все получилось! ^^/ Не забудьте принять ответ по своему усмотрению, чтобы этот вопрос не остался помеченным как неотвеченный 🙂

Ответ №2:

Я не эксперт, поэтому я боюсь манипулировать кодами jquery, но почему-то ответ звучит логично…

Наконец, я должен использовать коды, которые я дал, наконец, они дадут эффект «старт» :

 ...}, function() {  //callback function
    $('body').fadeIn(50);
    $('#menu-bttn span').text('Show Menu');
    $('.avatar').animate({'opacity':1}, 600, 'easeInCirc');
    $('.avatar img').delay(500).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeOutBounce');
    $('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeInCirc');
    $('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeInCirc');
});

Затем мне просто пришлось реорганизовать мою visibleHideme и просто … я просто удалил visibleHideme(); с конца кода, а остальное поместил в функцию прокрутки :

 $(window).scroll(function(){
    $('#home').each(function(){             
        //var top_of_object = $(this).offset().top;
        //var bottom_of_object = $(this).offset().top   $(this).outerHeight();
        var half_of_object = $(this).offset().top   ($(this).outerHeight()/4);
        var top_of_window = $(window).scrollTop();
        var bottom_of_window = $(window).scrollTop()   $(window).height();              
        if(half_of_object < top_of_window) {
            $('.avatar').delay(700).css({'opacity':'0'});
            $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
            $('.intro').css({'opacity':'0','margin-top':'20%'});
            $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
        }
        if (half_of_object > bottom_of_window){
            $('.avatar').delay(700).css({'opacity':'0'});
            $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'});
            $('.intro').css({'opacity':'0','margin-top':'20%'});
            $('.signature').delay(1000).css({'opacity':'0','top':'75%'});
        }               
        else if(half_of_object > top_of_window amp;amp; half_of_object < bottom_of_window){
            $('.avatar').delay(700).css({'opacity':'1'});
            $('.avatar img').delay(800).css({'margin-top':'0%','margin-left':'0%','width':'25vw','height':'25vw'});
            $('.intro').css({'opacity':'1','margin-top':'5%'});
            $('.signature').delay(1000).css({'opacity':'1','top':'60%'});
        }
    });
});

Итак, теперь у меня такой же эффект при открытии веб-сайта, как и при прокрутке…