DIVI: Apple iMac Scrolling Effect

utworzone przez | Wrz 10, 2016 | Bez kategorii, Divi, Tutoriale | 0 komentarzy

Na podstawie Apple iMac Scrolling Effect for Divi Image Module.

Zaczynamy

Dodaj do projektu dwa moduły Obraz w jednej kolumnie. Nie ustawiaj adresu URL obrazu, tylko ustaw animację na „Brak animacji” i w zakładce Niestandardowe CSS ustaw następujące ID i Class:

  • pierwszy obraz:
    • CSS Class: intro mac
  • drugi obraz:
    • CSS ID: mac
    • CSS Class: mac

 

Style CSS

Przejdź w panelu adm. do menu DIVI -> Opcje szablonów graficznych i w sekcji Niestandardowe CSS (na dole strony) wpisz poniższy kod:

/***************** Start ******************/
.mac {
 height: 613px !important;
 width: 764px !important;
 margin: 1240px auto 100px !important;
 background: white url("https://raw.githubusercontent.com/balajmarius/
Apple-iMac-Parallax/master/assets/images/bg.jpg") no-repeat 0 0;
 -webkit-background-size: 764px 613px !important;
 background-size: 764px 613px !important;
 backface-visibility: hidden !important;
}
.mac.intro {
 position: fixed !important;
 width: 2548px !important;
 z-index:9999 !important;
 height: 2052px !important;
 -webkit-background-size: 100% auto !important;
 background-size: 100% auto !important;
 margin: 0 !important;
 top: 0 !important;
 left: 50% !important;
 margin-top: -300px !important;
 margin-left: -1274px !important;
 -webkit-transform-origin: 50% !important;
 -ms-transform-origin: 50% !important;
 transform-origin: 50% !important;
}
/***************** End ******************/

Skrypty js

Przejdź w panelu adm. do menu DIVI -> Opcje szablonów graficznych -> Integracje  Włącz kod < body >, i w sekcji Dodaj kod do obszaru < body > wpisz poniższy kod:

<script type="text/javascript">
(function($) {
 var el = $('.intro');
 var mac = $('#mac');
 var offset = mac.offset();
 var windowHeight = $(window).height();
 $("div.intro").addClass( "proverka-3");
 $(window).on('scroll', function() {
 
 var windowTop = $(window).scrollTop();
 var scrollPercent = (offset.top - windowTop) / offset.top;
 var scale = 'scale(' + scrollPercent + ')';

 el.css('transform', scale);

 if (windowTop >= 1035) {
 el.hide();
 } else {
 el.show();
 }
 });
})(jQuery);
</script>

Efekt końcowy

Efekt można zobaczyć w nagłówku tej strony.