Hello, tell me, please, how can I implement the first slide from this site http://skyservice2016.ru/

Here is the code of what I got. slide_animated is our first slide, it should go up, slide-2 is the next page that goes up for slide_animated.

$('body').on('mousewheel', function(event,type) { if ($(window).width() >= 924) { var el = $('.slide_animated'); if (type == 1 && window.pageYOffset == 0) { if (el.hasClass('active')) { el.removeClass('active'); } } if (!el.hasClass('active') && type == -1) { el.addClass('active'); $('.slide-2').addClass('active'); window.run_animate = true; setTimeout(function() { window.run_animate = false; }, 1200); return false; } if (window.run_animate === true) { return false; } } }); $(window).on('scroll',function(){ if (this.pageYOffset == 0) { $('body').trigger('mousewheel',[1]); } else { $('body').trigger('mousewheel',[-1]); } });

PS Suddenly someone come in handy. I found a solution that suits me more or less.

 if ($(window).width() >= 1200) { $('.slide_animated').on('DOMMouseScroll mousewheel', function (ev) { $('body').addClass('fixed-header'); $(this).addClass('active'); var $this = $(this), scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = $this.height(), delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta), up = delta > 0; var prevent = function () { ev.stopPropagation(); ev.preventDefault(); ev.returnValue = false; return false; } if (!up && -delta > scrollHeight - height - scrollTop) { // Scrolling down, but this will take us past the bottom. $this.scrollTop(scrollHeight); return prevent(); } else if (up && delta > scrollTop) { // Scrolling up, but this will take us past the top. $this.scrollTop(0); return prevent(); } }); }
  • On this site, skyservice2016.ru, when the top slider creeps, scrolling does not change its position. I do not know how exactly to describe this state, I apologize, I do not understand javascript. - Masha Bubble
  • "but how to deal with the fact that the scrolling is not scrolled, I will not think up." Please explain. Unclear. - KAGG Design
  • prntscr.com/efl9qd Sorry, I don’t know how to properly explain - Masha Bubble

1 answer 1

maybe everything is tied to this ...

CSS3 transforms change the size, shape, and position of an element on a webpage using the transform property. Transformations transform an element without affecting the rest of the web page, i.e. other elements do not move relative to it. By default, the transformation takes place relative to the center of the element.

Elements that can be transformed include elements with display: block; and display: inline-block; and elements whose display property is calculated as table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption. A transformed element is considered to be with any transform property set other than none.

when the top slider moves down on the page, the properties of the trace elements change

div class = "gr-6 slide_animated ng-scope"

div class = "gr-6 slide_animated ng-scope active"

.gr-0, .gr-1, .gr-2, .gr-3, .gr-4, .gr-5, .gr-6

 display: inline-block;

.slide_animated

 -webkit-transform: translateY(0); transform: translateY(0);

.slide_animated.active

 -webkit-transform: translateY(-100%); transform: translateY(-100%);

https://html5book.ru/css3-transform/